Docker前后端容器仅绑定挂载可通信问题排查与解决

问题描述 #

前端（Nginx）和后端（PHP-FPM）容器已处于同一Docker网络，但仅在使用绑定挂载卷连接时能正常通信；移除该卷后通信失败，返回502错误。

相关配置信息 #

Docker Compose配置 #

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
    depends_on:
      - api
    links:
      - api
    develop:
      watch:
        - path: .
          target: /var/www/html
          action: sync

  api:
    build:
      context: ./libs/php
      dockerfile: Dockerfile
    ports:
      - "9000:9000"

Dockerfile配置 #

Nginx容器Dockerfile

FROM nginxinc/nginx-unprivileged

WORKDIR /var/www/html

COPY --chown=nginx:nginx ./conf.d/ /etc/nginx/conf.d/

COPY --chown=nginx:nginx . /var/www/html

PHP-FPM容器Dockerfile

FROM php:8.2-fpm

WORKDIR /var/www/html   

ARG UID=101
ARG GID=101

# 更新用户组与前端Nginx用户一致
RUN groupadd -g "${GID}" php-fpm \
    && useradd --no-log-init -u "${UID}" -g "${GID}" php-fpm \
    && chown php-fpm:php-fpm -R /var/www/html

USER php-fpm

COPY --chown=php-fpm:php-fpm . .

jQuery请求代码（初始） #

$("#submit_1").on("click", () => {
  const inputVal = $("#input_1").val();

   $.ajax({
      url: "/api/",
      dataType: "json",
      data: {
        searchTerm: inputVal,
      },
      method: "POST",

      success: (results) => console.log(results),
      error: (obj, details) => console.log(obj, details),
    });
  }
});

初始Nginx默认配置 #

server {
    index index.php index.html;
    server_name api;
    error_log /var/log/nginx/error.log debug;
    
    root  /usr/share/nginx/html;
    index  index.html index.htm;
    
    location /api {
        proxy_pass http://api:9000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 启用CORS头
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "POST, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type";
    }


    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass api:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

项目目录结构 #

├── docker-compose.yaml
├── index.html 
└── libs/
    ├── php/
    │   ├── geocodeBackend.php   # PHP-FPM提供服务的PHP文件
    │   └── other_php_files.php
    ├── js/
    │   └── jquery.js            # Nginx提供服务的JS、CSS和HTML
    └── css/
        └── styles.css   

错误日志 #

web-1 | 2024/11/03 00:58:59 [error] 30#30: *5 recv() failed (104: Connection reset by peer) while reading response header from upstream, client: 172.18.0.1, server: api, request: "POST /api HTTP/1.1", upstream: "http://172.18.0.2:9000/", host: "localhost", referrer: "http://localhost/"

web-1 | 172.18.0.1 - - [03/Nov/2024:00:58:59 +0000] "POST /api HTTP/1.1" 502 157 "http://localhost/" "Mozilla/5.0 (X11; Linux x86_64; rv:132.0) Gecko/20100101 Firefox/132.0" "-"

容器内文件情况 #

PHP-FPM容器文件 #

root@124743cd5330:/var/www/html# ls
Dockerfile  geocodeBackend.php

Nginx容器文件 #

root@b4eba721669f:/usr/share/nginx/html# ls
50x.html      compose.dev.yaml  favicon.ico  libs
README.Docker.md  conf.d        index.html   root

解决方法 #

通过修改Nginx的default.conf配置，并确保JS脚本中的请求URL末尾添加斜杠（/api/），问题得以解决。

修改后的Nginx配置 #

server {
    listen 8080;
    index index.php index.html;
    server_name api;
    root  /var/www/html/;

    location /api/ {
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME geocodeBackend.php;
        fastcgi_pass api:9000;
    }
}

修改后的jQuery请求代码 #

$.ajax({
  url: "/api/",
  dataType: "json",
  data: {
    searchTerm: inputVal,
  },
  method: "POST",
  // 其余success/error逻辑保持不变
});

内容的提问来源于stack exchange，提问作者userWantsToCode