CICD — Deploy to AWS Elastic Beanstalk with Travis-CI
In this medium blog we’re going to see how easy it is to setup a Production grade end-to-end CI-CD pipeline for a React App with Automatic Testing and Deployment. For this we’ll be using services like Node, Docker, GitHub, Travis-CI and AWS Elastic Beanstalk.
We’ll start with Dockerfile to write the application code. We’ll be using two Dockerfile, one for Main Application and other for testing the Main Application.
Setting Up Enviornment:
Here I’m using an Ubuntu based system to create the React app.
# lsb_release -a
Installing NodeJS:
First, we need to install node because the command which we’ll be going to use needs node. I’ll be using this Digital Ocean blog to install node.
You can use any method; I’ll be going with the Option 3.
# node -v
Remember you need to install Node 14 or higher.
Creating ReactJS Sample App:
After installation is done, we can run the npx command to generate our React Sample app.
# npx create-react-app frontend
Remember, It will take some time and when it’s done it will show a screen something like below,
Testing ReactJS App:
Now we can simply run the application by running npm run start command.
Remember to change the directory to frontend before running that npm command.
As you can see the application ran successfully and can be accessed with address http://localhost:3000
So now our React App is ready, we can create our Dockerfile to containerize the application.
Creating Production Dockerfile:
We’ll be using the following code for Dockerfile
Here we’re using node:16-alpine docker image and tagging it as builder
In next lines we’ve defined the WORKDIR, copied package.json file from local to image workdir and then installed the dependencies using npm install command. After then we copied all the files from local directory to image workdir and then build the react application using npm run build command.
So now the build is ready to serve, here we’re using nginx image to server the website. Nginx serve data on port 80 so we’re exposing the port. After that we copied the build from node container into nginx container image and the application is ready to serve.
Creating Test Dockerfile.dev
Here we’ll be using another Dockerfile whose purpose is to run tests on the react application. For this we will be creating a separate Dockerfile with name Dockerfile.dev which contains following code.
As you can see, we’re doing the same thing what we done in the previous Dockerfile except the final command which is here npm run start to start the react application.
Till now we’ve two Dockerfile ready, one to server the build and another one for testing the application.
Now it’s time to create the CI & CD i.e., continuous integration & continuous deployment pipeline for that we’ll be using Travis CI.
Writting CI-CD Configuration File:
For this we need to create a .travis.yml file which contains following code,
As you can see there are so many things in here, let me break it to you.
In the beginning we’re defining if the pipeline process requires sudo as well as image also which is generic here. Then we’re defining the service which will be used by Travis which is docker here coz we’re running docker commands.
There are 3 steps in here,
- before_install
- script
- deploy
In the 1st step we’re building the Test image of our application which will be used in 2nd step to run the tests as you can see in the image.
Now comes the main part, the deploy phase which will deploy the code to the Elastic Beanstalk. Here we chosen EBS coz it is the easiest way to deploy a code on AWS public code without worrying about the infrastructure. Also it provides load balancing and auto-scaling as per requirements so you really don’t need to worry about the infrastructure where the code will be running.
In the final step i.e., deploy first we defined the provider’s name which is elasticbeanstalk in this case, It will be useful to Travis CI to understand the deployment phase for the application. There are some other things which we also need to define like region, app name, env name, bucket_name & bucket_path. We’ve also defined when the deploy phase will run, in this case the deploy will occur of the changes has been done on master branch. And lastly, we defined the credentials which will be used to access AWS Elastic Beanstalk by Travis CI.
So now our code is ready and we’re good to go for the actual deployment of CI-CD pipeline. We’ll start with setting up code on our GitHub repo.
Setting Up GitHub Repo:
For this I’m creating a Public repo on GitHub with name docker-react-travisci and pushing the code on the repo.
After this we need to Initialize Git in our Code directory,
After the initialization is done, we can push the code into the repo.
Now you can see the code in your GitHub repo,
So now the GitHub part is done, we need to setup Travis CI & AWS Elastic Beanstalk.
Setting Up AWS Elastic Beanstalk:
In this case we’re going to setup AWS Elastic Beanstalk first coz if we setup the Travis CI first it going to run the build and deploy automatic and going to fail also as there will be no Elastic Beanstalk environment to deploy the code.
So, let’s move to the AWS Elastic Beanstalk Page and create a Beanstalk Application by clicking on the Create Application button.
Here we’ll be using the same values as per our .travis.yml file.
In the Platform part, choose Docker and then click on Create application.
It will take some time to generate the whole Application & Environment.
Please update the .travis.yml variables as per your AWS Elastic Beanstalk setup. After sometime the AWS EBS will show Green Tick and you can access the sample code via the url provided below env name.
So now our AWS Elastic Beanstalk is ready, we need to setup our Travis CI but before that we need to generate a AWS IAM User which will be used by Travis CI to deploy code on AWS via EBS.
Creating IAM User:
For this I’ve created a IAM user with Elastic Beanstalk Administrator access as following,
After that create an Access key for this IAM user which will be used with the GitHub Repo in Travis CI.
I hope till now you’ve completed the setup of a Trial Travis-CI account and logged in successfully.
Setting Up GitHub Repo with Travis-CI:
After login with your GitHub account, you can click on your Profile Icon on top right and then click on Settings which will open a similar page as below,
For the first time I believe it will ask you to click on Allow for the GitHub account to be connected with your Travis CI account.After that create an Access key for this IAM user which will be used with the GitHub Repo in Travis CI.
I hope till now you’ve setup a Trail Travis CI account and logged in successfully.
After login with your GitHub account, you can click on your Profile Icon on top right and then click on Settings which will open a similar page as below,
For the first time I believe it will ask you to click on Allow for the GitHub account to be connected with your Travis CI account.
Click on Manager repositories on GitHub and it will take you to GitHub Setting page of Travis CI where you can choose which repo to be used with Travis CI in order to setup CI-CD pipeline.
After you click on Approve and install it will install the Repo on your Travis CI account and you can see the Repo under Repositories section.
Now let’s add the AWS EBS Secret Access key in the repo by clicking on Settings button of the Repo.
So, before that let’s generate a Secret Access key from IAM,
And then add the keys into the Travis CI Repo settings Environment Variables,
Running the First Build:
Now we’re ready to run our first build, for this, go to your Repo and click on Trigger Build.
Since this will be only first time, we’ll be running the build manually, after this whenever there will be any action performed on the Repo, the Travis CI will run the Tests and Deploy.
As you can see the Build run successfully,
Scroll the page down & you’ll be able to see the Test and Deploy phase result, in my case both were success with exit code 0.
After this move to the Elastic Beanstalk Page & you’ll see the EBS in updating phase, let it done.
After some time, you can see the Running version change from Sample Application to Travis application and the log will be also show the changes done to the EBS environment.
Now you can click on the EBS link to open our Sample React Application,
Setting up Feature Branch:
Now Let’s make the Code development friendly by creating a feature branch,
After that let’s make some changes in src/App.js file and push to the feature branch.
Now we can merger the pull request after reviewing the code, also then we compare and pull request, the Travis CI will run the test for the feature branch.
When you create Pull request the Travis CI will start the Test phase for the Pull request as well as Branch,
When the both test passes, click on Merge pull request and then Confirm merge. The feature branch will be merged with master branch and then the Travis CI will again start the Build & Deploy onto AWS Elastic Beanstalk.
As you can see the Build was successful and the Deploy phase should have started by now and will reflect on Elastic Beanstalk.
After opening the link, you can see the changes has been successfully deployed on the EBS.
That’s All for this medium post guys, Hope you learned new things and also how to setup an End-To-End CI-CD Pipeline with Travis CI and AWS Elastic Beanstalk.
In case you want to see the code, be my guest please: https://github.com/dcgmechanics/docker-react-travisci
Thank you so much!!
remember #SharingIsCaring ;)
