云计算实训18——基于域名配置虚拟主机、基于ip配置虚拟主机、基于端口配置
一、配置文件的结构1.首先查看配置文件
# vim /usr/local/nginx/conf/nginx.conf
利用grep指令查看配置文件，同时不看空行不看注释
# grep -Ev "#|^$" /usr/local/nginx/conf/nginx.conf
https://i-blog.csdnimg.cn/direct/9ea5383ccebd49c18dfb5cfb6bda1d33.png
2.备份文件
将原有nginx.conf文件备份
# cp /usr/local/nginx/conf/nginx.conf /usr/local/nginx/conf/nginx.conf.bak
将grep指令查看到的内容重定向到nginx.conf文件中
# grep -Ev "#|^$" /usr/local/nginx/conf/nginx.conf.bak > /usr/local/nginx/conf/nginx.conf
3.修改配置文件
# vim /usr/local/nginx/conf/nginx.conf
https://i-blog.csdnimg.cn/direct/35b17a583ab84db8bc3e350f00818ed6.png
4.启动nginx服务
# /usr/local/nginx/sbin/nginx
5.查看防火墙状态
# systemctl status firewalld
二、基于域名配置虚拟主机
创建项目，部署nginx中发布到网络
第一步：新建目次
# mkdir /dongdong
第二步：写入页面内容
# echo "hello, I am dongdong" > /dongdong/index.html
第三步：新增server模块
# vim /usr/local/nginx/conf/nginx.conf
https://i-blog.csdnimg.cn/direct/72d854f963bc4f2e8d73d488ec8f6e8c.png
重新加载服务
# /usr/local/nginx/sbin/nginx -s reload
第四步：修改hosts文件
# vim /etc/hostshttps://i-blog.csdnimg.cn/direct/eac4899d57b241799d409d0f9978c96e.png
第五步：访问测试
利用浏览器访问
# curl www.dongdong.com
hello, I am dongdong
利用域名访问
在本地磁盘C中搜索
C:\Windows\System32\drivers\etc
https://i-blog.csdnimg.cn/direct/40ec29f5a9a844b9aa16271924202fab.png
找到hosts文件，发现只读，编辑不了
https://i-blog.csdnimg.cn/direct/2623d146ff5a4087aca47e74a00a769d.png
将其复制一份到D盘举行编辑，编辑成功后，将其复制到C盘举行全覆盖就ok了
在hosts文件中新增一行
https://i-blog.csdnimg.cn/direct/8b83898c4f5d41b6818454c7ed3160e1.png
然后在浏览器访问：
https://i-blog.csdnimg.cn/direct/fd7a406d0ef64211a950c70a0e8479bf.png
第六步：每一个server单独创建一个文件保存，主配置文件中利用include的具体操纵
1.在配置文件中找到server模块
# sed -n '16,24p' /usr/local/nginx/conf/nginx.conf
server{
listen 80;
server_name www.dongdong.com;
root /dongdong;
location / {
index index.html;
}
}
2.新建目次和文件
新建目次
# mkdir /usr/local/nginx/conf.d/
新建文件
#touch /usr/local/nginx/conf.d/dongdong.conf
3.将刚配置的server模块保存到新的目次中
# sed -n '16,24p' /usr/local/nginx/conf/nginx.conf > /usr/local/nginx/conf.d/dongdong.conf
查看
# cat /usr/local/nginx/conf.d/dongdong.conf
server{
listen 80;
server_name www.dongdong.com;
root /dongdong;
location / {
index index.html;
}
}
4.修改配置文件
删除server模块，新增一行内容
# vim /usr/local/nginx/conf/nginx.conf
https://i-blog.csdnimg.cn/direct/a3ded23b6bd146a68916ad7347855d43.png
5.重新加载服务
# /usr/local/nginx/sbin/nginx -s reload
6.访问测试
输入IP地点访问：192.168.1.40
https://i-blog.csdnimg.cn/direct/28d8fe7515b64b9ba4942b6453af072c.png
输入域名访问：www.dongdong.com
https://i-blog.csdnimg.cn/direct/520d0599328044999ae6c92382eb7d62.png
综上，实现了IP地点跟域名的分离
三、基于ip配置虚拟主机
第一步：首先新添加一张网卡
https://i-blog.csdnimg.cn/direct/5204bcabbbd54aed8ab528953adbd562.png
然后对新增的网卡2设置新的IP地点
https://i-blog.csdnimg.cn/direct/4806522d9de1411db6ed0989da9a1fe6.png
第二步：修改配置文件
# vim /usr/local/nginx/conf/nginx.conf
https://i-blog.csdnimg.cn/direct/b71bf7abab56445eb3e088b69531b859.png
# vim /usr/local/nginx/conf.d/dongdong.conf
https://i-blog.csdnimg.cn/direct/f5c980c2540c4ae784af8fead1c082b0.png
第三步：重新加载服务
# /usr/local/nginx/sbin/nginx -s reload
第四步：浏览器访问
利用网卡1的IP地点访问：192.168.1.40
：https://i-blog.csdnimg.cn/direct/1c8ff277a9734cdb9aca126cccc1ef98.png
利用网卡2的IP地点访问:192.168.1.41
https://i-blog.csdnimg.cn/direct/cd6bb18a7d8443569c6e969bd3f48f87.png
不难发现我们利用，同一台主机不同的IP地点就能够访问到不同的页面
综上，实现了基于IP地点配置虚拟主机
四、基于端口的虚拟主机
1.设置两个server都具有雷同的ip
这里将它们的IP地点都设为192.168.1.40
# vim /usr/local/nginx/conf/nginx.conf
# vim /usr/local/nginx/conf.d/dongdong.conf
此时，重新加载时报错
https://i-blog.csdnimg.cn/direct/8b4b91eb0e26450988e6fbfacc811210.png
2.修改配置文件
# vim /usr/local/nginx/conf.d/dongdong.conf
https://i-blog.csdnimg.cn/direct/c0483f6891ef41009b3914cdc788c881.png
3.重新加载服务
# /usr/local/nginx/sbin/nginx -s reload
4.浏览器访问测试
在浏览器输入： 192.168.1.40:8080
https://i-blog.csdnimg.cn/direct/9139ef7d1ab4409c927a8af82a041f29.png
在浏览器输入ip地点：192.168.1.40
https://i-blog.csdnimg.cn/direct/294c7f329e76429baef51865407f11f0.png
这里不难发现--不同端口访问到的页面不同
综上，实现了基于端口的虚拟主机的配置
五、上线一个静态的前端体系
1.检查是否安装epel
# yum list installed | grep epel
安装epel
# yum -y install epel-release.noarch
安装nidejs
# yum -y install nodejs
检查是否安装nodejs
# node -v
v16.20.2
2.安装npm
---nodejs的管理器
# yum -y install npm
检查是否安装npm
# npm -v
8.19.4
3.版本优化
使得npm的下载文件的连接是国内的
# npm config set registry https://registry.nmpmirror.com
4.安装vue
# npm insatll @vue/cli
查看名字中包含vue的文件
# find / -name "vue"
/root/node_modules/vue
/root/node_modules/.bin/vue
查看文件
# ls -l /root/node_modules/.bin/vue
lrwxrwxrwx. 1 root root 22 7月 31 14:43 /root/node_modules/.bin/vue -> ../@vue/cli/bin/vue.js
查看版本号
# /root/node_modules/.bin/vue -V
@vue/cli 5.0.8
5.创建vue项目
# /root/node_modules/.bin/vue create eleme_web
https://i-blog.csdnimg.cn/direct/8edd9dea8e5b418b9b64a02cf53e578c.png
https://i-blog.csdnimg.cn/direct/0d2b11d7fe9e4f6b81d50badf9503462.png
随后一起回车
https://i-blog.csdnimg.cn/direct/e0f48b47ab20449bb1ef3cc51a3c94d1.png
出现successfully证明vue项目创建成功
https://i-blog.csdnimg.cn/direct/0ed37f363eb44bdeb20913c5301e9bf6.png
6.运行npm
切入eleme_web目次
# cd eleme_web/
运行
# npm run serve
https://i-blog.csdnimg.cn/direct/9bcecff1dfd34690b9256f7b8ca75bc6.png得到下图所示页面
https://i-blog.csdnimg.cn/direct/d50e5cc3eca14b29a373ad856f3a4ae4.png
7.背景运行
# nohup npm run serve&
3735
# nohup: 忽略输入并把输出追加到"nohup.out"
（1）配置samba
1.安装samba
# yum -y install samba
2.编辑配置文件
# vim /etc/samba/smb.conf
https://i-blog.csdnimg.cn/direct/e1be81daf1c748d98d3d9e4c53296046.png
3.创建用户
# useradd vueediter
4.设置密码
# smbpasswd -a vueediter
New SMB password:
Retype new SMB password:
Added user vueediter.
5.添加权限
为该用户在文件夹中添加读、写权限
# setfacl -m u:vueediter:rwx /root/eleme_web/
6.启动服务
启动nmb服务
# systemctl start nmb.service
启动smb服务
# systemctl start smb.service
7.创建驱动器
回到真机找到映射网络驱动器，添加如下内容：
https://i-blog.csdnimg.cn/direct/4391b1fda7c34c36802a50df74aafc18.png
输入用户名、密码
https://i-blog.csdnimg.cn/direct/f3b958f0912f4581809780af350355d4.png
下图所示，就是我们所创建的驱动器
https://i-blog.csdnimg.cn/direct/1d66fc33531c4eaea5b6427d87a76d5b.png
8.创建目次
# mkdir public/img
# mkdir public/video
# mkdir public/music
9.查看创建的目次
利用tree命令查看
https://i-blog.csdnimg.cn/direct/153e02015e38460db54f84fd5d53d86d.png
（2）部署nfs服务器
新建一台主机部署nfs
1.安装软件包
安装rpcbind
# yum -y install rpcbind.x86_64
安装ntf-utils
# yum -y install nfs-utils.x86_64
2.创建目次
# mkdir -p /static/img/
3.修改配置文件
# vim /etc/exports
https://i-blog.csdnimg.cn/direct/0a372d35dc0d4957975f2bdf1b89582f.png
4.启动服务
# systemctl start rpcbind.service
# systemctl start nfs
5.在原主机上也部署nfs-utils
# yum -y install nfs-utils.x86_64
6.挂载
# mount -t nfs 192.168.1.80:/static/img public/img/
7.测试
在另一台主机上上传一张图片，在原主机（客户端）也能够看到
上传图片
https://i-blog.csdnimg.cn/direct/79051381e82a4945a1f2347b95c6f239.png
原主机（客户端）验证
https://i-blog.csdnimg.cn/direct/9d04b7f37b5d43ca84cebf8050e51ae6.png
8.上传图片
切入到src目次，找到views目次
https://i-blog.csdnimg.cn/direct/04fce29ab3f14039a4d539d680722aac.png
进入views目次，找到要编辑的配置文件
https://i-blog.csdnimg.cn/direct/b0c0d9fbafa7433099e5e2e0f8b09f82.png
编辑配置文件
# vim HomeView.vue
https://i-blog.csdnimg.cn/direct/2d02781fc0504190a78cec70aadcaa95.png
9.背景运行
# nohup npm run serve&
https://i-blog.csdnimg.cn/direct/250da17434044273bcf95f1769fc571b.png
10.浏览器验证
可以看到我们原本的vue界面发生了变革，变成我们所设置的图片的界面咯
https://i-blog.csdnimg.cn/direct/654705179c5142b5ae8d03a1e82614c8.png
至此，本日的使命竣事咯！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]