What is CircleCI?
CircleCI is a cloud-based continuous integration and continuous deployment (CI/CD) platform that helps developers automate their software development process. It provides a user-friendly interface to set up automated testing and deployment pipelines.
How CircleCI is better than Jenkins?
Compared to Jenkins, CircleCI is easier to set up and manage as it is a cloud-based solution that doesn’t require any server setup or maintenance. CircleCI also provides a more intuitive user interface and better integration with modern technologies like Docker and Kubernetes.
CircleCI Advantages-
The advantages of CircleCI include its ease of use, scalability, and ability to integrate with various tools and technologies. It also provides fast build times and supports parallel testing.
CircleCI Disadvantage-
However, its cloud-based nature can be a disadvantage for companies that require on-premise solutions or have strict security requirements.
How Jenkins is better than CircleCI?
Jenkins, on the other hand, is a more mature and widely used CI/CD tool that offers more customization options and flexibility. It provides an open-source nature, a vast plugin ecosystem, and the ability to work with any programming language and platform. Jenkins also provides a higher degree of control over the CI/CD process, making it suitable for complex projects or organizations with specific requirements.
Jenkins Advantages-
Its advantages include its open-source nature, vast plugin ecosystem, and ability to work with any programming language and platform.
Jenkins Disadvantage-
However, its complex setup can also be a disadvantage for smaller teams or organizations with limited resources.
How to deploy ReactJS application using CircleCI
To create a new IAM user, Click on Add user.
Add the User name and Click on next
Here, we have to create the user group for the created user.
We will deploy our reactJS application on the AWS S3 bucket. So, we need only AmazonS3FullAccess.
Select the Create Group name and click on Next.
Navigate to the IAM user->Security Credentials tab and click on Create access key to generate the access and secret access keys.
Let’s do the CircleCI Setup
If you are new, click on SignUp with Github so that the repository will appear automatically for you to deploy its code.
Click on Signup with Github.
Here, you will see your Github Account username or profile.
This is a dashboard of CircleCI. You can see here all the repository that is present in your GitHub Account.
My code is present in the CircleCI-ReactJS repo. So, I will click on the Set up Project in front of the CircleCI-ReactJS repo.
My config file is present in the master branch. So, I mentioned it here on the master branch and click on the Set up Project.
But, before going to build the Project, I need to add Environment Variables of the AWS account where I had generated the AWS access key and secret access key.
So, don’t forget to add the Environment Variables in your project otherwise the deployment will not get done.
You can add Environment Variables by clicking on the Project Settings-> Environment Variables.
Before building the project, it is important to add the Environment Variables for the AWS account that generated the AWS access key and secret access key. Make sure to add the Environment Variables in your project, otherwise, the deployment will fail. To add environment variables, go to the Project Settings and then click on Environment Variables.
The .circleci directory in my GitHub repository for the CircleCI-ReactJS Project Project contains the config.yml file. This file specifies the build process and deployment steps that CircleCI will use.
version: 2.1
jobs:
# Builing the project is going to start
build:
machine:
image: ubuntu-2004:202010-01
docker_layer_caching: true
steps:
- checkout
- run:
name: Installing AWS CLI
command: |
sudo apt-get update
sudo apt install python3-pip
sudo pip3 install awsebcli --upgrade
- run: cd ./app && npm install && npm run build
- persist_to_workspace:
root: .
paths:
- .
# Deploying the code to AWS S3 Bucket
deploy:
machine:
image: ubuntu-2004:202010-01
docker_layer_caching: true
steps:
- attach_workspace:
at: .
- checkout
- run:
name: Configuring AWS
command: |
ls
if [ $CIRCLE_BRANCH = 'master' ]; then
aws s3 sync ./app/build s3://${AWS_S3_BUCKET}
fi
workflows:
version: 2
execute_bulk:
jobs:
- build
- deploy:
requires:
- build
filters:
branches:
only:
- master
If you have followed all the steps correctly, you should now be able to run your project and deploy it successfully.
To confirm that your build file has been uploaded to the S3 bucket, check the contents of the bucket. If you can see the files present in the bucket, then the upload was successful.
Next, go to the properties of the bucket and look for the “Bucket website endpoint” option at the bottom of the page.
After copying the Bucket website endpoint, my ReactJS application is now up and running.
That’s all for now. I hope you have gained a good understanding of CircleCI and its advantages and disadvantages. You can use CircleCI to deploy projects for various technologies such as Angular, Java, and more.
Remember to keep practicing and exploring, and don’t hesitate to reach out if you have any questions
Github: github.com/AmanPathak-DevOps
LinkedIn: linkedin.com/in/aman-devops
Happy Learning