Docker容器中的伺服器（提供靜態reactjs檔案）404頁面找不到

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中文網其他相關文章！