Server in Docker container (serving static reactjs files) 404 page not found

php editor Baicao will introduce how to solve the 404 page not found problem when providing static ReactJS files in Docker containers. While deploying applications using Docker, you sometimes face this problem, but don’t worry, we can solve it with some simple steps. In this article, I will share how to properly configure a Docker container to serve static ReactJS files and how to avoid 404 page not found errors. Let’s take a look!

Question content

I'm trying to containerize a Go application that serves static files on port 8000. I've looked at other posts on this topic and many seem to say to use router.Run("0.0.0.0:8000") or router.Run(":8000") . I've tried both but still no success. My main.go looks like this:

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

and the following 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" ]

My folder structure is as follows;

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

When I run it locally using go run main.go the frontend runs correctly on port 8000 and loading http://localhost:8000 works fine. When I build the docker image using docker build -t Portal . and then run it using docker run -p 8000:8000 --name Portal Portal I can see in the terminal The server starts and says it is running on port 8000, but I keep getting a 404 Page Not Found error.

I tried using router.Run("0.0.0.0:8000"), router.run("localhost:8000") or docker run --network host --name Portal Portal.

Did I miss anything? Did I copy the frontend build to the wrong location?

Workaround

The only content in the final image is what you COPY after the last FROM line; i.e. main Binaries and .env files. You are trying to serve the file from ./frontend/... but this is not in the final image. Just move the relevant COPY lines to the final stage.

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

Instead, since you are not using the embed package to embed the built frontend code directly into the binary, it is not needed during the (Go) build phase.

It may also work to use embed without rearranging the Dockerfile. This will look roughly like

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

With this setup, the frontend does need to be part of the Go build step, but now it is fully included in the binary and does not need to be copied separately into the final image.

The above is the detailed content of Server in Docker container (serving static reactjs files) 404 page not found. For more information, please follow other related articles on the PHP Chinese website!