1.安装docker
https://blog.csdn.net/apgk1/article/details/144354588
2. 安装nginx
3. 复制 nginx-test 实例的一些文件到宿主机中，目前已 **/home/jznh/**路径演示
3.1 在/home/jznh/ 创建 conf html logs 三个文件夹，如下图
3.2把 nginx-test 运行的实例中一些文件复制到已创建的目录中，如下图
3.3 目前 nginx-test 实例使命已完成，可以考虑删除
//逐条执行
docker stop nginx-test
docker rm nginx-test
3.4 对于已创建的文件夹文件进行权限修改，偷懒直接 全开放 chmod 777 文件夹名称
3.5 把vue已打包好的项目文件 通过ftp直接上传/home/jznh/html 文件夹中
4.修改 /home/jznh/conf/nginx.conf
#注释其中 在下方的这句中头部加入 #注释掉
include /etc/nginx/conf.d/*.conf;
#如下：
#include /etc/nginx/conf.d/*.conf;
#加入以下内容
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;#注意该地址是容器内的，千万别改成宿主机的，会导致访问不到
index index.html;
#vue刷新404 问题
try_files $uri $uri/ /index.html;
}
}
6.创建并且运行当前docker 实例
docker run \
-p 8083:80 \
--name jznh \
-v /home/jznh/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/jznh/conf/conf.d:/etc/nginx/conf.d \
-v /home/jznh/html:/usr/share/nginx/html \
-v /home/jznh/logs:/var/log/nginx/ \
--restart=always \
-d nginx
-p 8081:80 宿主机的8081 端口映射到容器中的80端口
--name 容器的名称
-v 那些都是路径映射 前面宿主机路径:容器中路径
--restart=always docker容器重启自动启动当前容器
-d nginx docker镜像
6.访问该宿主机的ip:8083是否正常访问
参考链接
docker安装nginx，docker部署vue前端，以及docker部署java的jar部署_docker 安装 nginx 部署vue-CSDN博客