In this Code Pattern, we will deploy a React application using Kubernetes.
There are many choices when looking for the right solution to manage and deploy our applications. It can often be overwhelming when we're trying to pick the right solution. One of our many choices is Kubernetes. This pattern will take you through how to get a front end application deployed on Kubernetes. After implementing the code, you will have the knowledge to deploy your own applications on Kubernetes.
This repository uses the React JavaScript library to build out the front end of the application. Redux is a predictable state container used hand in hand with React. It handles all of the state management within the application. The OMDb API is called to get movie information based on user input. Docker is an open source tool that is used to package the application into a container. IBM Cloud provides one to use with Kubernetes deployments called IBM Cloud Container Service. Kubernetes handles the management and deployment of the containerized application.
When the reader has completed this Code Pattern, they will understand how to:
- Containerize a React application using Docker
- Deploy and manage an application using Kubernetes
- The user accesses the application through the web interface. The user enters a movie title into the input.
- The React application is rendered to the user on access.
- The application calls the OMDb API and receives a JSON object of the response to show the user.
- IBM Cloud Container Service: IBM Bluemix Container Service manages highly available apps inside Docker containers and Kubernetes clusters on the IBM Cloud.
- Kubernetes Cluster: Create and manage your own cloud infrastructure and use Kubernetes as your container orchestration engine.
- Node.js: An open-source JavaScript run-time environment for executing server-side JavaScript code.
- Cloud: Accessing computer and information technology resources through the Internet.
- Container Orchestration: Automating the deployment, scaling and management of containerized applications.
-
You must get an API key from OMDb API in order to get a response from the API. You will insert your API key in /src/actions/index.js on line 42 OMDb API by Brian Fitz is licensed under CC BY-NC 4.0
-
Create an environment variable for your docker username
$ export docker_username="YOUR_DOCKER_USERNAME"
Clone the repo locally. In a terminal, run:
$ git clone https://github.com/IBM/deploy-react-kubernetes
- Install Node.js
- Run the following commands in a terminal:
$ npm install
$ npm run build-css
$ npm run start
In a terminal, run:
$ docker build -t $docker_username/deploy-react-kubernetes .
Your image should be listed by running:
$ docker images
In a terminal, run:
$ docker run -p 3000:3000 -d $docker_username/deploy-react-kubernetes
You can now access the application at http://localhost:3000
- Create a namespace
$ bx cr namespace-add <your_namespace>
In a terminal, run:
$ bx cr build -t registry.<ibm_cloud_region>.bluemix.net/<your_namespace>/deploy-react-kubernetes .
$ kubectl run deploy-react-kubernetes-deployment —-image= registry.<ibm_cloud_region>.bluemix.net/<your_namespace>/deploy-react-kubernetes
$ kubectl expose deployment/deploy-react-kubernetes-deployment
—-type=NodePort —-name=deploy-react-kubernetes-service —-port=3000
- To access your application. You would need the public IP address of your cluster and NodePort of the service.
# For clusters provisioned with IBM Cloud
$ bx cs workers YOUR_CLUSTER_NAME
# For details on a specific Kubernetes service
$ kubectl describe service deploy-react-kubernetes-service
You can now access the application at http://IP_ADDRESS:NODE_PORT
- Container Orchestration Code Patterns: Enjoyed this Code Pattern? Check out our other Container Orchestration Code Patterns.
- Kubernetes on IBM Cloud: Deliver your apps with the combined the power of Kubernetes and Docker on IBM Cloud