Docker部署Nginx流程及无法正常访问前端后端的解决方法

背景

在学习微服务的过程中面临诸多中间件，每次在终端中开启和关闭它们非常麻烦，遂想利用docker来统一管理它们。

笔者在docker部署nginx中遇到了一些问题，花了一段时间查阅资料排错，终于解决了，于是整理这篇文章总结遇到的问题及解决方法。

本机配置

MacBook，Apple Silicon，如果读者是Linux应该可以直接参考，Windows还没有实验。

docker安装和启动Nginx

拉取镜像

docker pull nginx

启动nginx，注意配置自己项目里nginx需要监听的所有前端端口。

server {
        listen       8080;
}

具体例如上图所示，nginx配置文件里找到项目需要监听的所有前端端口，加入到启动命令端口映射里：

docker run --name nginx -p 8081:8081 -p 8082:8082 -d nginx

创建了名为nginx的容器，需要映射的前端端口用多个-p来指定。

需要追加端口怎么办

利用docker commit命令，将目前的nginx容器保存为镜像，再重新添加端口映射启动。

docker commit 容器名 新镜像名

之后还是利用docker run重新创建容器，此时命令记得带上之前的端口映射和新加入的端口映射。

将前端资源拷贝到容器中

利用docker cp命令拷贝，不建议拷贝到容器的/root文件夹下，可以在根目录下创建一个新的目录，比如/work，并将前端资源拷贝到此处。

docker cp 宿主机前端资源路径 容器id:/work/

可根据自己的爱好修改，这里假设拷贝到/work目录下，不太理解请搜索docker cp命令学习一下。

配置

切忌直接把本机nginx的配置文件直接替换容器的，可能会导致nginx容器关闭后再也无法启动，因此在修改配置文件前，建议用docker commit 备份一下当前镜像。

默认如下：

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/ notice;
pid        /var/run/;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx//*.conf;
}

第1行nginx用户一定不要修改，笔者主要修改这个才导致无法启动容器的。如果要分配置文件的话自行修改30行include即可。

主要问题

访问前端页面显示403 forbidden

这里大概率是nginx读取前端资源权限不足，笔者使用的思路是递归修改前端资源目录下的全部文件权限。上文将前端资源拷贝到镜像中的**/work**目录下了，仍以这举例。

首先，进入容器终端，默认应该就在根目录下，可以ls查看work是否存在。如果存在，输入以下命令：

chmod -R 777 work

前端静态资源显示，但没有后端返回来的数据

F12进入开发者模式，刷新网页，发现对后端请求的接口url报502 Bad Gateway错误。

这是因为nginx反向代理的后端url配置不对，笔者这里是因为直接把宿主机部署的nginx配置里的后端url直接粘贴过去了，比如宿主机里代理的url是localhost:8882，在使用docker部署的容器内当然就不是localhost了，容器内的localhost是容器本身的地址，这里我们需要的是宿主机的地址。

代表的就是宿主机的ip地址，因此只需要用替代localhost即可，举例来说：localhost:8882 -> :8882。

具体请参考：/weixin_46302607/article/details/136265048

秒客网