Go+React应用容器化后运行Docker容器React UI无法显示如何排查

返回404说明你的Go服务已经正常启动，端口映射也生效，问题出在静态资源路径匹配、React产物复制或服务配置上，按以下步骤排查即可：

• 首先确认Go服务的静态文件服务配置
  你的Dockerfile中将React打包产物放到了容器工作目录的./web路径下，需要确保Go代码中配置了静态资源服务指向该路径：
  标准库示例：

  package main
  
  import (
    "log"
    "net/http"
    "os"
  )
  
  func main() {
    port := os.Getenv("PORT")
    // 配置静态文件服务指向./web目录
    fs := http.FileServer(http.Dir("./web"))
    http.Handle("/", fs)
    // 注意监听地址必须是0.0.0.0，不能是127.0.0.1，否则容器外无法访问
    log.Fatal(http.ListenAndServe("0.0.0.0:"+port, nil))
  }
  

  Gin框架示例：

  package main
  
  import (
    "os"
    "github.com/gin-gonic/gin"
  )
  
  func main() {
    r := gin.Default()
    port := os.Getenv("PORT")
    // 配置静态资源路径
    r.Static("/", "./web")
    // 如果React使用BrowserRouter，需要加回退路由，避免刷新子页面404
    r.NoRoute(func(c *gin.Context) {
      c.File("./web/index.html")
    })
    r.Run("0.0.0.0:" + port)
  }
  

• 确认React打包产物路径匹配
  你当前Dockerfile中复制React产物的指令是COPY --from=node_builder /build ./web，仅适用于create-react-app创建的项目（默认打包输出目录为build）：
  • 如果你用Vite创建React项目，默认打包输出目录为dist，需要将该指令修改为COPY --from=node_builder /dist ./web
  • 你可以执行docker run -it --entrypoint sh test1进入容器内部，执行ls ./web检查是否存在index.html、static等前端打包产物，不存在就说明复制路径错误
• 确认监听地址配置
  检查Go代码中监听地址是否为0.0.0.0，如果写死为127.0.0.1，容器外部无法访问到服务，也会出现访问失败问题。

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