Serveur dans le conteneur Docker (servant des fichiers Reactjs statiques) Page 404 introuvable

L'éditeur php Baicao vous présentera comment résoudre le problème de la page 404 introuvable lors de la fourniture de fichiers ReactJS statiques dans des conteneurs Docker. Lors du déploiement d'applications à l'aide de Docker, vous êtes parfois confronté à ce problème, mais ne vous inquiétez pas, nous pouvons le résoudre en quelques étapes simples. Dans cet article, je vais expliquer comment configurer correctement un conteneur Docker pour servir des fichiers ReactJS statiques et comment éviter les erreurs 404 page non trouvée. Nous allons jeter un coup d'oeil!

Contenu de la question

J'essaie de conteneuriser une application Go qui sert des fichiers statiques sur le port 8000. J'ai regardé d'autres articles sur ce sujet et beaucoup semblent dire d'utiliser router.Run("0.0.0.0:8000") 或 router .运行（“：8000”）. J'ai essayé les deux mais toujours sans succès. Mon main.go ressemble à ceci :

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

Et le Dockerfile suivant :

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

La structure de mes dossiers ressemble à celle ci-dessous ;

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

Lorsque je l'exécute en utilisant go run main.go 在本地运行它时，前端在端口 8000 上正确运行，并且加载 http://localhost:8000 工作正常。当我使用 docker build -t Portal . 构建 docker 映像，然后使用 docker run -p 8000:8000 --name Portal Portal, je peux voir dans le terminal que le serveur démarre et dit qu'il fonctionne sur le port 8000, mais j'obtiens toujours une erreur 404 Page non trouvée.

J'ai essayé d'utiliser router.Run("0.0.0.0:8000")、router.run("localhost:8000") 或 docker run --network host --name Portal Portal.

Est-ce que j'ai raté quelque chose ? Ai-je copié la version frontend au mauvais endroit ?

Solution de contournement

La seule chose dans l'image finale est que vous passez à l'étape finale dans les dernières FROM 行之后 COPY 的内容；即 main 二进制文件和 .env 文件。您正在尝试从 ./frontend/... 提供文件，但这不在最终图像中。只需将相关的 COPY lignes et c'est tout.

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

En revanche, puisque vous n'utilisez pas le package embed pour intégrer le code frontal construit directement dans le binaire, vous n'en avez pas besoin pendant la phase de construction (Go).

L'utilisation de embed peut également fonctionner sans réorganiser le Dockerfile. Cela ressemble à peu près à

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

Avec cette configuration, le frontend devait faire partie de l'étape de construction Go, mais il est désormais entièrement inclus dans le binaire et n'a pas besoin d'être copié séparément dans l'image finale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!