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.conf server { 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.conf http { 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.com hello,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.conf server { 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.conf http { 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 ~]# ifconfig ens33: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500 inet 10.0.0.10 netmask 255.255.255.0 broadcast 10.0.0.255 ens33:1: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500 inet 10.0.0.11 netmask 255.0.0.0 broadcast 10.255.255.255 ether 00:0c:29:b1:2d:68 txqueuelen 1000 (Ethernet) [root@server ~]# vim /usr/local/nginx/conf/nginx.conf server { listen 80; server_name 10.0.0.10; //修改为10.0.0.10 root 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.11 root /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 reload nginx: [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]# ls AboutView.vue HomeView.vue [root@server views]# vim HomeView.vue <img alt="Vue logo" src="img/1.jpg">