Deploying a Web App on AWS S3 Using GitHub Actions

What is GitHub Actions?

GitHub Actions is a powerful continuous integration and continuous delivery (CI/CD) platform provided by GitHub. It enables you to automate your software development workflows, allowing you to build, test, and deploy code directly from your GitHub repositories.

Why use GitHub Actions to deploy to AWS S3?

There are many benefits to using GitHub Actions to deploy to AWS S3, including:

• Integration with GitHub: GitHub Actions is tightly integrated with GitHub repositories, making it seamless to use for developers who already host their code on GitHub.
• YAML Configuration: Workflows are defined using simple YAML files, making it easy to understand and version-controlled along with your codebase.
• Event-Driven: Workflows can be triggered based on various events, such as code pushes, pull requests, or other custom events in your repository.
• Extensibility: A rich ecosystem of community-created actions is available, allowing you to extend the functionality of your workflows.
• Scalability: GitHub provides scalable infrastructure to run your workflows, ensuring high availability and performance.

Steps to deploy your web app to AWS S3 using GitHub Actions

Step 1: Create a new GitHub repository

Create a new GitHub repository where you will host your web app code.

Step 2: Add your web app code to the repository

Add your web app code to the repository and commit the changes.

Step 3: Create an S3 bucket

Create an S3 bucket to store your web app files.

Step 4: Configure bucket policy for public access

To allow public access to the objects in your S3 bucket, you need to set up a bucket policy. Navigate to the bucket’s properties, select “Permissions,” and click on “Bucket Policy.” Add the following policy:

{  
    "Version": "2012-10-17",  
    "Statement": [  
        {  
            "Sid": "PublicReadForGetBucketObjects",  
            "Effect": "Allow",  
            "Principal": "*",  
            "Action": "s3:GetObject",  
            "Resource": "arn:aws:s3:::<bucket name>/*"  
        }  
    ]  
}

Step 5: Create an IAM user and generate security credentials

To securely interact with AWS services from GitHub Actions, you need an IAM user with sufficient permissions. If you already have an IAM user, you can use it; otherwise, create a new one.

Assign the necessary IAM policies to this user, allowing access to S3 and any other services required for your deployment.

Generate the IAM user’s access key and secret key, as you will need them later to configure GitHub Secrets.

Step 6: Set up GitHub Secrets for AWS credentials

Go to your GitHub repository, click on “Settings,” then “Secrets.” Here, click on “New Repository Secret” to add your AWS access key and secret key as secrets named AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY, respectively.

Step 7: Create the GitHub Actions workflow

Create a new file named .github/workflows/main.yml and add the following content:

name: Deploy to AWS S3  
on:  
  push:  
    branches:  
      - main  
  
jobs:  
  deploy:  
    runs-on: ubuntu-latest  
  
    steps:  
      - name: Checkout  
        uses: actions/checkout@v1  
  
      - 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 . s3://<bucket-name> --delete

Be sure to replace <bucket-name> with the name of your S3 bucket.

Step 8: Commit changes and trigger deployment

Commit the `.github/workflows/main.

Hurray, you have successfully deployed your web app on AWS S3 using GitHub Actions ✨