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 需要设置为后端项目所在服务器的 IP
        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;
    }

    location /app-api/ { ## 后端项目 - 用户 App
        proxy_pass http://192.168.0.213:48080/app-api/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IP
        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;
    }

}

实例

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 需要设置为后端项目所在服务器的 IP
        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;
    }

    location /app-api/ { ## 后端项目 - 用户 App
        proxy_pass http://192.168.80.45:8080/app-api/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IP
        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;
    }

}

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