使用Nginx+Traefik子路径部署React时遇Unexpected Token Error

你的核心问题是Traefik转发的请求带着/trade-journal前缀，但Nginx无法正确映射到实际的静态文件路径，导致静态资源加载失败，返回空白的index.html。以下是具体解决步骤：

原因分析 #

当你访问http://domain/trade-journal/static/js/main.js时，Traefik会把完整的请求路径/trade-journal/static/js/main.js转发给Nginx容器。而Nginx当前的配置是针对根路径/的，它会去/usr/share/nginx/html/trade-journal/static/js/main.js找文件——但你build出来的React静态文件实际存放在/usr/share/nginx/html/static/下，自然找不到，最终触发try_files返回index.html，导致浏览器无法加载JS/CSS，页面空白。

解决方案（二选一即可） #

方案1：修改Nginx配置，适配子路径请求 #

直接修改nginx.conf，添加针对/trade-journal的location规则，去掉请求路径中的前缀：

server {
    listen 80;
    
    # 处理/trade-journal子路径的请求
    location /trade-journal {
        root /usr/share/nginx/html;
        include /etc/nginx/mime.types;
        # 移除请求路径中的/trade-journal前缀，指向实际静态文件目录
        rewrite ^/trade-journal(.*)$ $1 break;
        try_files $uri $uri/ /index.html;
    }

    # 保留根路径配置，兼容其他请求
    location / {
        root /usr/share/nginx/html;
        include /etc/nginx/mime.types;
        try_files $uri $uri/ /index.html;
    }
}

方案2：用Traefik的StripPrefix中间件去掉前缀 #

不需要修改Nginx，直接在Traefik配置中添加中间件，转发请求时自动移除/trade-journal前缀：
修改docker-compose.yml中frontend的labels：

frontend:
    build:
      context: ./trade-journal/client
      dockerfile: ./Dockerfile
    image: "trade-journal-client"
    labels:
      - traefik.http.routers.frontend.rule=Host(`[MY-PUBLIC-IP-HERE]`) && PathPrefix(`/trade-journal`)
      # 配置StripPrefix中间件，移除/trade-journal前缀
      - traefik.http.routers.frontend.middlewares=frontend-stripprefix
      - traefik.http.middlewares.frontend-stripprefix.stripprefix.prefixes=/trade-journal
      - traefik.http.services.frontend.loadbalancer.server.port=80
    links:
      - "backend:be"

配套React配置确认 #

确保React应用本身的子路径配置正确：

1. 在package.json中添加：

   "homepage": "/trade-journal"
   

   这会让React在build时自动给所有静态资源路径加上/trade-journal前缀，比如生成的index.html中JS路径会变成/trade-journal/static/js/main.xxx.js，和访问路径匹配。
2. 确保BrowserRouter的basename设置正确：

   <BrowserRouter basename="/trade-journal">
     {/* 你的路由组件 */}
   </BrowserRouter>
   

验证步骤 #

1. 重新build镜像并启动容器：

   docker-compose up --build frontend
   

2. 访问http://[MY-PUBLIC-IP-HERE]/trade-journal，打开浏览器开发者工具的Network标签，确认JS/CSS文件的返回状态是200，而非返回index.html。

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