React client and Golang server in same Dockerfile

Question

I've build a React client application supported with a API written in Golang. I would like to use Docker to run these both apps using docker run.

I have the following project structure:

zid
    |
    |-web/ (my react folder)
    main.go
    Dockerfile
    |

My goal is to run the main.go file in the zid folder and start the webapplication in the zid/web folder. The main.go file starts a API using Gin Gonic that will listen and serve on port 10000.

So I've tried the following:

# Build the Go API
FROM golang:latest as go_builder
RUN mkdir /zid
WORKDIR /zid
COPY . /zid
RUN GOOS=linux GOARCH=amd64 go build -a -ldflags "-linkmode external -extldflags '-static' -s -w" -o /go/bin/zid

# Build the React application
FROM node:alpine as node_builder
COPY --from=go_builder /zid/web ./
RUN npm install
RUN npm run build

# Final stage build, this will be the container with Go and React
FROM alpine:latest
RUN apk --no-cache add ca-certificates
COPY --from=go_builder /go/bin/zid /go/zid
COPY --from=go_builder /zid/ca /go/ca
COPY --from=node_builder /build ./web
EXPOSE 3000
WORKDIR /go
CMD ./zid

Next I did the following:

Build it with docker build -t zid . (no errors)
Run it with docker run -p 3000:3000 --rm zid

When I run this, it will startup the API, but when I go to http://localhost:3000/ then I get a Page does not work ERR: ERR_EMPTY_RESPONSE.

So the API starts up, but the npm build doens't. I am not sure what I am doing wrong, because the Docker container both contains the correct folders (go and web).

As you can see in the image it's all there I believe. What am I missing?

EDIT:

I am using the (*gin.Engine).Run() function to set the listen and serve on port 10000. In my local build my React application is sending request to localhost:10000. I always simply used npm start on the side of my React app (localhost:3000). My goal is to do the same but then all in one Dockerfile.

I am still a little unsure if I should EXPOSE ports 10000 & 3000 in my Dockerfile.

My HandleRequest function:

//Start the router and listen/serve.
func HandleRequests() {
    router := SetupRouter()
    router.Run(":10000")
}

My SetupRouter function:

//Setup the gin router
func SetupRouter() *gin.Engine {
    router := gin.Default()
    router.Use(CORSMiddleware())

    router.POST("/auth/login", login)
    router.POST("/component/deploy", deployComponent)
    router.POST("/project/create", createProject)
    router.POST("/diagram/create", createDiagram)
    router.PATCH("/diagram/update", updateDiagram)
    router.DELETE("/diagram/delete/:id", deleteDiagram)
    router.GET("/diagram/:id", getDiagram)
    router.GET("/project/list", getProjectsByUsername)
    router.GET("/project/:id", getProject)
    router.GET("/project/diagrams/:id", getDiagramsOfProject)
    router.DELETE("/project/delete/:id", deleteProject)
    router.GET("/application/list", applicationList)
    router.GET("/instance/status/:id", getInstanceStatus)
    router.GET("/user", getUser)

    return router
}

Btw I just want to use the Docker container for Development and learning purpose only.

Tobias S · Accepted Answer

I've found a solution! I've created a script on basis of multi-service container and then a run this script in my Dockerfile.

my script (start.sh):

#!/bin/sh

# Start the first process
./zid &
ZID_PID=$!

# Start the second process
cd /web 
npm start &
WEB_PID=$!

# Naive check runs checks once a minute to see if either of the processes exited.
# This illustrates part of the heavy lifting you need to do if you want to run
# more than one service in a container. The container exits with an error
# if it detects that either of the processes has exited.
# Otherwise it loops forever, waking up every 60 seconds

while sleep 60; do
  ps -fp $ZID_PID 
  ZID_PROCESS_STATUS=$?
  if [ $ZID_PROCESS_STATUS -ne 0 ]; then
    echo "ZID process has already exited."
    exit 1
  fi
  
  ps -fp $WEB_PID 
  WEB_PROCESS_STATUS=$?
  if [ $WEB_PROCESS_STATUS -ne 0 ]; then
    echo "WEB process has already exited."
    exit 1
  fi
done

Here I first start my go executable and then I do a npm start

In my Dockerfile I do the following:

# Build the Go API
FROM golang:latest as go_builder
RUN mkdir /zid
WORKDIR /zid
COPY . /zid
RUN GOOS=linux GOARCH=amd64 go build -a -ldflags "-linkmode external -extldflags '-static' -s -w" -o /go/bin/zid

# Build the React application
FROM node:alpine as node_builder
COPY --from=go_builder /zid/web ./web
WORKDIR /web
RUN npm install

# Final stage build, this will be the container with Go and React
FROM node:alpine
RUN apk --no-cache add ca-certificates procps 
COPY --from=go_builder /go/bin/zid /go/zid
COPY --from=go_builder /zid/static /go/static 
COPY --from=go_builder /zid/ca /go/ca
COPY --from=node_builder /web /web
COPY --from=go_builder /zid/start.sh /go/start.sh
RUN chmod +x /go/start.sh
EXPOSE 3000 10000
WORKDIR /go
CMD ./start.sh

Here I am creating a Go executable, copy and npm install my /web folder and in de final stage build I start my ./start.sh script.

This will start my Golang application and the React development server. I hope it helps for others.

React client and Golang server in same Dockerfile

Answers (2)

Related Questions