nginx部署前端项目自动化脚本

文章目录

配置入口服务器nginx的conf.d
使用docker创建一个nginx
配置自动化脚本

前言
将项目通过nginx 部署到新的服务器通过nginx反向代理出去

配置入口服务器nginx的conf.d

在这里插入图片描述
一般在这个文件夹下
找不到使用 find / -name nginx 2>/dev/null 找到nginx 的位置如果有些没有权限则将原因输出到空设备上

upstream diagnosis-dev {server 你的地址;
}
server {listen 80;server_name 你的域名;location ~ (service-worker.js|\.(html|htm)|^((?!\.).)*)$ {expires 0;proxy_pass   http://app-dev;}location / {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_buffering off;proxy_pass   http://app-dev;}
}

使用docker创建一个nginx

1.在你想要放项目的目录下创建几个文件夹
/work/nginx/conf.d 用于存放配置文件
/work/nginx/html 用于存放网页文件
/work/nginx/logs 用于存放日志
/work/nginx/cert 用于存放 HTTPS 证书
2.在nginx目录下直接 vim 一个nginx.conf文件
作用防止安装nginx报错

user  nginx;
worker_processes  1;events {worker_connections  1024;
}error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;http {include       /etc/nginx/mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';
#    access_log  /var/log/nginx/access.log  main;gzip on;gzip_min_length 1k;     # 设置允许压缩的页面最小字节数gzip_buffers 4 16k;     # 用来存储 gzip 的压缩结果gzip_http_version 1.1;  # 识别 HTTP 协议版本gzip_comp_level 2;      # 设置 gzip 的压缩比 1-9。1 压缩比最小但最快，而 9 相反gzip_types text/plain application/x-javascript text/css application/xml application/javascript; # 指定压缩类型gzip_proxied any;       # 无论后端服务器的 headers 头返回什么信息，都无条件启用压缩include /etc/nginx/conf.d/*.conf; ## 加载该目录下的其它 Nginx 配置文件
}

3. 执行如下命令，使用 Docker 启动 Nginx 容器

docker run -d \
--name nginx --restart always \
-p 80:80 -p 443:443 \
-e "TZ=Asia/Shanghai" \
-v /work/nginx/nginx.conf:/etc/nginx/nginx.conf \
-v /work/nginx/conf.d:/etc/nginx/conf.d \
-v /work/nginx/logs:/var/log/nginx \
-v /work/nginx/cert:/etc/nginx/cert \
-v /work/nginx/html:/usr/share/nginx/html \
nginx:alpine

如果你放的位置不是/work 换为你自己的目录即可

4.在 /work/nginx/conf.d 目录下，创建 ruoyi-vue.conf，内容如下：

server {listen       80;server_name  139.9.196.247; ## 重要！！！修改成你的外网 IP/域名location / { ## 前端项目root   /usr/share/nginx/html/;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /admin-api/ { ## 后端项目 - 管理后台proxy_pass http://192.168.0.213:48080/admin-api/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IPproxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}location /app-api/ { ## 后端项目 - 用户 Appproxy_pass http://192.168.0.213:48080/app-api/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IPproxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}

实例

server{listen       80;#你的本机ip地址server_name  192.168.80.45; ## 重要！！！修改成你的外网 IP/域名location / { ## 前端项目# 你的前端打包项目所在文件root   /usr/share/nginx/html/dist;index  index.html;try_files $uri $uri/ /index.html;}location /admin-api/ { ## 后端项目 - 管理后台proxy_pass http://192.168.80.45:8080/admin-api/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IPproxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}location /app-api/ { ## 后端项目 - 用户 Appproxy_pass http://192.168.80.45:8080/app-api/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IPproxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}

5.配置成功

执行 docker exec nginx nginx -s reload

配置自动化脚本

同理在项目下也就是你的打包后dist 文件所在目录新建deploy目录下新建deploy.ps1文件
原理就是将你的前端项目放入到服务器上通过 docker共享文件将其自动放入docker中然后刷新nginx的配置即可

$script_dir = Split-Path -Parent $MyInvocation.MyCommand.Definition
$working_dir = $pwd
$deploy_dir = "/opt/diagnosis/web"function deployBackEnd {cd $script_dir\..npm run build:dev#你的入扣服务器地址的下载地址scp -r -P 13151 dist root@196.132.15.8:/var/www/html/download/ssh  root@196.132.15.8 -p13151 "sshpass -p '111000'  scp -r -v -o StrictHostKeyChecking=no /var/www/html/download/dist dell@186.18.80.47:/opt/diagnosis-web/nginx/html"ssh  root@196.132.15.8 -p13151 "sshpass -p 111000 ssh -o StrictHostKeyChecking=no dell@186.18.80.47 'docker exec nginx nginx -s reload'"ssh  root@196.132.15.8 -p13151 "rm -rf /var/www/html/download/dist"
}
deployBackEnd