Some feel overhead to use CI/CD pipeline but it really isn’t. It is a very useful tool for runnable specification of the steps that deliver a new version of application. In case of not using CI/CD pipeline may be some miss in the code or forgot to test the application. So to prevent the common mistake of improving productivity we need to use CI/CD.

 

 

Here we are providing steps for you to deploy a React JS application to Amazon S3 bucket with Bitbucket CI/CD pipeline. And we assume that you have knowledge about AWS services. In this article we have explained deployment in 3 steps:

1. Create a new Bucket in S3
2. Create a Cloudfront Distribution
3. Setup Bitbucket CI/CD pipelines for deployment

 

Step1: Create a new Bucket in S3

In this process, we will show you how to create an S3 bucket for storing your React JS application. Make sure you enable “Static website hosting” and enter index.html in the “index document” field. Follow the below steps to manage S3 Bucket:

1. Click on the “Create Bucket” option on S3 dashboard and insert name for S3 public and click on Next. Now the “Block Public Access” screen will be open just skip it.
2. Setting us S3 Bucket Policy to make your React JS application accessible to the public. So deselect the “Block all public access”.
3. Now the new S3 bucket will be created. Select it from the bucket list and go to the properties section. Now enable “Static Website Hosting” and “Use this bucket to host a website”
4. Enter index.html in the “index document” field and click Save. It is allowed to call React Application.

 

Step2: Create a Cloudfront Distribution

Cloudfront distribution tells CloudFront where want content to be delivered from and the details about how to track and manage content delivery. It’s increasing the delivery speed.

1. Select “Create Distribution” option from Cloudfront dashboard.
2. Under Web section, choose Get Started
3. Now set Origin Domain Name, name should be the bucket name that you created.
4. For Viewer Protocol Policy, select HTTP to HTTPS.
5. If you want to connect a domain with Cloudfront distribution then you need to complete the “Alternate Domain Name (CNAMEs) process and add domain name. After that add an SSL certificate in the “Custom SSL Certificate” section. Otherwise you can skip this step.
6. Choose Create Distribution.

Note: Now your Cloudfront distribution setting is done. But sometime when you deploy your code you may notice that code changes are not reflected. So we need to set up to automatically clear the cache on deployed code in our bitbucket .yml file. We will mention in the next step.

 

Step3: Setup Bitbucket CI/CD pipelines for deployment

This is the main step for integrating CI/CD pipeline and deploying your React JS application code on S3 bucket. We have already described how to integrate Bitbucket CI/CD pipeline in React Js application. You can check here.

After following the given steps, here we will set up to deploy code on S3 Bucket.

1. 1. In the Repository Variables section under the Pipeline setting we need to add “AWS_ACCESS_KEY_ID”, “AWS_SECRET_ACCESS_KEY”, AWS_DEFAULT_RESION”, “BUCKET_NAME” and “DISTRIBUTION_ID” variables. Make sure these variables should be secured for security reasons.
   2. Now we will write steps(scripts) for deploying the code in bitbucket-pipelines.yml file. After adding these steps code will be look like below screen:

In this file we have added three steps:
Step Build: this step will generate the build of your application in the build folder.
Step Deploy to S3: by using aws setting variables this step will deliver your build code on S3 Bucket. Build path can be set by using the “LOCAL_PATH” variable.
Step Invalidate Cloudfront Cache: this last step is clearing the cache of Cloudfront.

The process to deploy the application on the server can be achieved by Docker. I hope now you can easily set up a bitbucket pipeline and connect with S3 Bucket with your project.

 20,740 total views,  5 views today