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 nginx

docker ps：查看容器是否启动成功。

服务器ip：浏览器直接访问ip，查看部署是否成功。