Setup react app build folder onto Google Kubernetes

Question

Currently, I have a repo that contains both a Node.js Express backend and React frontend. The repo's image is in Google Container Registry and is used on a Google Kubernetes cluster. There is an url provided by a load balancer, where it is the backend url that is serving the static build server. In the future, I want to separate the backend/frontend into two different repos (one for backend and one for frontend).

I believe making changes for the backend in the cluster won't be difficult, but I am having trouble figuring out how to add the React frontend to this since the build folder will be in a different repo than the backend. I read online that to serve a React app on GCP, you would upload the build folder onto a bucket and have that bucket served on App Engine, which will provide a url to access it on the web.

I'm wondering if this is how it would be done on a Kubernetes cluster or if there is a different approach since it is not using App Engine, rather Google Kubernetes.

I hope this makes sense (I am still fairly new to Google Cloud) and any feedback/tips will be appreciated!

Thanks!

Answer 1

There are different approaches to this.

Approach 1: Serve your frontend via Google Cloud Storage.

There is a guide in the GCP documentation: Hosting a static website to set this up. After the build copy all the files to the cloud storage and you are done.

Approach 2: Add your fronted to your backend while building the Docker image

1. Build your frontend and pack it into a Docker image with something like this:

FROM node AS build
WORKDIR /app
COPY . .
RUN npm ci && npm run build

FROM scratch
COPY --from=build /app/dist /app

2. Build your backend and copy the frontend:

FROM myapp/frontend as frontend

FROM node
// build backend
COPY --from=frontend /app /path/where/frontend/belongs

This decouples both builds but you will always have to deploy the backend for a frontend change.

Approach 3: Serve your frontend with nginx (or another web server)

FROM node AS build
WORKDIR /app
COPY . .
RUN npm ci && npm run build

FROM nginx
COPY --from=build /app/dist /usr/share/nginx/html

You might also adapt the nginx.conf to enable routing without hash paths. See this article by codecentric for more information on that.