Docker拉取nginx镜像，部署若依Vue前端
前言
本文主要用来描述，如何用nginx部署若依项目的前端。
一、Docker 拉取 Nginx镜像
命令：docker pull nginx
二、Vue项目打包
2.1 先配置线上后端路径
说明：由于我打包命令是 npm run build:stage ，所以项目生效的环境文件是.env.staging。
所以我需要在这个文件内修改后端路径，VUE_APP_BASE_API = 'urls'，urls是部署的后端域名。
解释说明，这个步骤是你通过域名可以访问后端服务时，这个链接地址配置在这里才有用。
2.2 将打包目录上传到服务器下
打包命令npm run build:stage ，会生成一个 Dist目录。将该目录下的所有目录复制到 服务器上面的文件夹即可。
我在实验中，是重新创建了目录 mydata/nginx/html，然后把Dist下的所有文件拷贝到mydata/nginx/html下。
2.3 新建 nginx.conf 配置文件
我新建的该文件是放在 mydata/nginx/下
内容如下所示：
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;charset utf-8;location / {root /home/ruoyi/projects/ruoyi-ui;try_files $uri $uri/ /index.html;index index.html index.htm;}location /prod-api/ {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_pass http://localhost:8080/;}error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}
}
把上面的 root /home/ruoyi/projects/ruoyi-ui;修改为 root /yourfilePath，你自己存放的打包好的路径即可。
我在实验中的目录是 root /mydata/nginx/html/
2.4 启动Docker的nginx容器
命令如下所示：
docker run -d --privileged=true --name nginx \-v /mydata/nginx/html:/usr/share/nginx/html \-v /mydata/nginx/nginx.conf:/etc/nginx/nginx.conf \-p 80:80 nginxdocker ps：查看容器是否启动成功。
服务器ip：浏览器直接访问ip，查看部署是否成功。