目录

打包前的准备

打包

nginx容器挂载前的准备

容器创建和目录挂载

nginx配置修改

重启nginx容器

注意

---

打包前的准备

在打包前端之前，需要将 Axios 基地址配置为代理的 URL，用于nginx进行代理转发（后面会讲到）。

打包

在前端项目终端中，输入npm run build，进行打包。

nginx容器挂载前的准备

创建一个nginx容器，命名为nginx，注意：下面的这行代码，第一个nignx是容器名称，第二个nginx是镜像名称。如果没有拉取nginx镜像，需要先去拉取nginx的镜像。

docker run -d --name nginx -p 80:80  nginx

在虚拟机的root文件夹下，创建nginx文件夹

在root下运行下面的指令

docker cp nginx:/etc/nginx/nginx.conf /root/nginx/
docker cp nginx:/etc/nginx/conf.d /root/nginx/conf/
docker cp nginx:/usr/share/nginx/html /root/nginx/html
docker cp nginx:/var/log/nginx/ /root/nginx/logs/

运行这些指令的目的是将nginx容器中的文件复制到虚拟机本机上，这样之后创建nginx容器并挂载时，就有挂载的模板，这样能顺利挂载。因为如果不这样做，直接挂载的话，会提示没有对应目录，而且如果是自己依葫芦画瓢去创建对应目录，但目录里面的一些文件，如：nginx.conf的内容是空的，那这样挂载的就是空的，而不是容器中真正要挂载的内容。

所以，第一次创建nginx容器的目的，只是复制容器的目录及内容到本地虚拟机中，便于之后容器的挂载。

删掉刚刚创建的nginx容器

docker rm -f nginx

容器创建和目录挂载

重新创建nginx容器，并完成对应目录的挂载

docker run -d \
  --name nginx \
  -p 80:80 \
  -v /root/nginx/nginx.conf:/etc/nginx/nginx.conf \
  -v /root/nginx/conf:/etc/nginx/conf.d \
  -v /root/nginx/html:/usr/share/nginx/html \
  -v /root/nginx/logs:/var/log/nginx \
  --network 网络名 \
  nginx

这里的网络名指的是前端和后端部署的网络，它们应该在同一网络中，这样才能互连。将打包好的前端dist下的内容全部上传到虚拟机nginx的html目录里

nginx配置修改

修改一下nginx配置文件

将server_name改成自己虚拟机的ip地址，并添加代理转发API请求（这里就说明了打包前将axios的基地址设置为'/api'的原因）。

• rewrite ^/api/(.*) /$1 break;：将请求路径中的 /api/ 前缀去掉，只保留其余部分，然后继续执行代理转发。（这个根据具体项目情况，我的项目的后端数据访问路径中没有/api/,所以这里去掉了）
• proxy_pass http://ys:8081;：将修改后的请求路径转发到后端服务。ys是我docker部署的后端服务的容器名（这里就说明了为什么要与后端容器在同一网络下，只有这样，nginx才能直接通过容器名访问到后端服务的容器）。

重启nginx容器

docker restart nginx

注意

如果重启nginx后，浏览器无法访问到页面，可能是虚拟机的防火墙未关闭，记得关闭防火墙。