Deploying a static React application to Amazon S3 using GitHub Actions

Amazon Web Services provides scalable, reliable, and low-cost cloud infrastructure. The most commonly used storage services in AWS is S3 (Simple Storage Service). This service enables users to store and retrieve data at any time. In S3, the place where we store our data into Buckets (here we don’t use folders). I have just started to play around AWS services. So, I started with a very small step on it. I usually host static sites in Netlify and GitHub pages. But, S3 is also useful to host static website.

One of the mostly used front-end library to host static site is React. In this article, we are going to take a look at how to host a static React Application to S3 using GitHub Actions as Continuous Integration and Continuous Deployment.

First, we need to login to the AWS Console, and search for S3 and click on that service.

After that, we need to create bucket…

We need to specifically name our bucket for that particular region in the Availability Zone of AWS.

We need to make the bucket as publicly available by Uncheck the Block all public access and then acknowledge the public access of the bucket.

After that Create the bucket and click the newly created bucket and scroll down to Static website hosting option as shown below.

Click the Edit option and

After save those changes, you will get a URL like this http://react-s3-bucket-parathan.s3-website.ap-south-1.amazonaws.com/ in the static web hosting option.

When you open it in a new tab, you will end up with Forbidden message.

We need to provide a bucket policy that makes the bucket content publicly available. To do that, click the Permissions option in the bucket details page

Scroll down to Bucket policy option and click Edit

Then, we have to add the policy: as shown in the image below

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Bucket-Name/*"
]
}
]
}

Instead of Bucket-Name you need to provide your bucket name.

Then save

Now, when you visit the static host address, you will see the Not Found message. Now, we need to deploy our static web-page where index.html will be rendered.

Before creating our React app, lets create

User, User Role, User Group and Permission to deploy our app from GitHub actions whenever we push our code to GitHub.

To create users, roles and permissions we need to use the IAM services from AWS.

Click the IAM service
Click Policies in the Left side of your window

Then create a new policy.

Choose the JSON option to create the policy.

Copy the below policy in the space provided

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowS3SyncCommand",
"Effect": "Allow",
"Action": [
"s3:GetObject",
"s3:Listbucket",
"s3:PutObject"
],
"Resource": [
"arn:aws:s3:::{bucket_name}",
"arn:aws:s3:::{bucket_name}/*"
]
}
]
}

Instead of {bucket_name} replace it with your bucket name.

Then click next…

Next: Review

Then you need to provide a name for your policy and click the Create Policy.

After that, lets create user group.

Click User groups option in the left window

Provide a name for user group, and check the newly created policy for S3 access policy to this user group.

Now, we need to create User for the group.

For that, click the Users option in the left window and click Add users

Provide a username, and check the Access key -Programmatic access for this user. Since, we are only going to use this user for deploying our app to AWS, Access key system will be the best choice.

Then, add this user to the previously created User group.

Click, Create User

Now, we need to copy the Access Key ID and Secret Access Key in a safe place, these 2 will be used in GitHub actions deployment.

Now, we need to create a repository in GitHub.

Then push our React Application code to this repository.

Now, we are going to add Access ID and Secret Access Key to GitHub’s secret.

For that click on Settings -> Secrets -> Actions -> New Repository secret

Adding Access Key ID

Similarly add Secret Access Key.

Now create a new folder in the project as

.github/workflows

Inside this folder we are going to create a YAML configuration file that contain the deployment instructions to deploy to AWS S3. Inside the folder create main.yml

Refer the below 2 commands for the above 2 setups.

Place the below code into main.yml file

name: Upload Website

on:
push:
branches:
- main

jobs:
Deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2

- name: Setup node
uses: actions/setup-node@v2

- name: Install dependencies
run: npm install

- name: Build static file
run: npm run build

- 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-east-1

- name: Deploy static site to S3 bucket
run: aws s3 sync ./build s3://{bucket_name}

Instead {bucket_name}, replace it with your bucket name.

In the above script:

You can able to view the GitHub Actions deployment process as soon as you commit to main branch.

On Going Process of deployment
Completed deployment
Now, the static site is hosted in the AWS S3

That’s all.. Hope you liked it.

Connect with me on Twitter

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store