Hosting a Static Site with CloudFront and S3 Using GitHub Actions

Recently, I worked on a project to host a React application statically using S3 and CloudFront. In this blog, I will explain the architecture and the setup of the CICD pipeline.

Architecture Overview

The architecture I implemented consists of the following components:

• S3 Bucket: Hosts the static files of the React application. S3 is ideal for serverless static site hosting.
• CloudFront: A CDN (Content Delivery Network) that delivers content from S3 with high performance. It uses edge locations around the world to serve content closer to users, improving performance.
• GitHub Actions: Used to build and deploy the React application, automating the CICD pipeline.

Setting Up the CICD Pipeline

The CICD pipeline is built using GitHub Actions. Whenever code is pushed to the repository, the following processes are executed:

1. Build React App: Build the application using the npm run build command to generate the static files.
2. Deploy to S3: Upload the built files to S3.
3. Invalidate CloudFront Cache: Invalidate the CloudFront cache to ensure the new version of the content is served.

GitHub Actions Workflow File

Here is a snippet of the GitHub Actions workflow file used:

name: Upload files to S3

on:
  push:
    branches:
    - main

env:
  MY_AWS_REGION: '<YOUR AWS REGION>'
  AWS_ROLENAME: '<YOUR AWS ROLE>'
  AWS_S3_BUCKET: '<YOUR S3 BUCKET>'
  SOURCE_DIR: './build'

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '16'

    - name: Install dependencies
      run: npm install

    - name: Build project
      run: npm run build

    - name: Configure AWS credentials with IAM Role
      uses: aws-actions/configure-aws-credentials@v4
      with:
        role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/${{ env.AWS_ROLENAME }}
        aws-region: ${{ env.MY_AWS_REGION }}
    - name: Sync files to S3
      run: |
          aws s3 sync ${{ env.SOURCE_DIR }} s3://${{ env.AWS_S3_BUCKET }}/ --delete --exclude '.*git*'
    - name: Invalidate CloudFront Cache
      run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/*"

Configuring S3 and CloudFront

• Creating an S3 Bucket: Create a bucket and enable static website hosting. Configure the bucket to be accessible only through CloudFront for security.
• Setting Up CloudFront: Specify the S3 bucket as the origin and configure custom domains and SSL certificates as needed.

Conclusion

With this setup, you can host a React application on S3 and CloudFront, providing fast and secure static site hosting. Additionally, the CICD pipeline with GitHub Actions automates the build and deployment process.

For detailed code and configuration, check out the GitHub repository. GitHub Repository Here

I hope this blog helps you with your projects. If you have any questions or feedback, feel free to leave a comment!