Deploy your React Application to AWS S3 and CloudFront using Azure DevOps

As you we all know that we have server like EC2, where we can install and host any application, why we need all these steps needed. In this article, I will explain as much I can. In the earlier post I have already posted an article about Azure DevOps.  Before we go for further in this article: 

Let’s have brief about these services. 

💻 React Application: React makes it painless to create interactive UIs. Design simple views for each state in your application and React will efficiently update and render just the right components when your data changes. (Source & Reference: reactjs.org) 

☁ EC2:  Amazon Elastic Compute Cloud (Amazon EC2) is a web service that provides secure, resizable compute capacity in the cloud. It is designed to make web-scale cloud computing easier for developers. (Source & Reference: https://aws.amazon.com/ec2/) 

🥛 AWS S3: AWS S3 is a simple storage service to store the data and AWS is offering flexible price. It is very reliable, and high performance with a high scalable. In the S3 we will pay the storage used, not provisioned. Take an example, 10 GB files stored in S3 with 1 TB of storage provisioned, you pay for 10 GB only. In case of AWS EC2, we need to pay for provisioned capacity i.e., 1 TB. (Reference: https://aws.amazon.com/s3/) 

🌏 CloudFront: It is fast Content Delivery Network (CDN) and that securely delivers content such as HTML, JS, CSS and image files to end users with a low latency and high transfer speeds by pushing to edge locations. (Reference: https://aws.amazon.com/cloudfront/) 

🚀 Azure DevOps: Continuously build, test and deploy to any platform and cloud (Reference: https://azure.microsoft.com/en-in/services/devops/pipelines/) 

------------- 💛💛💛 -------------

🎯 Why this approach grabs me to attention

Suppose we have an application that have the 30 GB of data, if we host that application into standard EC2 instance will cost around $40 and need to check the availability and scalability of that server. If we go with S3 it will cost around $2, see that how much difference is there? If we want to more flexibility in scalable and S3 is good option for storing frond-data and images and even, we can use it any other server too.  

In addition to this we have CloudFront, if we go with custom domain SSL with Server Name Indication (SNI), no extra cost for it.  So that we can prefer this approach to host the application.

------------- 💛💛💛 -------------

🎯 What we get by this approach

As we are aware of these services and why we need them, it is easy for us to know what we get go with this approach.  

➢ Scale the application as much as possible. 

➢ Cost will be reduced when compared with normal procedures. 

➢ Performance of the application will be increased. 

➢ Ease of use and maintenance 

------------- 💛💛💛 -------------

🎯 How can we proceed with this approach

Follow below steps to implement it!  

👉 In the AWS ☁ 

☑ Step 1: Create IAM account in your AWS account. 

☑ Step 2: Create AWS S3 bucket and give the public access.  

☑ Step 3: Configure the AWS CloudFront 

We can go to CloudFront and click on Distributions. We will see the list of distributions if you have already. Click on create distribution button and get started, and follow steps as mentioned in the below screen. 

It will take some time and provide domain as [unique name].cloudfront.com 

☑ Step 4: Add below code in your AWS S3 bucket policy.

{ 
    "Version": "2008-10-17", 
    "Id": "PolicyForCloudFrontPrivateContent", 
    "Statement": [ 
        { 
            "Sid": "Allow-Public-Access-To-Bucket", 
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "*", 
            "Resource": "arn:aws:s3::: [YOUR BUCKET NAME] /*" 
        }, 
        { 
            "Sid": "2", 
            "Effect": "Allow", 
            "Principal": { 
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity [ YOUR CLOUD FRONT DISTRIBUTION ID]" 
            }, 
            "Action": "*", 
            "Resource": "arn:aws:s3::: [YOUR BUCKET NAME] /*" 
        } 
    ] 

}

------------- 💛💛💛 -------------

👉 In the Azure DevOps  🚀

☑ Step 5: Create the Azure Repository in your account. - Create branch if needed or leave as it is. 

☑ Step 6: Install below in your Azure DevOps and add it your project

https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-vsts-tools 

☑ Step 7: Provide your AWS Keys in the service connection. 

------------- 💛💛💛 -------------

👉 In the React Application Code ⏳

☑ Step 8: Create the React Application and Install the NodeJs, NPM in your system 

npm -g create-react-app 

create-react-app [Your Application Name] 

☑ Step 9: Run the application your local

CD [Your Application Name]

npm start 

☑ Step 10: Push the code to your Azure Repository and create pipeline code in your Azure DevOps. 

☑ Step 11: Create the pipeline by selecting the pipeline in your left-hand menu. 

☑ Step 12: Select the repository and select the branch. 

☑ Step 13: Select the empty or choose NodeJs 

☑ Step 14: Add the below steps in your Pipeline file. 

Install NodeJs, Install Modules, Build the application, Copy the build folder another directory and finally push it to the AWS S3 Bucket. See steps in below image. 

In the Amazon S3 Upload step, choose the drop which you already created in Service connection, as below image mentioned.

☑ Step 15: Pull the code local and push it again. Then pipeline file triggered and push the code to the Amazon S3 bucket.  

The changes will populate to the Amazon CloudFront and access it with above mentioned URL. 

If you need any help on this, you can always approach us.