基于域名的虚拟主机、多虚拟主机的配置、基于ip的虚拟主机及上线静态的前端系统(商城系统)

Day 14

基于域名的虚拟主机

说明:

一个配置文件一般只有一个http模块;

一个http模块可以有多个server模块;

一个server模块就是一套web项目;

一个server模块中可以有多个location;

location就是项目中的url路由

# 修改配置文件,设置为默认的首页文件

root@static-server \~\]# vim /usr/local/nginx/conf/nginx.conf server { listen 80; server_name localhost; root html; location / { index index.html; } ****# 创建目录,用于部署在nginx中发布到网络**** \[root@static-server \~\]# mkdir /hua ****# 在/hua目录下创建一个index.html**** \[root@static-server \~\]# echo "hello, i am huajuan" \> /hua/index.html \[root@static-server \~\]# cat /hua/index.html hello, i am huajuan ****# 修改配置文件,增加一个server**** http{ keepalive_timeout 65; ****# 在此行下面添加**** server{ listen 80; server_name www.huajuan.com; root /hua; location / { index index.html; } } server{...} } ****# 重载nginx服务**** \[root@static-server \~\]# /usr/local/nginx/sbin/nginx -s reload ****# 设置hosts劫持**** \[root@static-server \~\]# vim /etc/hosts 192.168.2.22 [www.huajuan.com](http://www.huajuan.com "www.huajuan.com") \[root@static-server \~\]# curl www.huajuan.com hello, i am huajuan \[root@static-server \~\]# ls /etc/hosts /etc/hosts ****总结**** 1)使用ip访问,返回的是下面的/usr/local/nginx/html/index.html下的内容; \[root@static-server \~\]# cat /usr/local/nginx/html/index.html i am static-server 即以下server里的内容: server { listen 80; server_name localhost; root html; location / { index index.html; } } 2)使用域名,返回的是/hua/index.html的内容 \[root@static-server \~\]# cat /hua/index.html hello, i am huajuan 即以下server里的内容: server{ listen 80; server_name www.huajuan.com; root /hua; location / { index index.html; } } 3)windows下也有此文件(路径为:C:\\Windows\\System32\\drivers\\etc),但是要注意要设置读写权限,取消只读,设置权限,如果还不行,就直接创建新的host文件覆盖掉。并且此设置只能本机有效,若想要别人也能访问到,需配置DNS服务器。 步骤:在此目录下找到hosts文件,发现只读,编辑不了。将其复制一份到E盘进行编辑,编辑成功后,将其复制到C盘进行全覆盖即可;在host文件中新增一行, ****192.168.2.23**** ****www.huajuan.com****。 ****多虚拟主机的配置**** 背景:一个服务器上同时部署多个项目,为了方便维护,可以将server模块单独抽离出来创建conf文件,然后在主配置文件中使用include添加外部配置,这样让操作更加模块化。 ****#**** ****在nginx目录下创建新的目录conf.d**** \[root@static-server \~\]# mkdir /usr/local/nginx/conf.d \[root@static-server \~\]# touch /usr/local/nginx/conf.d/hua.conf \[root@static-server \~\]# sed -n '33,40p' /usr/local/nginx/conf/nginx.conf # 先进行搜索 server{ listen 80; server_name www.huajuan.com; root /hua; location / { index index.html; } } ****#**** ****将刚才配置的server模块保存到一个新的文件中**** \[root@static-server \~\]# sed -n '33,40****p****' /usr/local/nginx/conf/nginx.conf \> /usr/local/nginx/conf.d/hua.conf \[root@static-server \~\]# cat /usr/local/nginx/conf.d/hua.conf ****# 删除nginx.conf中原有的自定义server模块**** \[root@static-server \~\]# se -i '33,40****d****' /usr/local/nginx/conf/nginx.conf # -i选项:文件发生改变 \[root@static-server \~\]# cat /usr/local/nginx/conf/nginx.conf \[root@static-server \~\]# /usr/local/nginx/sbin/nginx -s reload ****#**** ****在主配置文件中添加和huanjuan.conf的**** ****链接**** \[root@static-server \~\]# vim /usr/local/nginx/conf/nginx.conf keepalive_timeout 65; # 此行下添加 include ../conf.d/\*.conf; 注意:..表示当前目录,即/usr/local/nginx,这里也可以写成相对路径 ****# 重载nginx配置文件,测试**** \[root@static-server \~\]#/usr/local/nginx/sbin/nginx -s reload ****基于ip的虚拟主机**** ****#创建新的ip挂在这个网卡上**** \[root@static-server \~\]# yum search ifconfig \[root@static-server \~\]# yum -y install net-tools.x86_64 \[root@static-server \~\]# ifconfig ens33:1 192.168.2.23 # 添加一块虚拟网卡 ****# 修该2个文件的server_name将域名修改为ip地址**** \[root@static-server \~\]# vim /usr/local/nginx/conf/nginx.conf server{ listen 80; server_name 192.168.2.23; root /hua; location / { index index.html; } } \[root@static-server \~\]# vim /usr/local/nginx/conf.d/hua.conf server{ listen 80; server_name 192.168.2.23; root /hua; location / { index index.html; } } ****# 重载nginx配置文件,测试**** \[root@static-server \~\]#/usr/local/nginx/sbin/nginx -s reload ****基于端口配置server**** 背景:80端口可以省略,一般来说基于端口的配置用于企业内部项目的测试 ****# 设置两个server都基于相同的ip**** \[root@static-server \~\]# vim /usr/local/nginx/conf/nginx.conf server_name 192.168.2.22; \[root@static-server \~\]# vim /usr/local/nginx/conf.d/hua.conf server_name 192.168.2.22; ****# 此时加载不了,此时修改自建的文件的端口号**** \[root@static-server \~\]# vim /usr/local/nginx/conf.d/hua.conf listen 8080; ****# 设置防火墙策略**** \[root@static-server \~\]# firewall-cmd --zone=public --add-ports=8080/tcp --permanent \[root@static-server \~\]# firewall-cmd --reload ****# 重载nginx配置文件,测试**** \[root@static-server \~\]# /usr/local/nginx/sbin/nginx -s reload ![](https://i-blog.csdnimg.cn/direct/52ec926349b944c2b79bcd7492fef403.png) ****上线静态的前端系统(商城系统)**** ****思路:先生成,再发布到nginx中**** ****nodejs安装步骤**** 1、先安装nodejs,在此之前先确保已经安装了eple \[root@dy001 \~\]# yum list installed\|grep epel epel-release.noarch 7-14 @epel nginx-filesystem.noarch 1:1.20.1-10.el7 @epel openssl11-libs.x86_64 1:1.1.1k-7.el7 @epel \[root@dy001 \~\]# yum -y install nodejs \[root@dy001 \~\]#node -v # 查看版本 v16.20.2 2、安装npm(nodejs的包管理器,npm和rpm是一样的),并确保去淘宝的镜像源而不去默认的国外链接去下载 \[root@dy001 \~\]#yum -y install npm \[root@dy001 \~\]# npm -v # 查看版本 8.19.4 \[root@dy001 \~\]#npm config set registry [https://registry.npmmirror.com](https://registry.npmmirror.com "https://registry.npmmirror.com") 3、添加vue模块 使用vue创建vue3项目,构建静态资源,将静态资源添加到nginx项目, \[root@dy001 \~\]# npm install @vue/cli \[root@dy001 \~\]# find / -name "vue" /root/node_modules/vue /root/node_modules/.bin/vue \[root@dy001 \~\]# ls -l /root/node_modules/.bin/vue lrwxrwxrwx. 1 root root 22 7月 31 14:42 ****/root/node_modules/.bin/vue**** ****-\> ../@vue/cli/bin/vue.js**** \[root@dy001 \~\]# /root/node_modules/.bin/vue -V @vue/cli 5.0.8 4、创建vue项目 \[root@dy001 \~\]# /root/node_modules/.bin/vue create eleme_web ![](https://i-blog.csdnimg.cn/direct/b64b9dc5a12c42b289cc67cbd6159141.png) 进入后选择Router和Vuex按空格后,按回车,最后一路向下按回车键 ![](https://i-blog.csdnimg.cn/direct/f5ab17b6f84a47eab69cc2e9ee187609.png) ![](https://i-blog.csdnimg.cn/direct/e56574de2a6b4e60a57575992334c495.png) Successfully created project eleme_web. \[root@dy001 \~\]# cd eleme_web \[root@dy001 eleme_web\]# npm run serve ![](https://i-blog.csdnimg.cn/direct/fb2fc0a3f5424426b3e8e2607ea41f03.png) 4、远程测试: ![](https://i-blog.csdnimg.cn/direct/17b680f576b5469cb32878d019f2589f.png) \[root@dy001 eleme_web\]# nohup npm run server\& \[2\] 3139 \[root@dy001 eleme_web\]# nohup: 忽略输入并把输出追加到"nohup.out" \[2\]- 退出 1 nohup npm run server \[root@dy001 eleme_web\]# tail -f nohup.out \[root@dy001 eleme_web\]# fg /root/node_modules/.bin/vue create eleme_web (wd: \~) \[root@dy001 eleme_web\]# fg -bash: fg: 当前: 无此任务 1. 配置samba 1)安装samba \[root@dy001 eleme_web\]# pwd /root/eleme_web \[root@dy001 eleme_web\]# yum -y install samba 2)编辑配置文件的位置 \[root@dy001 eleme_web\]# vim /etc/samba/smb.conf ****# 行尾添加:**** \[eleme_web

comment=huajuan

path=/root/eleme_web

guest ok=no

writable=yes

3)创建用户

root@dy001 eleme_web\]# useradd vueediter \[root@dy001 eleme_web\]# smbpasswd -a vueediter New SMB password:123 Retype new SMB password: Added user vueediter. 4)为该用户在文件夹中添加读写权限 \[root@dy001 eleme_web\]# setfacl -m u:vueediter:rwx /root/eleme_web/ nginx-1.26.1 package-lock.json ![](https://i-blog.csdnimg.cn/direct/bb6bf17d1e6a4a4fa97e41706656c7be.png) ![](https://i-blog.csdnimg.cn/direct/d35ccd7e291b47f4812b39a86fb226e1.png) \[root@dy001 \~\]# ls -ld /root/eleme_web/ 总用量 192628 -rw-------. 1 root root 1419 5月 25 23:22 anaconda-ks.cfg drwxrwxr-x+ 5 root root 213 7月 31 15:09 eleme_web 5)启动2个服务 \[root@dy001 eleme_web\]# systemctl start nmb.service \[root@dy001 eleme_web\]# systemctl start smb.service \[root@dy001 \~\]# cd eleme_web/ \[root@dy001 eleme_web\]# ls babel.config.js package-lock.json jsconfig.json public node_modules README.md nohup.out src package.json vue.config.js \[root@dy001 eleme_web\]# ls -l public/ 总用量 12 -rw-r--r--. 1 root root 4286 7月 31 15:04 favicon.ico -rw-r--r--. 1 root root 611 7月 31 15:04 index.html 在public/下创建目录 \[root@dy001 eleme_web\]# mkdir public/img \[root@dy001 eleme_web\]# mkdir public/video \[root@dy001 eleme_web\]# mkdir public/music \[root@dy001 eleme_web\]# tree public/ public/ ├── favicon.ico ├── img ├── index.html ├── music └── video 6)部署****nfs**** ****服务器**** # 准备另一台主机------elemestatic(192..168.2.34),用于保存静态的图片、视频等 \[root@elemestatic \~\]# yum -y install nfs-utils rpcbind \[root@elemestatic \~\]# mkdir -p /static/img/ \[root@elemestatic \~\]# vim /etc/exports /static/img/ \*(rw,sync) \[root@elemestatic \~\]# netstat -lntup\|grep rpc \[root@elemestatic \~\]# systemctl stop firewalld 7)客户端部署nfs \[root@dy001 eleme_web\]# yum -y install nfs-utils.x86_64 8)主机的挂载,挂载nfs-server端共享目录public/上,此目录专门用于访问图片、视频 \[root@dy001 eleme_web\]# mount -t nfs 192.168.2.34:/static/img public/img/ # 对方ip \[root@dy001 \~\]# systemctl start nmb.service \[root@dy001 \~\]# systemctl start smb.service 9)真机上传图片 \[root@elemestatic \~\]#cd /static/img/ \[root@elemestatic img\]# rz -E rz waiting to receive. \[root@elemestatic img\]# ls baidu.png 客户端验证 \[root@dy001 \~\]# cd eleme_web/ \[root@dy001 eleme_web\]# ls public/img baidu.png \[root@dy002 \~\]# cd eleme_web/ \[root@dy002 eleme_web\]# ls public/img baidu.png \[root@dy002 eleme_web\]# ls -l 总用量 768 -rw-r--r--. 1 root root 73 7月 31 21:22 babel.config.js -rw-r--r--. 1 root root 279 7月 31 21:22 jsconfig.json drwxr-xr-x. 527 root root 16384 7月 31 21:24 node_modules -rw-------. 1 root root 322 7月 31 21:26 nohup.out -rw-r--r--. 1 root root 461 7月 31 21:22 package.json -rw-r--r--. 1 root root 728647 7月 31 21:22 package-lock.json drwxr-xr-x. 5 root root 80 7月 31 21:29 public -rw-r--r--. 1 root root 273 7月 31 21:22 README.md drwxr-xr-x. 7 root root 108 7月 31 21:22****src**** -rw-r--r--. 1 root root 118 7月 31 21:22 vue.config.js \[root@dy002 eleme_web\]# cd src \[root@dy002 src\]# ls -l 总用量 8 -rw-r--r--. 1 root root 478 7月 31 21:22 App.vue drwxr-xr-x. 2 root root 22 7月 31 21:22 assets drwxr-xr-x. 2 root root 28 7月 31 21:22 components -rw-r--r--. 1 root root 171 7月 31 21:22 main.js drwxr-xr-x. 2 root root 22 7月 31 21:22 router drwxr-xr-x. 2 root root 22 7月 31 21:22 store drwxr-xr-x. 2 root root 47 7月 31 21:35****views**** \[root@dy002 src\]# cd views/ \[root@dy002 views\]# ls AboutView.vue HomeView.vue \[root@dy002 views\]# vim HomeView.vue \[root@dy002 views\]# nohup npm run server\& \[3\] 4290 \[root@dy002 views\]# nohup: 忽略输入并把输出追加到"nohup.out" \^C \[3\] 退出 1 nohup npm run server 浏览器测试,发现vue界面发生变化,变成百度logo

相关推荐
王达舒19944 小时前
HTTP vs HTTPS: 终极解析,保护你的数据究竟有多重要?
网络协议·http·https
朱皮皮呀4 小时前
HTTPS的工作过程
网络协议·http·https
Binary-Jeff4 小时前
一文读懂 HTTPS 协议及其工作流程
网络协议·web安全·http·https
崔庆才丨静觅6 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60616 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了7 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅7 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅7 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
七夜zippoe7 小时前
CANN Runtime任务描述序列化与持久化源码深度解码
大数据·运维·服务器·cann
崔庆才丨静觅7 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端