DEV Community: RohithPrabakar

Deploy a ReactJS Application to AWS S3 with Route53 and Cloud Front using GitHub Action for CI-CD

RohithPrabakar — Thu, 26 Jan 2023 02:31:42 +0000

A good developer would always want to reduce repetitive, manual processes. Using CI/CD (Continuous Integration / Continuous Delivery) helps developers to automate processes so they can focus on other projects.

This blog post is going to explain how you can deploy a static react application in AWS S3 with a custom domain using Route53, SSL certification using certificate manager and using Cloud Front as CDN (Content Delivery Network). All while, make the deployment process automate using GitHub Actions.

Before we start with the steps, the blog assumes that you already have a static react application in your desired GitHub repository.

Now, the steps that we will take to set this up are:

Enlist a domain name in Route53.
Create a S3 bucket with the same root domain name and create
another S3 bucket but www. Subdomain name with redirect option
enabled.
We then create a custom SSL certificate using Certificate
Manager
We then create a Cloud Front distribution.
Add records in Route53.
Create a YAML file for GitHub actions auto deployment.
Test your deployment by visiting your domain in a web browser.

Enlist a domain name in Router 53

Go to the AWS Route53 console (https://console.aws.amazon.com/route53/)
In the navigation pane, choose Registered domains. Choose Register domain button.
In the Search for domain box, enter the domain name that you want to register, then choose Check. Select the desired domain name and choose Add to cart

Review the domain name, contact information and pricing then choose Continue
Review and accept the terms and conditions. Choose Complete purchase.
You'll receive a confirmation email with instructions to confirm the domain registration
Log in to the email address that you provided as the registrant contact email address, open the email from AWS, and click on the link to confirm the domain registration.
Once you have confirmed the registration, the domain name will be available in the Route53 console, and you can start configuring DNS records for it.

Setting Up AWS S3

Now we are going to setup AWS S3 with the root domain name as the bucket name and having public access blocked for security. We need to install aws cli configured in your local pc.

If you are not sure on how to configure them you can read the

Quick configure guide from amazon.

# create S3 bucket root domain
aws s3 mb s3://example --region us-east-1

this code snippet creates an S3 bucket with example the bucket’s name instead of that add your root domain name.

Then go to your aws s3 console and click on the refresh button and click on the s3 bucket with the root domain name you just created and click on permission.

In here, edit the Block public access and click on all the check boxes.

Now we must create another s3 bucket with www. [domain_name] .com this will be redirecting the bucket with domain name.

Same way, create the bucket using aws cli

# create S3 bucket with www. 
aws s3 mb s3://www.example.com --region us-east-1

then in aws s3 console go into the bucket and in properties come down to Static Website Hosting and click edit.

In the edit section click all appropriate options shown in the image. And then click Save changes.

We have successfully created both the buckets.

Setting up Custom SSL certificate

We are going to create a SSL certificate for the domain and all sub domain.

# create SSL certificate for example.net and *.example.net
aws acm request-certificate --domain-name example.net  --validation-method DNS --subject-alternative-names *.example.net --tag Key=Name,Value=example

Go to the certificate manager console and wait until the status changes to Issued.

Once it is changed click on the certificate ID and click on the Create records in Route 53.

Setting up Cloud Front

Now that we have our s3 buckets and SSL certificate configured we can configure the CDN for distribution of the website to the internet, for that we will be configuring CloudFront. Firstly, go in to the CloudFront dashboard using aws console. Click on the Create distribution.

Then in the create distribution page select the options given in the image below.

It is important that you choose Legacy access identities and for Origin access identity create a new OAI and select that.

The Bucket policy must be Yes, update the bucket policy.

Next in the Viewer protocol policy select Redirect HTTP to HTTPS protocol for secure connection.

To route people who visit www. As the subdomain to your domain type it in the Alternate domain name section.

And in the custom SSL certificate click on the drop-down and you will be able to see the certificate that we created before, use that. Type index.html in default root object and enable IPv6. Keep rest of the options default. Once everything is configured click on Create distribution.

Add recodes to Route53

Once we have created the cloud front distribution we can now add records in the route53 which connects to CloudFront distribution with your domain name in route53.

Go to the Router53 dashboad and click on Hosted zone->[Domain name]

Once you are inside this click on create record

In the Quick create record we are 4 records.
2 records of IPv4 for the root domain and www. [domain_name] .com
2 records of IPv6 for the root domain and www. [domain_name] .com

Basically, in the Recode name you leave it blank for root domain and the for the other type www. In the blank. Record type is going to be either A-Routes trffic to an IPv4 address and some AWS resources or AAA-Routes traffic to an IPv6 address and some Aws resources.

Enable Alicas option. For both Route traffic to option is Alice to CloudFront distribution and Routing policy is Simple routing.

Do this for all the records by add another record. Once everything is added click on Create record.

You will see some this like this in the records tab.

GitHub Action Setup

Firstly, go to your desired GitHub repository. In this repository create a folder PATH .github/workflows. Afterwards create a deploy-app.yaml file in it.

Next Copy this code snippet into the deploy-app.yaml file.

# Name of workflow as seen in Github actions tab
name: CI-CD to S3 Bucket
# Run workflow only on push to main branch
on:
  push:
    branches:
      - main
jobs:
  # To build the project
  deploy-S3:
    runs-on: ubuntu-latest
    steps:
      - name: Checking out code
        uses: actions/checkout@v3

      - name: Installing Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "16"

      - name: Installing dependencies
        run: npm install

      - name: Run test
        run: npm test

      - name: Building project
        run: npm run build
        if: success()

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-west-1

      - name: Deploy to S3 bucket
        run: aws s3 sync build/ s3://example --delete
        if: success()

This code snippet describes the action, the workflow is triggered on pushes to the main branch. It first checks out the code, installs the dependencies, run the tests, builds the React application, and then configures the AWS CLI with the necessary credentials. Finally, it uses the aws s3 sync command to upload the contents of the build/ directory to the specified S3 bucket.

It is also a good practice to use if: success() in the build and deploy step, so that it only runs if all previous steps are successful.

In the deploy to S3 bucket line add your s3 bucket url.

You will need to set environment variables for AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY in your GitHub Actions workflow settings or you can use secrets to store those.

Add secrets to your repository

Final step is to add the secrets to your GitHub repository. For this Github Action, we need the access key ID and secret access key from IAM User as secrets called AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.

Go to your IAM User in AWS and click on your account name -> Security credentials.

Scroll down to Access Keys section and Create access key.

Click the option Applications running outside of AWS and click next.

This step is optional but for readability I prefer you to add appropriate tag to this access key. Then click on Create access key.

Copy the access key and secret access key in a separate file because this is the only time you can see the secret access key. Once you click Done you will not be able to see secret access key. You can also download the .csv file.

Now go back to your GitHub repository, it’s time to and the access keys to secrets.
To add the secrets, you have to go to the settings->Secrets and variables -> Actions
In there create New repository secret

And on the secrets page, you can add your 2 secrets AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY

Grab a coffee and enjoy it

Lastly, you have to create a pull request from a feature branch into main branch and watch your actions deploying your app to S3 and website being served with in your domain name.

I created a project using this method. You can find the repository here. If something is unclear let me know and I will adjust it.

Design Narrative: Deploy Resume Website in AWS

RohithPrabakar — Sun, 22 Jan 2023 17:43:04 +0000

Getting Started

On First week of January I got my cloud practitioner certification. With the new found knowledge I wanted to use it on a project and gain more experience with some hands on experience.

Frontend

Coding the frontend of the resume site using react was a good refresher of my skills in react. This helped in bringing me back up to speed with the language. Once I was got the hang of react. I was persistent in custom components. This was because in future, updating the website will be much easier if everything is separated as components. And as we all know resume's would have constant changes to it as we learn more and add them to it. In the process I also wanted this project to be perfect before committing it to main branch so I wanted to incorporate a unit testing which helped be in validating the information where rendering properly.

Once I completed building the website I wanted have a git repository so that I can revert back to previous version if I did something wrong. As I had some experience working with GitHub I choose to create a remote repository in that. During this project I learnt the distinction between GitHub and git though I have used them for my previous projects I was not clear with it I would just do as per the instructions but if I got any error I was not able to fix them. Now I did learn the difference and also implemented some good practices like create a feature branch to add any changes and not directly to the main branch.

Once I felt confident with my workflow, I wanted to integrate CI/CD for hosting the website in S3. Since my site's version control was being handled by Git and GitHub, it was a matter of finding a GitHub Actions workflow that uploaded my code to S3 and also invalidated the CloudFront distribution every time I pushed an update so that the latest copy of my site would always be visible. This worked seamlessly once I create a the architecture in the AWS cloud.

Cloud Architecture

I have posted a detailed step-by-step guide for the architecture to host the react file in here.

AWS cloud was new to me so, at first I saw many videos explaining the architecture but everyone had different way of approach so I thought to stick to any approach where I would have the files in S3 and leave the CloudFront for distribution and certificate manager for security in transit and Route53 for DNS. This approach seemed straight forward and simple. When deploying this I wanted to get some experience with deploying a service with code so tried using AWS CLI. But in my future projects I want to us terraform and cloudformation to deploying services.

Warping Up

I finally reached a point where I'm ready to tidy up the content of my resume, as part of a bigger push to prepare myself for the impending job search. It was incredibly instructive and helped set my path forward as I continue learning and progressing towards my career.
Click here to see my resume
GitHub repository

My Cloud Journey: Jan 04, 2023

RohithPrabakar — Thu, 05 Jan 2023 02:14:37 +0000

I am happy to write this post as I have completed my AWS Cloud Practitioner Certification and have successfully started to get my feet wet in the world of the Cloud.

Learning Path 📚

Recently Completed:

AWS Cloud Practitioner Cert This was a great dive into the Cloud environment. This certification helped me in understanding the basics of the cloud, services, and terminologies commonly used. Now, this cert gave me the confidence to tackle the next certification AWS Solutions Architect.

In Progress:

AWS Solutions Architect I have started with AWS solutions architect by following through the video course provided by whiz labs. They have a bundle where I am able to practice the gained knowledge in the lab section and also finally use the exam section to get prepared for the certification exam.

Projects 👨‍💻

I have started with a project where I will be using my previous knowledge of React to create a static resume website and try to create a CI-CD using GitHub Actions and deploy it in the S3 bucket. I feel this would be an introductory project where I can get a feel of the AWS environment in a real-world situation.

Wrap up 🍫

So far, I am not displeased with my progress. I have been working on this journey through the cloud for about 3 months as a full-time student. I still feel need a lot more to know about cloud but still, I am only Human that too a teenager with lots of distractions.

That's all for the week.

Onwards and Upwards!

Motive

RohithPrabakar — Thu, 05 Jan 2023 01:05:26 +0000

Hi, I'm Rohith!

I am a final year BTech Computer Engineering Student. I am writing this blog to document my journey in the Cloud computing world.

I am starting this blog to structurize my learning and try to keep this an informative blog so that others can learn through my journey.

I would like to return to this page and say that I am a successful cloud engineer.

Onwards and Upwards!