docker+nginx+vue方式部署前后端分离项目

后端: SpringBoot 172.20.10.88:9090
部署过程：略

前端：vue
docker端口：9876
映射宿主机端口：8081
宿主机IP： 172.20.10.100
部署方式：使用带nginx服务的docker发布

1、准备镜像，并先启动一个镜像实例

# docker pull nginx
# docker run -d --name nginx -p 8081:9876 nginx

2、下载相关配置文件，准备修改

# mkdir /home/nginx && chmod 666  /home/nginx  && cd /home/nginx 
# docker cp nginx:/etc/nginx/nginx.conf .
# docker cp nginx:/etc/nginx/conf.d .
# docker cp nginx:/usr/share/nginx/html .
# docker stop nginx && docker rm nginx

3、修改相关配置文件

# cd /home/nginx/conf.d
# vi default.conf
#  注意下面几项，参照修改
server {
listen       9876;
listen  [::]:9876;
......
location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html; #如果vue-router使用的是history模式
}

location /api {
     rewrite ^/api/(.*)$ /$1 break;  # /api/ 替换为/,因为后台接口无/api
     proxy_pass http://172.20.10.88:9090;  #后台接口地址
}
......

4 、上传网站文件

在vue项目下运行rpm run build命令，即生成dist目录，将此目录下所有文件及文件夹上传至/home/html目录下

5、运行项目

# docker run -itd --privileged=true --name nginx -v /home/nginx/conf.d:/etc/nginx/conf.d -v /home/nginx/html:/usr/share/nginx/html -v /home/nginx/log:/usr/log/nginx -p 8081:9876 nginx 

6、访问网站

访问：http://172.20.10.100:8081/login
登录后进入人员列表界面，此时即与后台发生数据交换

image.png