CI/CD Automation Setup for React Application with Jenkins, Docker, Ansible & push Docker Image to Docker Hub
The Diagram actually shows the workflow, which I used during my development practice, where I took a server from DigitalOcean and do everything there. In your case, you can use your local PC or a remote server.
Practicing CI/CD with different tools in local-machine for development is not difficult anymore. In this post, I’ll share a simple way to get all at one place easily installed and configured within seconds with the help of different kinds of tools & push your react image to Docker Hub.
I assume you have a little bit of knowledge about Jenkins, Docker, Ansible & installed these tools on your local PC or remote server and also have Github or Bitbucket repository. In this article, I’m not showing how to install those tools, only focus on how everything works in a single picture & you can configure the Jenkins pipeline for running your react application in your local PC/Server & store image in your Docker Hub for future uses.
We will go through step by step process. Try to follow or even it works if you don’t go through step by step process but make sure you configure everything right.
Step — 1
Add React code and script to your repository
i. Push your react code in your preferable cloud repository.
ii. Write a Dockerfile to dockerize your application & push the Dockerfile to your repo.
FROM node:10-alpine as build-step
RUN mkdir /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build
FROM nginx:1.17.1-alpine
COPY --from=build-step /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]iii. Write an ansible playbook file (named the file playbook.yaml) for running, stopping & removing your docker container, and also push it in your repo. Please fix the indentation if necessary.
---
- hosts: localhost
tasks:- name: Stop the running container
command: docker stop react-app
ignore_errors: True- name: remove the running container
command: docker rm react-app
ignore_errors: True- name: remove the running image
command: docker rmi mahmudhasan/react-app:latest
ignore_errors: True- name: Create and run container
command: docker run -d -p 3000:80 --name react-app mahmudhasan/react
In my case, I’m using Github. If you don’t want to build a project, feel free to clone my Github repo, where you’ll get everything.
Step — 2
Prepare Jenkins & Credentials for the Job
- Install Docker & Post-build task plugin:
Login to Jenkins → Manage Jenkins → Manage Plugins → Available → search “Docker & Postbuild” →
If the plugins are already installed, they will show up in the Installed tab.
- Configure Docker:
Login to Jenkins → Manage Jenkins → Global Tool Configuration → It will display Docker on the list.
Configure Docker in Node Section
- we need to configure Docker in the Nodes section of the Jenkins
Go to Manage Jenkins -> Manage Nodes and Clouds -> Configure Clouds-> Add New Cloud. - Select Docker here.
- Type unix:///var/run/docker.sock for Docker Host URI and Click Enabled Then save
Setup Credentials for Bitbucket & Docker Repository
If you’re using Private repo you need to configure Jenkins for connecting with your private repository.
Jenkins Credentials setup for Bitbucket:
Login to Jenkins → Manage Jenkins → Manage Credentials →
Jenkins Credentials setup for Docker Repository:
Login to Jenkins → Manage Jenkins → Manage Credentials →
Step — 3:
Jenkins Freestyle Project job setup for Building React Image, Pushing Docker Image to Docker Hub & Running Docker container automatically:
Log in to Jenkins → New Item →
→ Enter an item name: react-app-automation →
→ (Select) Freestyle project→
→ Click OK.
At Build Step Select Docker Build and Publish
At Post-build Action Select Post build task
Step-4:
Run and Verify:
After configuring the pipeline save it, click on Build Now and verify that your pipeline runs successfully! Then go you your browser and hit your ip_address:port number and you will see your latest changes in the browser.
And also, go to your Docker Hub and you’ll find the latest images that build and push by Jenkins.
