2024年7月31日（基于域名和IP地址的虚拟机主机 上线静态商城）

1、将原有的nginx.conf文件备份

[root@static ~]# cp /usr/local/nginx/conf/nginx.conf /usr/local/nginx/conf/nginx.conf.bak

[root@static ~]# grep -Ev "#|^$" /usr/local/nginx/conf/nginx.conf > /usr/local/nginx/conf/nginx.conf

2、基于域名的虚拟主机

（1）修改配置文件

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

（2）创建新的目录

[root@static ~]# mkdir /aaa

（3）在/aaa目录下创建index.html文件

[root@static ~]# echo "hello,I am aaa" > /aaa/index.html
[root@static ~]# cat /aaa/index.html 
hello,I am aaa

3、将/aaa目录中的资源发布

（1）配置nginx.conf文件

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

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

（2）主机劫持IP

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

 [root@static ~]# curl www.aaa.com
I am static server

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

[root@static ~]# mkdir /usr/local/nginx/conf.d/
[root@static ~]# sed -n '34,40p' /usr/local/nginx/conf/nginx.conf > /usr/local/nginx/conf.d/aaa.conf
[root@static ~]# cat /usr/local/nginx/conf.d/aaa.conf 
    server{
        listen    80;
        server_name    www.aaa.com;
        location / {
            index    index.html;
        }
    }
[root@static ~]# sed -i '34,40d' /usr/local/nginx/conf/nginx.conf

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

[root@static ~]# /usr/local/nginx/sbin/nginx -s reload
[root@static ~]# vim /usr/local/nginx/conf/nginx.conf

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

5、使用IP地址访问不同的虚拟主机

（1）创建新的IP挂载这个网卡上

[root@static ~]# ifconfig ens33:1 192.168.8.200

（2）修改配置文件

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

[root@static ~]# vim /usr/local/nginx/conf.d/aaa.conf

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

 [root@static ~]# vim /usr/local/nginx/conf.d/aaa.conf

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

6、上线一个静态的前端系统

生成一个，发布到nginx中

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

（1）在安装nodejs之前检查是否安装epel

[root@static ~]# yum list installed | grep epel
[root@static ~]# yum -y install epel-release

（2）安装nodejs（是个运行环境）

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

[root@static ~]# node -v
v16.20.2

（3）安装npm（nodejs 的包管理器）

[root@static ~]# yum -y install npm
[root@static ~]# npm -v
8.19.4

（4）安装vue

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

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

[root@static ~]# find / -name "vue"
/root/node_modules/vue
/root/node_modules/.bin/vue

[root@static ~]# /root/node_modules/.bin/vue -V
@vue/cli 5.0.8

（4）创建vue项目

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

 

[root@static ~]# cd eleme_web/
[root@static eleme_web]# npm run serve

[root@static eleme_web]# nohup npm run serve&
[1] 3130

[root@static eleme_web]# npm run serve

http://192.168.8.159:8082/

7、配置samba

[root@static eleme_web]# yum -y install samba
samba文件位置

（1）编辑配置文件

[root@static eleme_web]# pwd
/root/eleme_web
[root@static eleme_web]# vim /etc/samba/smb.conf

（2）创建用户

[root@static eleme_web]# useradd vueediter
[root@static eleme_web]# smbpasswd -a vueediter
New SMB password:123
Retype new SMB password:123
Added user vueediter.

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

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

（4）启动服务

[root@static eleme_web]# systemctl start nmb
[root@static eleme_web]# systemctl start smb

 

[root@static eleme_web]# mkdir public/img
[root@static eleme_web]# mkdir public/video
[root@static eleme_web]# mkdir public/music
[root@static eleme_web]# tree public/
public/
├── favicon.ico
├── img
├── index.html
├── music
└── video

 9、部署nfs服务器

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

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

/static/img     *{rw,sync}
[root@elemestatic ~]# mkdir -p /static/img/

[root@elemestatic ~]# systemctl start rpcbind
[root@elemestatic ~]# systemctl start nfs

[root@static eleme_web]# yum -y install nfs-utils.x86_64

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

 ​
[root@tomcat src]# cd components/
[root@tomcat components]# ls
HelloWorld.vue

[root@tomcat components]# vim HelloWorld.vue
[root@tomcat src]# ls views/
[root@tomcat src]# vim views/HomeView.vue
[root@tomcat eleme_web]#nohup npm run serve&