上节课我们在Docker中顺利的部署了Java项目，日志文件中并没有异常消息，说明项目运行一切正常。这节课我们把前端VUE项目打包，然后部署到Nginx里面。

一、修改前端代码

因为后端项目发布到云主机上面了，所以我们要把main.js文件中各种URL中的IP地址换成你自己云主机的IP。

有的同学会问，既然前端和后端项目都部署在云主机上面，前端发起Ajax请求用localhost有什么不行的？还真不行。我们用浏览器打开前端页面，倘若发出的Ajax请求写的是localhost，那么访问的不是云主机，而是我们本地电脑。我们本地电脑现在也没有运行后端项目，自然Ajax会报错。所以大家一定要写云主机的IP地址，切记！

二、打包VUE项目

因为在Nginx中，可以部署多个前端项目，所以我要给每个前端项目分配一个相对路径，这样可以避免访问冲突。打开前端项目的vite.config.js文件，在里面给项目分配URI相对地址。

在命令行界面，进入emos-vue目录，然后执行下面的命令打包前端项目。

npm run build

下面的截图，说明打包已经成功了。前端项目会多出来dist目录，你把这个目录打成ZIP压缩包，稍后我们要上传到云主机。

三、创建Nginx容器

首先下载安装Nginx镜像，这里我依然使用特定版本的镜像。

docker pull nginx:1.21.3

在root目录中，创建nginx文件夹。然后把课程git上面“其他”目录中的nginx.conf文件，上传到该目录。并且创建html文件夹，把index.html和50x.html文件上传到该目录。

执行下面的命令，创建Nginx容器，然后用浏览器访问云主机的80端口，可以看到Nginx的欢迎画面。

docker run -it -d --name nginx -m 200m --net=host \
-v /root/nginx/nginx.conf:/etc/nginx/nginx.conf:ro \
-v /root/nginx/html:/usr/share/nginx/html:ro \
-e TZ=Asia/Shanghai \
nginx:1.21.3

四、部署前端项目

把dist.zip文件上传到/root/nginx/html目录中，然后执行unzip命令解压缩。

#进入到html目录
cd /root/nginx/html

#解压缩文件夹
unzip dist.zip

#删除压缩文件
rm -rf dist.zip

#给文件夹改名
mv dist emos-vue

打开浏览器，访问http://云主机IP:80/emos-vue，如果能看到登陆页面，说明程序部署成功。