Server im Docker-Container (der statische ReactJS-Dateien bereitstellt) 404-Seite nicht gefunden

php-Editor Baicao stellt Ihnen vor, wie Sie das Problem „404-Seite nicht gefunden“ bei der Bereitstellung statischer ReactJS-Dateien in Docker-Containern lösen können. Bei der Bereitstellung von Anwendungen mit Docker tritt dieses Problem manchmal auf, aber keine Sorge, wir können es mit ein paar einfachen Schritten lösen. In diesem Artikel werde ich erläutern, wie man einen Docker-Container richtig konfiguriert, um statische ReactJS-Dateien bereitzustellen, und wie man 404-Fehler „Seite nicht gefunden“ vermeidet. Lass uns einen Blick darauf werfen!

Frageninhalt

Ich versuche, eine Go-Anwendung zu containerisieren, die statische Dateien auf Port 8000 bereitstellt. Ich habe mir andere Beiträge zu diesem Thema angesehen und viele scheinen zu sagen, man solle router.Run("0.0.0.0:8000") 或 router .运行（“：8000”） verwenden. Ich habe beides ausprobiert, aber immer noch kein Erfolg. Mein main.go sieht so aus:

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")
}

Und die folgende Docker-Datei:

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" ]

Meine Ordnerstruktur sieht wie folgt aus;

portal
- frontend (here the react app is stored)
- backend (all my backend logic)
- Dockerfile
- main.go
- go.mod

Wenn ich es mit go run main.go 在本地运行它时，前端在端口 8000 上正确运行，并且加载 http://localhost:8000 工作正常。当我使用 docker build -t Portal . 构建 docker 映像，然后使用 docker run -p 8000:8000 --name Portal Portal ausführe, kann ich im Terminal sehen, dass der Server startet und sagt, dass er auf Port 8000 läuft, aber ich erhalte immer die Fehlermeldung 404 „Seite nicht gefunden“.

Ich habe es mit router.Run("0.0.0.0:8000")、router.run("localhost:8000") 或 docker run --network host --name Portal Portal versucht.

Habe ich etwas verpasst? Habe ich den Frontend-Build an den falschen Speicherort kopiert?

Workaround

Das einzige, was im endgültigen Bild zu sehen ist, ist, dass Sie in den letzten FROM 行之后 COPY 的内容；即 main 二进制文件和 .env 文件。您正在尝试从 ./frontend/... 提供文件，但这不在最终图像中。只需将相关的 COPY Zeilen zur letzten Stufe wechseln und das war's.

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
...

Da Sie dagegen das embed-Paket nicht verwenden, um den erstellten Frontend-Code direkt in die Binärdatei einzubetten, benötigen Sie es während der (Go-)Build-Phase nicht.

Die Verwendung von embed funktioniert möglicherweise auch, ohne die Docker-Datei neu anzuordnen. Das sieht ungefähr so ​​aus wie

//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))

Bei diesem Setup musste das Frontend Teil des Go-Build-Schritts sein, aber jetzt ist es vollständig in der Binärdatei enthalten und muss nicht separat in das endgültige Image kopiert werden.

Das obige ist der detaillierte Inhalt vonServer im Docker-Container (der statische ReactJS-Dateien bereitstellt) 404-Seite nicht gefunden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!