文章目录
引言
此篇文章书接上文：
(170条消息) idea集成Docker + Docker部署SpringBoot项目到云服务器 保姆级教程_dragon_sxl的博客-CSDN博客
这篇文章讲述：
如何在linux操作系统下使用Docker容器，再使用nginx这个代理服务器来运行我们的Vue项目，其中最重要的两个问题：
- 1、挂载容器中nginx的配置文件到主机
- 2、nginx反向代理的配置
这两个是本篇讲解最最最最重要的问题！！！！！！尤其第二个！！！！
整体思路梳理
要想我们的Vue项目跑起来，就需要用到nginx这个代理服务器(nginx的作用：负责运行我们的Vue项目)。
整体思路如下：
-
1、拉取nginx镜像。
-
2、打包Vue项目
-
3、使用Docker run一个nginx容器(将其目录资源挂载到主机！！)
-
3、使用打包好的Vue项目资源替换nginx资源
nginx的运行资源目录是有一定要求的，因此要想跑起来的是自己的Vue项目，就需要将nginx下的原始资源换成我们的Vue项目资源，再用docker里的容器将这个换好的nginx跑起来。 -
4、处理
跨域问题（nginx反向代理配置） -
5、重新载入nginx服务
大功告成！
具体步骤:
1、拉取nginx镜像
docker pull nginx // 拉取
docker images // 查看镜像
2、打包Vue项目
执行：
npm run build
就会生成一个dist文件夹，这就是我们打包好的Vue项目资源：
3、run一个nginx容器(挂载处理)
首先说明一下何为挂载：
-
就是将容器里的文件映射到主机，便于修改和查看。
因为容器里边的东西不好查看与更改，那么就将其挂载到我们能看得到、改得到的地方，并且修改主机的文件，就相当于修改容器内对应的文件。
因此容器里的文件资源和主机的挂载资源是一一映射的关系。
我们要运行Vue项目，如果不做挂载处理，若是项目稍有改动，就需要重新run一个新容器，很麻烦。而有了挂载，我们只需要将修改了的内容放到对应的资源目录下，再restart一下，就好啦！
具体步骤：
-
1、运行一个nginx镜像(工具镜像)
docker run -d --name nginx01 -p 80:80 nginx:latest -
2、主机任意位置创建一个空文件夹nginx
-
3、将nginx配置文件copy到主机：
docker cp nginx01:/etc/nginx/nginx.conf /home/nginx/ docker cp nginx01:/etc/nginx/conf.d /home/nginx/conf/ docker cp nginx01:/usr/share/nginx/html /home/nginx/html docker cp nginx01:/var/log/nginx/ /home/nginx/logs/ // 这里的nginx01是容器名称 // 第一个路径：容器内的路径 // 第二个路径：主机路径(对应第二步创建的nginx文件夹)并且确保执行后目录是以下结构(如果不是，手动改成这样）：
有时候会多一层文件夹，手动调整即可。
并且保证在conf文件夹下有一个default.conf文件：
-
4、删除工具容器
docker rm -f nginx01 -
5、重新run一个容器(并且映射对应的目录文件)
前四步操作都是为了这一步做准备！！
docker run -d --name nginx -p 80:80 -p 443:443 -v /home/nginx/nginx.conf:/etc/nginx/nginx.conf -v /home/nginx/logs:/var/log/nginx -v /home/nginx/html:/usr/share/nginx/html -v /home/nginx/conf:/etc/nginx/conf.d --privileged=true -e TZ=Asia/Shanghai nginx:latest注意这里对应的目录是与第三步的目录完全一致的，目录不同的改成你自己的即可。
4、将打包好的Vue资源部署到nginx目录
就是将dist文件夹中的内容全部Copy到第三步中挂载的html文件夹下，如：
5、跨域处理(反向代理)
这一步配置我建议大家去大致了解一下nginx和nginx的配置说明，并且着重理解一下反向代理：(170条消息) Nginx配置使用详解_nginx 配置详解_shstart7的博客-CSDN博客
配置参考：
-
项目说明：
在我的项目中为了处理跨域问题，前端所有向后端服务器的请求都加了api前缀，例如：
http://10.10.10.12:8899/api/login而向后端发送的真实请求为：
http://10.10.10.12:8899/login因此在nginx的default.conf中添加以下配置：
location /api{ proxy_pass http://10.10.10.12:8899/; } // 意思是： // 当遇到请求 http://10.10.10.12:8899/api/login // 就会将之转发到 http://10.10.10.12:8899/login从而和后端服务器正常交互。
6、重新载入nginx服务
进入nginx容器：
docker exec -it nginx bash
重启nginx服务：
nginx -s reload
大功告成！！！！