【无标题】基于域名的虚拟主机+vue项目

一．基于域名的虚拟主机

1.创建项目，用于部署在nginx中发布网络

2.在/qd目录下创建一个index.html

[root@web ~]# mkdir /qd

[root@web ~]# echo "wo shi qd" > /qd/index.html

将/qd目录中的资源发布出去

3.配置nginx.conf文件

[root@web ~]# vim /usr/local/nginx/conf/nginx.conf   //在keepalive_timeout  65;的后面

再添加一个server

server{

        listen       80;

        server_name  www.qd.com;

        root         /qd;

        location / {

              index  index.html;

      }

}

[root@web ~]# /usr/local/nginx/sbin/nginx -s reload

4.设置hosts劫持

[root@web ~]# vim /etc/hosts

192.168.2.35   www.qd.com  //在最后一行添加

[root@web ~]# curl www.qd.com

wo shi qd

二．多虚拟主机配置

一个服务器上同时部署多个项目,为了方便维护，可以将server模块单独抽

离出来创建conf文件，然后在主配置文件中使用include添加外部配置，这

样让操作更加模块化

1.将刚才配置的server模块保存到一个新的文件中

[root@web ~]# sed -n '32,39p' /usr/local/nginx/conf/nginx.conf

[root@web ~]# mkdir /usr/local/nginx/conf.d/

[root@web ~]# sed -n '32,39p' /usr/local/nginx/conf/nginx.conf > /usr/local/nginx/conf.d/qd.conf

[root@web ~]# cat /usr/local/nginx/conf.d/qd.conf

[root@web ~]# sed -i '32,39d' /usr/local/nginx/conf/nginx.conf  //删除这几行

[root@web ~]# cat /usr/local/nginx/conf/nginx.conf

[root@web ~]# /usr/local/nginx/sbin/nginx -s reload

2.完了之后在浏览器访问用ip和域名都会访问到

3.在主配置文件中衔接qd.conf的链接

[root@web ~]# vim /usr/local/nginx/conf/nginx.conf

在keepalive_timeout  65;之后添加

      include        ../conf.d/*.conf;

[root@web ~]# /usr/local/nginx/sbin/nginx -s reload

4.在浏览器访问ip地址就会访问到/qd目录中发布的内容，用域名会访问到http页面原有的内容。

三．上线一个静态的前端系统

生成一个，发布到nginx中

nodeis安装nmp添加vue模块，使用vue创建vue3项目，构建静态资源，将静态资源添加到nginx项目

1.在安装之前检查有没有安装epel

[root@web ~]# yum list installed |grep epel

[root@web ~]# yum list |grep nodejs

2.安装

[root@web ~]# yum -y install nodejs

[root@web ~]# node -v //查看版本

v16.20.2

3.安装npm nodejs的包管理器，npm用于管理nodejs开发的软件

[root@web ~]# yum -y install npm

[root@web ~]# npm -v

8.19.4

4.默认的npm的下载文件的链接在国家域外，下载很慢，所以使用淘宝镜像

[root@web ~]# npm config set registry https://registry.npmmirror.com

5.安装vue

[root@web ~]# npm install @vue/cli

[root@web ~]# /root/node_modules/.bin/vue -V

@vue/cli 5.0.8

6.创建vue项目

[root@web ~]# /root/node_modules/.bin/vue create eleme_web

[root@web eleme_web]# npm run serve

7.浏览器访问：

8.配置samba

（1）安装samba

[root@web eleme_web]# yum -y install samba

（2）编辑配置文件

[root@web eleme_web]# vim /etc/samba//smb.conf   //在最后添加

[eleme_web]

        comment=

        path=/root/eleme_web

        guest ok=no

        writable=yes

（3）创建用户和密码

[root@web eleme_web]# useradd vueediter

[root@web eleme_web]# smbpasswd -a vueediter

（4）为该用户在文件夹中添加读写权限

[root@web eleme_web]# setfacl -m u:vueediter:rwx /root/eleme_web/

启动服务

[root@web eleme_web]# systemctl start nmb

[root@web eleme_web]# systemctl start smb

9.做一个静态资源

[root@web eleme_web]# mkdir public/img

[root@web eleme_web]# mkdir public/video

[root@web eleme_web]# mkdir public/music

克隆一台机器

10.部署nfs机器

[root@elemastatic ~]# yum -y install rpcbind.x86_64

[root@elemastatic ~]# yum -y install nfs-utils.x86_64

（1）配制配置文件

[root@elemastatic ~]# vim /etc/exports

/static/img/    *(rw,sync)

[root@elemastatic ~]# mkdir -p /static/img/

（2）启动服务

[root@elemastatic ~]# systemctl start rpcbind.service

[root@elemastatic ~]# systemctl start nfs

11.回到另外一台机器（客户端）安装nfs

[root@web eleme_web]# yum -y install nfs-utils

12.挂载

[root@web eleme_web]# mount -t nfs 192.168.2.40:/static/img public/img/

13.上传图片到elemastatic主机上查看

[root@elemastatic ~]# ls /static/img

0.jpg

[root@web eleme_web]# ls public/img/

0.jpg

[root@web eleme_web]# cd src

[root@web eleme_web]# cd src/views/

[root@ web eleme_webviews]# ls

 AboutView.vue  HomeView.vue

14.修改vue页面

[root@eleme_web views]# vim HomeView.vue

<img alt="Vue logo" src="img/0.jpg">