本文代码来源于（感谢作者）
GitHub - lenve/vhr: 微人事是一个前后端分离的人力资源管理系统，项目采用SpringBoot+Vue开发。
发布过程参考博主
【Docker】使用docker容器发布vue项目_docker 发布vue_TOP灬小朋友的博客-CSDN博客
1.创建DockerFile文件
# 设置基础nginx从这里开始
FROM nginx
# 设置姓名.邮箱地址
LABEL maintainer="lzp.872729374@qq.com"
# 设置备注
LABEL description="nginx container based on nginx:1.18"
# 设置nginx 访问权限 避免发布后为空白页
RUN chmod -R 777 /var/log/nginx
RUN chmod 777 /usr/sbin/nginx
RUN chmod -R 777 /etc/nginx/
RUN chmod 777 /etc/nginx/conf.d
RUN chmod -R 777 /usr/share/nginx/html
# 将dist文件复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/dist
# 将nginx.conf 文件复制到 /etc/nginx/nginx.conf 这个目录下面
COPY nginx.conf /etc/nginx/conf.d/nginx.conf
# 设置nginx 访问权限
RUN chmod 777 /etc/nginx/conf.d/nginx.conf
RUN chmod -R 777 /usr/share/nginx/html/dist
# 暴露端口配置
EXPOSE 8090
2.创建一个nginx配置文件 nginx.conf
server {
# 监听的端口号
listen 8090;
server_name localhost;
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
# root地址来源于dockerfile中 copy dist
location / {
root /usr/share/nginx/html/dist;
index index.html;
}
# nginx转发
#location /prod-api/ {
# # 后台接口地址
# proxy_pass http://192.168.175.133:8000/;
#}
}
3.打包vue项目
npm run build
4.将几个文件放在一起传给服务器 我这里是ubantu
5.打包docker镜像并跑起来
docker build -t vrvue .
docker run --name vrvue -d -p 8090:8090 vrvue
如有问题可以查看镜像
docker exec -it vrvue bash
cat /etc/nginx/conf.d/nginx.conf
cd /usr/share/nginx/html/
最终效果
以下三个地址均可以访问
http://172.17.0.3:8090/#/
http://0.0.0.0:8090/#/
http://192.168.144.129:8090/#/
出现问题 Nginx 403 forbidden （预祝大家一次成功）
1.确定dist文件都到了指定位置，nginx.conf在指定位置显示
2.确保文件的权限可以 chmod -R 777 /data
3.DockerFile文件copy 地址与nginx.conf文件的地址一致
4.检查 DockerFile文件RUN chmod的对应地址下都有相应的文件
