本文主要讲述了宝塔+docker部署nginx出现403 Forbidden的原因，以及成功部署前端的方法步骤。

1、问题描述

最近使用宝塔Linux+docker部署了一个前端项目，但部署成功后发现打不开页面，显示403 Forbidden

2、问题检测

2.1 检测监听端口是否异常

我这里设置的监听端口是80，检查宝塔Linux的防火墙，防火墙显示端口正常

2.2 检测Docker容器是否异常

2.2.1 打开宝塔Linux的软件商店，找到Docker管理器，查看前端容器是否正常打开

这里显示容器的端口号和状态都是正常的

2.2.2 没有安装Docker管理器，可以在应用商店直接搜索安装

2.3 检查nginx.conf配置

这里是我的nginx.conf配置，经过问同学以及在网上找资料，得出结论nginx配置是没问题的

server {
    listen 80;

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;
    include /etc/nginx/mime.types;

    location / {
        try_files $uri /index.html;
    }
}

2.4 检查Dockerfile配置

经过最终检查，问题如下图所示。我设置的工作目录和copy的dist目录路径不一致。
工作目录我写的是user，而在copy的目录里我写的usr

3、解决方案

修改dockerfile文件，换成如下代码

FROM nginx

# 解决容器时期与真实时间相差 8 小时的问题
RUN ln -snf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo Asia/Shanghai > /etc/timezone

# 复制代码到容器内
WORKDIR /usr/share/nginx/html/
USER root

COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf


COPY ./dist /usr/share/nginx/html/

EXPOSE 80

# 容器启动时运行 jar 包
CMD ["nginx", "-g", "daemon off;"]

4、测试修改是否成功

4.1 将修改后的dockerfile文件替换掉宝塔中的dockerfile

打开宝塔dockerfile所在目录，拖动修改过的本地dockerfile上传

4.2 再次创建前端Docker容器

由于我是使用的腾讯云的轻量应用服务器创建的宝塔Linux，因此这里直接在腾讯云里登录打开宝塔终端

输入 sudo -s进入root模式，防止待会出现权限问题

sudo -s

cd进入含有Dockerfile文件的目录下，输入以下代码构建新的容器

docker build -t xxxxx:0.0.1 .

将上述代码中的xxxxx替换成你的容器名，！！！注意：代码最后面有一个“ . ”，千万不能漏了。


容器构建完毕，输入docker run -p 80:80 -d xxxxxx运行刚才创建好的容器。命令中的-d作用是在后台运行该容器，删去-d则会在前台直接打开容器，这里推荐加上-d。

docker run -p 80:80 -d xxxxxx

注意使用时将上述代码中的xxxxx替换成你的容器名。

4.3 小报错

4.3.1 出现报错，说80端口已经被占用。

打开软件商店的Docker管理器，发现原来是上一个错误配置的容器还未停止。如图点击，直接停止该容器。


再次执行docker run -p 80:80 -d xxxxxx，启动容器。
输入 netstat -ntlp查看当前所有监听端口，输入docker ps查看当前目录启动的容器

netstat -ntlp

docker ps

发现运行还是失败了。仍然是403 Forbidden。
打开宝塔Docker管理器，打开刚才运行的容器日志

4.3.2 发现问题是没有权限。

打开终端输入docker exec -i -t d0048aa75626 /bin/bash进入容器，在输入chmod -R 777 /usr/share/nginx/html赋予对应文件夹root权限。

docker exec -i -t d0048aa75626 /bin/bash

chmod -R 777 /usr/share/nginx/html

注意docker exec -i -t d0048aa75626 /bin/bash中的d0048aa75626 是容器id，这个可以通过在容器外输入命令docker ps查看，/usr/share/nginx/html这个是没有权限打开的文件的文件夹。如果已经在容器中，可以输入exit退出容器。

赋予权限完毕，再次打开公网地址，成功运行。