如何本地运行部署在子路径的Docker镜像？React应用遇/favicon.ico报错

我已将React应用部署在子路径/dashboard，通过在package.json中配置"homepage":"/dashboard"实现，并创建了Docker镜像。本地运行该镜像时，出现http://localhost:3030/dashboard/favicon.ico错误，当前Docker容器运行在3030端口。尝试使用Nginx反向代理但未生效，相关配置如下：

Nginx配置文件（nginx.conf） #

server {
listen 80;
listen [::]:80;
server_name localhost;

location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
}
location /dashboard/ {
    proxy_pass http://127.0.0.1:3030/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root /usr/share/nginx/html;
}
}

Docker Compose文件 #

version: '3.6'

services:
   explorer:
     image: my-image
     ports:
       - 3030:80

    web:
     image: nginx
     ports:
       - 80:80
    volumes:
       - ../nginx.conf:/etc/nginx/conf.d/default.conf

错误截图 #

问题解决方案 #

核心问题分析

1. Docker网络访问错误：在Docker Compose环境中，Nginx容器内的127.0.0.1指向容器自身，而非宿主机器，因此无法访问到explorer服务。需改用Compose内部服务名explorer进行通信。
2. Compose文件格式错误：web服务的ports、volumes存在缩进不规范问题，会导致配置失效。
3. 路径代理逻辑不匹配：原Nginx配置的proxy_pass末尾加/会截断/dashboard前缀，与React应用的homepage配置冲突。

修正后的配置

调整后的Nginx配置

server {
listen 80;
listen [::]:80;
server_name localhost;

location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
}

# 代理dashboard路径到explorer服务
location /dashboard {
    proxy_pass http://explorer;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    # 处理React SPA路由，刷新页面时返回index.html
    proxy_connect_timeout 30s;
    proxy_send_timeout 30s;
    proxy_read_timeout 30s;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root /usr/share/nginx/html;
}
}

修正后的Docker Compose文件

version: '3.6'

services:
  explorer:
    image: my-image
    # 无需对外暴露端口，仅Nginx内部访问即可
    # ports:
    #   - 3030:80

  web:
    image: nginx
    ports:
      - 80:80
    volumes:
      - ../nginx.conf:/etc/nginx/conf.d/default.conf
    # 确保explorer服务先启动
    depends_on:
      - explorer

使用说明

• 访问路径改为http://localhost/dashboard，无需添加3030端口。
• 若React应用存在SPA路由，确保Nginx配置中已处理路径跳转（上述配置已包含基础处理逻辑）。

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