Docker发布VUE vhr微人事前端（Nginx 403 forbidden）

本文链接：https://blog.youkuaiyun.com/qq_30940855/article/details/131436394

本文代码来源于（感谢作者）

GitHub - lenve/vhr: 微人事是一个前后端分离的人力资源管理系统，项目采用SpringBoot+Vue开发。

发布过程参考博主

【Docker】使用docker容器发布vue项目_docker 发布vue_TOP灬小朋友的博客-优快云博客

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项目