- {{node.title}}
{{node.type}} · {{ node.urlSource.name }} by {{node.authors[0].realName }}
ReactJS App on Oracle Kubernetes Engine with Travis CI and GitHub
ReactJS App on Oracle Kubernetes Engine with Travis CI and GitHub
In this article, we discuss how to deploy a React application on an Oracle Kubernetes Engine with Travic CI and GitHub.
Mar. 23, 20 · Web Dev Zone ·
Comment (0)
Join the DZone community and get the full member experience.
Introduction
This article demonstrates the steps required to host a Node application with Oracle Kubernetes Engine (OKE) using Travis Continuous Integration Server. Travis CI is very tightly coupled with GitHub, so any public repository created by you will be visible automatically in Travis.
This is a development/sample code demo only. You need to optimize the code (given in this article) or write extra code to make it production-quality. You can access the sample code used in this article from here: https://github.com/kumarsirish/sample-travis-oke.
Prerequisites
- You should have an account in Oracle Cloud Infrastructure (OCI) and should have access to Developer Services, like Oracle Container Registry (OCIR) and OKE. Get an account from https://www.oracle.com/index.html if you don’t have one.
- You should have an OKE cluster configured and running (https://www.oracle.com/webfolder/technetwork/tutorials/obe/oci/oke-full/index.html).
- You should have OCI CLI installed (https://oracle.github.io/learning-library/oci-library/DevOps/OCI_CLI/OCI_CLI_HOL.html).
- You should have an account in GitHub.
- You should have registered on Travis.
- JavaScript runtime environment Node.js is installed in your development environment (https://nodejs.org/en/).
Pipeline Overview
Any check-in in the GitHub project code will trigger an automated build in Travis, which will create the project image and push it to the OCIR. In the deployment step of the build, the image will be pulled from OCIR and deployment to OKE.
GitHub and Travis can be configured for the feature branch-based builds or master branch-based builds. Any branch when merged with master automatically triggers a build in Travis.
Bootstrap the ReactJS Project
Bootstrap ReactJS sample-travis-oke project.
x
$ npx create-react-app sample-travis-oke
$ cd sample-travis-oke
# Change src/App.js for any custom message
# Run optimized build
$ npm run build
$ npm install -g serve
# ReactJS Apps can be hosted by Nginx or lightweight "serve" Application. For this tutorial we will be using nginx server but to check the created application you can run "serve" command below to verify the application.
$ serve -s build
Containerize the Project
The project will be containerized, along with the following tools:
- OCI CLI.
- kubectl command.
Make sure that you have OCI tenancy’s COMPARTMENT_ID
value, and I am assuming that your development environment is behind the corporate firewall so set variables HTTP_PROXY
and NPM_REGISTRY
accordingly.
Below is a sample Dockerfile, which creates the application and also deploys it to the OKE.
Create the Dockerfile in project directory root.
xxxxxxxxxx
$ npx create-react-app sample-travis-oke
0
$ npx create-react-app sample-travis-oke
1
$ npx create-react-app sample-travis-oke
2
$ npx create-react-app sample-travis-oke
3
$ npx create-react-app sample-travis-oke
4
$ npx create-react-app sample-travis-oke
5
$ npx create-react-app sample-travis-oke
6
$ npx create-react-app sample-travis-oke
7
$ npx create-react-app sample-travis-oke
8
$ npx create-react-app sample-travis-oke
9
$ cd sample-travis-oke
0
$ cd sample-travis-oke
1
$ cd sample-travis-oke
2
$ cd sample-travis-oke
3
$ cd sample-travis-oke
4
$ cd sample-travis-oke
5
$ cd sample-travis-oke
6
$ cd sample-travis-oke
7
$ cd sample-travis-oke
8
$ cd sample-travis-oke
9
# Change src/App.js for any custom message
0
# Change src/App.js for any custom message
1
# Change src/App.js for any custom message
2
# Change src/App.js for any custom message
3
# Change src/App.js for any custom message
4
# Change src/App.js for any custom message
5
# Change src/App.js for any custom message
6
# Change src/App.js for any custom message
7
# Change src/App.js for any custom message
8
# Change src/App.js for any custom message
9
# Run optimized build
0
# Run optimized build
1
# Run optimized build
2
# Run optimized build
3
# Run optimized build
4
# Run optimized build
5
# Run optimized build
6
# Run optimized build
7
Verify that the image is getting built with the following command:
# Run optimized build
8
# Run optimized build
9
$ npm run build
0
Verify the Container locally using the below command:
$ npm run build
1
$ npm run build
2
$ npm run build
3
The application should now be up and running. Access the application at port 3000 of localhost (http://localhost:3000)
Push to GitHub
This step is required to integrate the project with Travis CI. Create the project repository "sample-travis-oke" in GitHub and push the existing code to this repository.
$ npm run build
4
$ npm run build
5
$ npm run build
6
$ npm run build
7
$ npm run build
8
$ npm run build
9
$ npm install -g serve
0
$ npm install -g serve
1
Feel free to check out GitHub’s information page for more details: https://help.github.com/en/github/importing-your-projects-to-github/adding-an-existing-project-to-github-using-the-command-line
Setup Travis CI
Lets set up Continuous Integration in Travis CI for this project. Here is what we require from Travis:
- Build to kick off automatically whenever code is merged-in into the "master" branch.
- Build should create the Docker image and push the Docker image to the OCI container registry (OCIR).
- Pull the image from OCIR and push to OCI OKE (Oracle Kubernetes Engine).
To do all these, first, you need to login with Travis CI with your GitHub account. This way, all your GitHub public repositories will automatically be visible on Travis. You can check the newly created sample-travis-oke repository from https://travis-ci.org/account/repositories. Click on "Sync account" and refresh the page if you do not see the repository.
Once synced up with GitHub, a Webhook will automatically appear in the GitHub project like below:
Set up OCIR in your tenancy if you haven’t already done so. Refer to this link for more details: https://www.oracle.com/webfolder/technetwork/tutorials/obe/oci/registry/index.html.
In your project settings (e.g https://travis-ci.org/<user_name>/sample-travis-oke/settings), add OCIR_USER
, OCIR_PASSWORD
, and COMPARTMENT_ID
as secret keys. Your Travis project setting screen should be similar to below:
Every Travis project requires a .travis.yml file in the root of the project. Currently, OKE deployment is not supported out-of-the box from Travis, so we need to write our own deployment steps. Make sure that OCI config and Kube config are part of the image.
A sample Travis file for building the image and pushing to the OKE is given below:
$ npm install -g serve
2
$ npm install -g serve
3
$ npm install -g serve
4
$ npm install -g serve
5
$ npm install -g serve
6
$ npm install -g serve
7
$ npm install -g serve
8
$ npm install -g serve
9
# ReactJS Apps can be hosted by Nginx or lightweight "serve" Application. For this tutorial we will be using nginx server but to check the created application you can run "serve" command below to verify the application.
0
# ReactJS Apps can be hosted by Nginx or lightweight "serve" Application. For this tutorial we will be using nginx server but to check the created application you can run "serve" command below to verify the application.
1
# ReactJS Apps can be hosted by Nginx or lightweight "serve" Application. For this tutorial we will be using nginx server but to check the created application you can run "serve" command below to verify the application.
2
# ReactJS Apps can be hosted by Nginx or lightweight "serve" Application. For this tutorial we will be using nginx server but to check the created application you can run "serve" command below to verify the application.
3
# ReactJS Apps can be hosted by Nginx or lightweight "serve" Application. For this tutorial we will be using nginx server but to check the created application you can run "serve" command below to verify the application.
4
# ReactJS Apps can be hosted by Nginx or lightweight "serve" Application. For this tutorial we will be using nginx server but to check the created application you can run "serve" command below to verify the application.
5
# ReactJS Apps can be hosted by Nginx or lightweight "serve" Application. For this tutorial we will be using nginx server but to check the created application you can run "serve" command below to verify the application.
6
# ReactJS Apps can be hosted by Nginx or lightweight "serve" Application. For this tutorial we will be using nginx server but to check the created application you can run "serve" command below to verify the application.
7
# ReactJS Apps can be hosted by Nginx or lightweight "serve" Application. For this tutorial we will be using nginx server but to check the created application you can run "serve" command below to verify the application.
8
Notice the kubectl commands used under deploy section. This section is different for different cloud providers. OCI config files and Kubernetes config file need to be protected. Travis provides a mechanism to encrypt such files and use it internally in build without making its content public. To do so, you need to install Travis CLI in your development environment and use it to encrypt the config files. Refer to https://docs.travis-ci.com/user/encrypting-files#Encrypting-multiple-files for more details.
# ReactJS Apps can be hosted by Nginx or lightweight "serve" Application. For this tutorial we will be using nginx server but to check the created application you can run "serve" command below to verify the application.
9
$ serve -s build
0
$ serve -s build
1
$ serve -s build
2
The --add
option automatically updates the .travis.yml file. You can verify that keys used for encryption are already part of your project settings in Travis.
Configure OKE Deployment
Create pod creation and service creation files for the project for OKE. These are just like any other Kubernetes files, and there is nothing OKE specific here. However, make sure that you have OCI config set up, your private key set up, or authentication token and Kubernetes config set up for OKE. Steps to do that are already given above. Sample Kubernetes files for this project will be like the following:
$ serve -s build
3
$ serve -s build
4
$ serve -s build
5
$ serve -s build
6
$ serve -s build
7
$ serve -s build
8
$ serve -s build
9
xxxxxxxxxx
0
xxxxxxxxxx
1
xxxxxxxxxx
2
xxxxxxxxxx
3
xxxxxxxxxx
4
xxxxxxxxxx
5
xxxxxxxxxx
6
xxxxxxxxxx
7
xxxxxxxxxx
8
xxxxxxxxxx
9
$ npx create-react-app sample-travis-oke
00
$ npx create-react-app sample-travis-oke
01
$ npx create-react-app sample-travis-oke
02
$ npx create-react-app sample-travis-oke
03
$ npx create-react-app sample-travis-oke
04
$ npx create-react-app sample-travis-oke
05
$ npx create-react-app sample-travis-oke
06
$ npx create-react-app sample-travis-oke
07
$ npx create-react-app sample-travis-oke
08
Deploy on OKE
As part of the Deploy step of Travis build, the following steps are executed within the container:
$ npx create-react-app sample-travis-oke
09
$ npx create-react-app sample-travis-oke
10
$ npx create-react-app sample-travis-oke
11
$ npx create-react-app sample-travis-oke
12
$ npx create-react-app sample-travis-oke
13
Keep on giving the kubectl get services
command until the external-IP is exposed:
$ npx create-react-app sample-travis-oke
14
$ npx create-react-app sample-travis-oke
15
$ npx create-react-app sample-travis-oke
16
Use the external IP to load the application.
Congrats! Your ReactJS application is now running on OKE deployed via Travis.
Like This Article? Read More From DZone
Comment (0)
Opinions expressed by DZone contributors are their own.
Web Dev Partner Resources
- {{ node.blurb }}
{{ editionName }}
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ message }}
{{ $dialog.title }}