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
- Check the Enable option for static web hosting
- add index.html as Index document
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.
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
Similarly add Secret Access Key.
Now create a new folder in the project as
.github/workflowsInside 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:
- Whenever a new commit done to main branch the pipeline will start to work.
- The main branch will be checked out
- Node environment will be created
- Node dependencies for the react app will be installed using npm install command.
- Then npm run build command will build the react app into a static app by creating static files inside a folder called build.
- After that, the GitHub action workflow will logged into the AWS S3 bucket using the credentials provided in the secrets.
- Then, static files which is inside the build folder will be synced with our created bucket.
You can able to view the GitHub Actions deployment process as soon as you commit to main branch.
That’s all.. Hope you liked it.
Connect with me on Twitter
