I have a react SPA (Single Page Application) and want to deploy it to a Kubernetes environment. For the sake of keeping it simple, assume the SPA is stand alone.
I've been told Bitnami's repo for Helm Charts are a good place to start to solve this problem. So my question is what Bitnami chart should I use to deploy a react SPA to a Kubernetes cluster? And where can I find the steps explained?
What I want
The desired solution should be a Helm Chart that serves up static content. Typically app.js and index.html page, and other static content. And lets me specify the sub-directory to use as the contents of the website. In react, the
build subdirectory holds the website.
What I currently do (How to deploy a SPA to K8S my steps)
What I currently do is described below. I'm starting from a new app created by
create-react-app so that others could follow along and do this if needed to helm answer the question.
This assumes you have Docker, Kubernetes and helm installed (as well as node and npm for React).
The following commands do the following:
- Create a new React application
- Create a docker container for it.
- Build and test the SPA running in a local docker image .
- Create a helm chart to deploy the image to K8S.
- Configure the helm chart so it uses the docker image created in step 3.
- Using the helm CLI deploy the SPA app to the k8s cluster.
- Test the SPA running in k8s cluster.
#1 Create a new React application
npx create-react-app spatok8s cd spatok8s npm run build
At this point the static SPA website is created an is in the
2. Create a docker container for it.
Next, create Dockerfile with the following. For example,
vi Dockerfile and put the following in it. The Dockerfile was what is described here https://hub.docker.com/_/nginx.
FROM nginx copy build /usr/share/nginx/html
These commands say to use the NGINX docker image (from dockerhub) and copy my website onto the image so my website will be self contained within the image. When the image starts (nginx starts) and the only content to be served will be my index.html file in the
3. Build and test the SPA running in a local docker image .
Next build the docker image
spatok8s and run it locally, and open your browser to http://localhost:8082 (used in this example).
docker build -t spatok8s . docker run -d -p8082:80 spatok8s
After you've verified it works stop it using
docker stop # where the
# is the container number from
docker ps -q --filter ancestor=spatok8s.
4. Create a helm chart to deploy the image to K8S.
Now create a helm chart so I can deploy this docker image to Kubernetes:
helm create spatok8schart
5. Configure the helm chart so it uses the docker image created in step 3.
Update the helm chart for this application
The lines changed are included below:
# Update the repo to use the Docker image just built repository: spatok8s . . . # Update the URL to use to access the SPA when it is deployed to Kubernetes - host: spato8ks.local . . . serviceName: spato8ks.local
6. Using the helm CLI deploy the SPA app to the k8s cluster.
helm install spatok8s spatok8schart
The output for the last command is:
NAME: spatok8s LAST DEPLOYED: Thu Apr 8 22:50:26 2021 NAMESPACE: default STATUS: deployed REVISION: 1 NOTES: 1. Get the application URL by running these commands: http://spatok8s.local/
7. Test the SPA running in k8s cluster.
Open the browser to http://spatok8s
So it works but it isn't as easy as I've been told it could be, so I'm searching for the Bitnami chart that will make this easier.
Searching for a solution
helm chart for deploying a single page app? and found:
https://developer.ibm.com/depmodels/cloud/tutorials/convert-sample-web-app-to-helmchart/ - Which requires an IBM private cloud (a non-starter for me).
https://wkrzywiec.medium.com/how-to-deploy-application-on-kubernetes-with-helm-39f545ad33b8 - A medium article which looked overly complicated for what I want to do.
https://opensource.com/article/20/5/helm-charts - Good article but not what I'm looking for