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;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

把上面的 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

1
2
3
4
5

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

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