php小編百草將為大家介紹如何解決在Docker容器中提供靜態ReactJS檔案時出現的404頁面未找到的問題。在使用Docker部署應用程式時，有時會遇到這個問題，但不用擔心，我們可以透過一些簡單的步驟來解決。在本文中，我將分享如何正確配置Docker容器以提供靜態ReactJS文件，以及如何避免404頁面未找到的錯誤。讓我們一起來看看吧！
我正在嘗試容器化一個在連接埠 8000 上提供靜態檔案的 Go 應用程式。我查看了有關此主題的其他帖子，許多人似乎都說使用router.Run("0.0.0.0:8000") 或router .運行（“：8000”） 。我已經嘗試過兩者但仍然沒有成功。我的 main.go 看起來像這樣：
package main
// required packages
import (
"fmt"
"log"
"os"
"github.com/gin-gonic/gin"
"github.com/gin-contrib/cors
"net/http"
)
func main() {
// start the server
serveApplication()
}
func serveApplication() {
corsConfig := cors.Config {
AllowOrigins: []string{"*"},
AllowMethods: []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
AllowHeaders: []string{"Origin", "Content-Type", "Authorization"},
AllowCredentials: true,
}
router := gin.Default()
router.Use(cors.New(corsConfig))
router.StaticFS("/static", http.Dir("./frontend/build/static"))
router.StaticFile("/", "./frontend/build/index.html")
router.Run(":8000")
fmt.Println("Server running on port 8000")
}以及以下 Dockerfile：
FROM node:16-alpine3.11 as build-node WORKDIR /workdir COPY frontend/ . RUN yarn install RUN yarn build COPY .env /workdir/ FROM golang:1.21-rc-alpine3.18 as build-go #FROM golang:1.17rc2-alpine3.14 as build-go ENV GOPATH "" RUN go env -w GOPROXY=direct RUN apk add git ADD go.mod go.sum ./ RUN go mod download ADD . . COPY --from=build-node /workdir/build ./frontend/build RUN go build -o /main FROM alpine:3.13 COPY --from=build-go /main /main COPY --from=build-node /workdir/.env .env EXPOSE 8000 ENTRYPOINT [ "/main" ]
我的資料夾結構如下所示；
portal - frontend (here the react app is stored) - backend (all my backend logic) - Dockerfile - main.go - go.mod
當我使用 go run main.go 在本地運行它時，前端在連接埠 8000 上正確運行，並且載入 http://localhost:8000 工作正常。當我使用docker build -t Portal . 建立docker 映像，然後使用docker run -p 8000:8000 --name Portal Portal 運行它時，我可以在終端機中看到伺服器啟動並表示它正在連接埠8000 上運行，但我總是收到404 頁面未找到錯誤。
我嘗試使用router.Run("0.0.0.0:8000")、router.run("localhost:8000") 或docker run --network host --name Portal Portal。
我有什麼遺漏的嗎？我是否將前端建置複製到錯誤的位置？
最終圖片中唯一的內容是您在最後FROM 行之後COPY 的內容；即main 二進位檔案和.env 檔案。您正在嘗試從 ./frontend/... 提供文件，但這不在最終圖像中。只要將相關的 COPY 行移到最後階段就可以了。
FROM alpine:3.13 COPY --from=build-go /main /main COPY --from=build-node /workdir/.env .env COPY --from=build-node /workdir/build ./frontend/build # <-- move from above ...
相反，由於您沒有使用 embed 套件來直接將建置的前端程式碼嵌入到二進位檔案中，因此在（Go）建置階段不需要它。
使用 embed 也可能有效，而不需要重新排列 Dockerfile。這看起來大致類似於
//go:embed frontend/build/*
var content embed.FS
router.StaticFS("/static", http.FS(fs.Sub(content, "frontend/build/static"))
router.StaticFileFS("/", "frontend/build/index.html", http.FS(content))
透過此設置，前端確實需要成為 Go 建置步驟的一部分，但現在它完全包含在二進位檔案中，不需要單獨複製到最終映像中。
以上是Docker容器中的伺服器（提供靜態reactjs檔案）404頁面找不到的詳細內容。更多資訊請關注PHP中文網其他相關文章！
