Deploy a React Application on Kubernetes with Bitnami's Apache Helm Chart
That’s where this guide comes in. It walks you through the process of deploying and running a React Web application on a Kubernetes cluster. It uses Bitnami’s Apache Helm chart, which is based on Bitnami’s Apache container.
Assumptions and prerequisites
This guide makes the following assumptions:
- You have a React application suitable for deployment on Apache. If you don’t, you can use this example project from the React website.
- You have a Docker environment.
- You have an account with a container registry. This guide assumes that you are using Docker Hub.
- You have a Kubernetes cluster running with Helm v3.x installed.
- You have the kubectl command line (kubectl CLI) installed.
Step 1: Build and test a custom Docker image
The first step is to create a custom Docker image with your application code. Bitnami’s Apache image is a good starting point for this.
Begin by obtaining the code for your application. If you’re using the example React application listed above, clone the corresponding Git repository on your development system, as shown below:
$ git clone https://github.com/pankajladhar/GFontsSpace.git
Change into the application source directory, download dependencies and build the project:
$ cd GFontsSpace $ yarn install $ yarn build
Create a Dockerfile that starts with Bitnami’s Apache container and adds the built application to the Apache server’s document root (by default, this is configured as the /app directory) as follows:
FROM bitnami/apache:latest COPY build /app
Build the Docker image, replacing the USERNAME placeholder in the command below with your Docker Hub username:
$ docker build -t USERNAME/react-app .
Run the Docker image to confirm that your application is successfully deployed on Apache:
$ docker run -p 8080:8080 USERNAME/react-app
Browse to the application URL at http://IP-ADDRESS:8080/ (where IP-ADDRESS is the IP address of your Docker host) to confirm that it works.
Step 2: Publish the Docker image
Once the Docker image is built with your application code, upload it to a public registry. This tutorial uses Docker Hub, but you can select others, such as:
To upload the image to Docker Hub, follow the steps below:
Log in to Docker Hub:
$ docker login
Push the image to your Docker Hub account. Replace the USERNAME placeholder with your Docker username:
$ docker push USERNAME/react-app
Confirm that you see the image in your Docker Hub repositories dashboard before proceeding to the next step.
Step 3: Deploy the application on Kubernetes
NOTE: If you wish to access the React application externally through a domain name, you must first install the NGINX Ingress controller.
The next step is to deploy the application on your Kubernetes cluster. Bitnami’s Apache Helm chart makes it very easy to do this, because it has built-in support for custom Docker images. To deploy the example React application using the current Helm chart, follow these steps:
Make sure that you can to connect to your Kubernetes cluster by executing the command below:
$ kubectl cluster-info
Update your Helm repository list:
$ helm repo add bitnami https://charts.bitnami.com/bitnami $ helm repo update
Deploy the application by executing the following (replace the USERNAME placeholder with your Docker username):
$ helm install apache bitnami/apache \ --set image.repository=USERNAME/react-app \ --set image.tag=latest \ --set image.pullPolicy=Always
If you wish to access the application externally through a domain name and you have installed the NGINX Ingress controller, use this command instead and replace the DOMAIN placeholder with your domain name:
$ helm install apache bitnami/apache \ --set image.repository=USERNAME/react-app \ --set image.tag=latest \ --set image.pullPolicy=Always \ --set ingress.enabled=true \ --set ingress.hosts.name=DOMAIN
This will create a pod within the cluster for the Apache service.
TIP: If you use a different repository or have multiple tagged versions of the custom container, you can also specify a different container repository or tag. See the complete list of supported parameters for the chart.
Once the chart has been installed, you will see some information about the deployment. Run the helm status command to see deployment status:
$ helm status apache
The external IP address of the Apache service can be obtained from the output of the previous command, as shown below:
Test the application by browsing to the service IP address, such as http://IP-ADDRESS/ or, if you used the NGINX Ingress controller, to the specified domain name. If you used the example application, here is a screenshot of what you should see:
You’ve now successfully deployed your React application on Kubernetes.
To learn more about the topics discussed in this guide, use the links below: