十八次（虚拟主机与vue项目、samba磁盘映射、nfs共享）

1、虚拟主机搭建环境准备

将原有的nginx.conf文件备份

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

原则上一个配置文件拥有一个http区块，并且只有一个

一个http可以有多个server区块

一个server区块成为一个虚拟主机

一个虚拟主机对应一个项目 一个server区块可以有多个location区块

每个location就是一个url链接的匹配规则

2、基于域名的虚拟主机

 [root@server ~]# vim /usr/local/nginx/conf/nginx.confserver {listen       80;server_name  localhost;root html;              //目录定位location / {index index.html;}[root@server ~]# mkdir /baibai     //创建一个页面根目录
[root@server ~]# echo "hello,i am baibai" > /baibai/index.html     //创建一个
首页
[root@server ~]# cat /baibai/index.html 
hello,i am baibai
在主配置文件中新创建一个七层模块server[root@server ~]# vim /usr/local/nginx/conf/nginx.confhttp {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen  80;server_name   www.baibai.com;root    /baibai;        //目录定位location  /  {   index   index.html;}}
主机解释ip（本机自行进行域名解析）
[root@server ~]# vim /etc/hosts    //windows路径：
c:/windown/system32/drivers/etc/host/......10.0.0.10 www.baibai.com[root@server ~]# curl www.baibai.comhello,i am baibai

一个服务器上同时部署多个项目,为了方便维护，可以将server模块单独抽离出来创建conf文件，然 后在主配置文件中使用include添加外部配置，这样让操作更加模块化。 将两个server分开到两个配置文件中

[root@server ~]# mkdir /usr/local/nginx/conf.d/    //创建新的配置文件目录
[root@server ~]# sed -n '11,18p' /usr/local/nginx/conf/nginx.confserver {listen  80;server_name   www.baibai.com;root    /baibai;location  /  {index   index.html;}}[root@server ~]# sed -n '11,18p' /usr/local/nginx/conf/nginx.conf > 
/usr/local/nginx/conf.d/baibai.conf     //创建新的配置文件
[root@server ~]# cat /usr/local/nginx/conf.d/baibai.conf server {listen  80;server_name   www.baibai.com;root    /baibai;location  /  {index   index.html;}}[root@server ~]# sed -i '11,18d' /usr/local/nginx/conf/nginx.conf    //原配置
文件中删除该server[root@server ~]# vim /usr/local/nginx/conf/nginx.confhttp {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;include   ../conf.d/*.conf;      //包含（引入）位于上级目录中的conf.d文件夹下的
所有以.conf 为扩展名的配置文件
[root@server ~]# /usr/local/nginx/sbin/nginx -s reload

3、于不同ip地址的虚拟主机

[root@server ~]# ifconfig ens33:1 10.0.0.11   //加一张网卡
[root@server ~]# ifconfigens33: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500inet 10.0.0.10  netmask 255.255.255.0  broadcast 10.0.0.255ens33:1: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500inet 10.0.0.11  netmask 255.0.0.0  broadcast 10.255.255.255ether 00:0c:29:b1:2d:68  txqueuelen 1000  (Ethernet)[root@server ~]# vim /usr/local/nginx/conf/nginx.confserver {listen       80;server_name  10.0.0.10;     //修改为10.0.0.10root html;         //目录定位location / {index index.html;}[root@server ~]# vim /usr/local/nginx/conf.d/baibai.conf server {listen  80;server_name   10.0.0.11;    //修改为10.0.0.11root    /baibai;    //目录定位location  /  {index   index.html;}}[root@server ~]# /usr/local/nginx/sbin/nginx -s reload

4、基于不同端口的虚拟主机

设置两个server都基于相同的ip地址

[root@server ~]# vim /usr/local/nginx/conf.d/baibai.conf 
server {listen  80;server_name   10.0.0.10;root    /baibai;location  /  {index   index.html;}}[root@server ~]# /usr/local/nginx/sbin/nginx -s reloadnginx: [warn] conflicting server name "10.0.0.10" on 0.0.0.0:80, ignored     
//报错，产生冲突
[root@server ~]# vim /usr/local/nginx/conf.d/baibai.conf server {listen  8080;        //修改端口server_name   10.0.0.10;root    /baibai;location  /  {index   index.html;}}[root@server ~]# /usr/local/nginx/sbin/nginx -s reload

5、上线商城系统

上线一个静态的前端系统 安装npm 添加vue模块 使用vue创建vue3项目，构建静态资源 将静态资源添加到nginx项目 在安装nodejs之前，需要检查是否安装了epel

（1）项目创建的环境准备

[root@server ~]# yum list install | grep epel    //检查epel环境
[root@server ~]# yum list | grep nodejs   //查询nodejs软件包
[root@server ~]# yum -y install nodejs    //安装nodejs
[root@server ~]# node -v    //查看nodejs版本
v16.20.2
[root@server ~]# yum -y install npm    //安装npm（nodejs的包管理器，rpm是红帽的包
管理器）
[root@server ~]# npm -v   //查看npm版本
8.19.4
默认npm下载文件的链接在国家域外，下载很慢，所以使用淘宝的镜像
[root@server ~]# npm config set registry https://registry.npmmirror.com     
//下载国内的包（而不是下载国外的包）
[root@server ~]# npm install @vue/cli    //使用nmp安装vue
[root@server ~]# find / -name "vue"   //查找vue文件
/root/node_modules/vue/root/node_modules/.bin/vue
[root@server ~]# ls -l /root/node_modules/.bin/vue   //可执行文件
lrwxrwxrwx. 1 root root 22 7月  31 14:40 /root/node_modules/.bin/vue -> 
../@vue/cli/bin/vue.js
[root@server ~]# /root/node_modules/.bin/vue -V   //查看vue版本
@vue/cli 5.0.8
[root@server ~]# ln -s /root/node_modules/.bin/vue  /usr/bin/   //创建软链接
[root@server ~]# vue -V@vue/cli 5.0.8

（2）创建vue项目

 [root@server ~]# vue create eleme_web  （空格选择，回车下一步）   //创建名为
eleme_web的项目

选择Manually select features 按回车

选择Router和Vuex按空格后 按回车

一直回车到下图所示

项目创建完成，按照提示信息进行下一步操作

[root@server ~]# cd eleme_web/
[root@server eleme_web]# npm run serve   //运行服务

浏览器访问：10.0.0.10:8080

[root@server eleme_web]# nohup npm run serve&    //将服务放到后台执行
[1] 3024
[root@server eleme_web]# nohup: 忽略输入并把输出追加到"nohup.out"
[root@server eleme_web]# fg    //将进程杀死
nohup npm run serve^C
[root@server eleme_web]# fg-bash: fg: 当前: 无此任务

（3）配置samba

linux系统与windows系统磁盘映射实现文件共享

安装samba

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

编辑配置文件

[root@static eleme_web]# vim /etc/samba/smb.conf
​
[eleme_web]
​comment=yjj
​path=/root/eleme_web
​guest ok=no
​writable=yes
[root@static eleme_web]# useradd vueediter
[root@static eleme_web]# smbpasswd -a vueediter
New SMB password:1
Retype new SMB password:1
Added user vueediter.
​

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

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

启动服务

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

windows测试：点击此电脑-----计算机-------映射网络驱动器

创建nfs环境

[root@server eleme_web]# mkdir public/img
[root@server eleme_web]# mkdir public/video
[root@server eleme_web]# mkdir public/music

部署nfs服务器

[root@eleme ~]# yum -y install rpcbind
[root@eleme ~]# yum -y install nfs-utils
[root@eleme ~]# vim /etc/exports
/static/img/ *{rw,sync}   #共享/static/img/目录   所有人可以访问   拥有读写权限和同步功能
[root@eleme ~]# mkdir -p /static/img/
[root@elemestatic ~]# systemctl start nfs    //启动nfs服务
[root@elemestatic ~]# systemctl start rpcbind   //启动rpcbind服
[root@server eleme_web]# mount -t nfs 10.0.0.50:/static/img/  ./public/img/   //将nfs服务器共享的目录挂载到/root/eleme_web/public/img/下
将图片拖拽到nfs服务器主机的共享目录中
[root@elemestatic img]# ls
1.jpg
[root@server img]# ls    //nfs客户端中可以查看图片
1.jpg

修改vue页面

[root@server eleme_web]# cd src/views/
[root@server views]# lsAboutView.vue  HomeView.vue
[root@server views]# vim HomeView.vue <img alt="Vue logo" src="img/1.jpg">