Deploying a static React application to Amazon S3 using GitHub Actions

  1. Check the Enable option for static web hosting
  2. add index.html as Index document
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Bucket-Name/*"
]
}
]
}
Click the IAM service
Click Policies in the Left side of your window
{
"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}/*"
]
}
]
}
Adding Access Key ID
.github/workflows
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}
  • 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.
On Going Process of deployment
Completed deployment
Now, the static site is hosted in the AWS S3

--

--

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