线上静态的前端、nginx环境基础、基于域名的虚拟主机、基于ip的访问、部署nfs

news2024/11/21 1:42:18

一、环境基础：

1.查看文件（不要注释及空行）

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

2.备份源文件：

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

3.重定向：

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

二、基于域名的虚拟主机

1.改文件配置，启服务

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

[root@17dns ~]# /usr/local/nginx/sbin/nginx

2.创建项目，用于部署在nginx中发布到网络

[root@17dns ~]# mkdir /mmm
[root@17dns ~]# echo "hello world" >/mmm/index.html
[root@17dns ~]# cat /mmm/index.html
hello world
[root@17dns ~]#

3.将/mmm目录中资源文件发布

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

4.主机劫持ip

[root@17dns ~]# vim /etc/hosts

5.测试：

[root@17dns ~]# curl www.yulan.com
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
html { color-scheme: light dark; }
body { width: 35em; margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif; }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>

三、基于ip 访问

1.将配置的server文件模块保存到新的文件

[root@17dns ~]# sed -n '12,19p' /usr/local/nginx/conf/nginx.conf
   server{
       listen   80;
       server_name   www.yulan.com;
       root   /mmm;
       location / {
           index       index.html;
       }
   }
[root@17dns ~]# mkdir /usr/local/nginx/conf.d
[root@17dns ~]# sed -n '12,19p' /usr/local/nginx/conf/nginx.conf > /usr/local/nginx/conf.d/mm.conf
[root@17dns ~]# cat /usr/local/nginx/conf.d/mm.conf
   server{
       listen   80;
       server_name   www.yulan.com;
       root   /mmm;
       location / {
           index       index.html;
       }
   }
[root@17dns ~]# sed -i '12,19d' /usr/local/nginx/conf/nginx.conf
[root@17dns ~]# cat /usr/local/nginx/conf/nginx.conf
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;

server {
listen 80;
server_name localhost;
   root   html;
location / {
root html;
index index.html index.htm;
}
location /status {
stub_status on;
access_log off;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
[root@17dns ~]#

2.重启，真机访问

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

http//www.yulan.com

3.修改配置文件：

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

重启： /usr/local/nginx/sbin/nginx -s reload

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

1.安装nodejs npm

[root@17dns ~]# yum -y install nodejs

[root@17dns ~]# node -v

[root@17dns ~]# yum -y install npm

[root@17dns ~]# npm -v
8.19.4

2.配置npm包管理器

npm config set registry https://registry.npmmirror.com

[root@17dns ~]# npm install @vue/cli

3.查看版本

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

4.创建vue项目

[root@17dns ~]# /root/node_modules/.bin/vue create elema_web

[root@17dns ~]# cd elema_web
[root@17dns elema_web]# npm run serve

真机访问：

5.安装samba：

[root@17dns elema_web]# yum -y install samba

6.配置文件

[root@17dns elema_web]# vim /etc/samba/smb.conf

7.创建用户

[root@17dns elema_web]# useradd vueediter
[root@17dns elema_web]# smbpasswd -a vueediter
New SMB password:
Retype new SMB password:
Added user vueediter.
[root@17dns elema_web]#

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

[root@17dns elema_web]# setfacl -m u:vueediter:rwx /root/elema_web/

9.启服务

[root@17dns elema_web]# systemctl start nmb.service
[root@17dns elema_web]# systemctl start smb.service

10.安装nfs

[root@17dns elema_web]# yum -y install nfs-utils.x86_64

五、部署nfs

1.安装

[root@13 ~]# yum -y install rpcbind

[root@13 ~]# yum -y install nfs-utils

2.更改配置文件

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

/static/img *(rw,sync)

[root@13 ~]# mkdir -p /static/img

3.启服务

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

4.回到主机17 挂载：

[root@17dns elema_web]# mount -t nfs 192.168.2.13:/static/img public/img/

5.真机上传资源到13主机/static/img目录下

6.在17主机查看：

[root@17dns elema_web]# ls public/img/

7.查找目录

[root@17dns elema_web]# cd /root
[root@17dns ~]# cd elema_web/
[root@17dns elema_web]# ls
babel.config.js node_modules package.json public src
jsconfig.json nohup.out package-lock.json README.md vue.config.js
[root@17dns elema_web]# cd src/
[root@17dns src]# cd views/
[root@17dns views]# ls
AboutView.vue HomeView.vue