Automate Deployment to AWS with GitHub Actions

In this blog, you'll learn how to automate the deployment of a static website, developed using frameworks like Vue or others, to Amazon S3. We'll cover the process of setting up AWS to host a static site and show how to configure GitHub Actions to automatically deploy updates to S3 with every push to your repository. By the end of this tutorial, you'll have a fully automated deployment pipeline, ensuring your website stays up-to-date effortlessly.

Setting Up AWS for Static Hosting

To host a static website on AWS, you must set up an S3 bucket, configure it to host static files and manage the appropriate permissions. S3 is perfect for hosting static sites as it offers low-cost storage, high availability, and scalability without needing to manage servers.

Creating a Bucket

1. Log in to your AWS Management Console.

2. Navigate to the S3 service and click Create Bucket.

3. Provide a globally unique name for your bucket (e.g., your-static-website), select the AWS region, and keep the default settings for the rest.

4. Click Create bucket.

Use it for Hosting a Static Website

1. Open the bucket you created and go to the Properties tab.

2. Scroll to the Static website hosting section, click Edit, and select Enable.

3. Specify the index document (e.g., index.html) and an error document (e.g., 404.html).

4. Save the changes.

Public Access for Static Website

To make your website accessible, you need to allow public access to your S3 bucket using a bucket policy. Here’s how to do it:

1. Block Public Access Settings:

   • Go to your bucket settings and disable Block Public Access. This is necessary because S3 blocks all public access by default.

2. Bucket Policy:

   • Add a bucket policy to grant public read access to the objects in your bucket.

Example bucket policy:

    jsonCopy code{
      "Version": "2012-10-17",
      "Statement": [
        {
          "Effect": "Allow",
          "Principal": "*",
          "Action": "s3:GetObject",
          "Resource": "arn:aws:s3:::your-bucket-name/*"
        }
      ]
    }

This allows anyone to access the objects (like your website files) via HTTP, without exposing other permissions unnecessarily.

Get Access Keys for GitHub Actions

1. Navigate to IAM (Identity and Access Management) in the AWS Console.

2. Create a new user with Programmatic access to generate access keys.

3. Attach the AmazonS3FullAccess policy or create a custom policy to give permissions only to the S3 bucket you're using.

4. After creating the user, download the Access key ID and Secret access key. You'll use these in the GitHub Actions workflow to deploy your website to S3.

This sets up your AWS environment for static hosting, allowing you to move on to automating deployment using GitHub Actions.

Setting Up GitHub Actions Workflow

GitHub Actions allows you to automate the deployment of your static website to AWS S3 with every push to your repository. By defining a workflow, you can ensure that your site is automatically built and deployed once changes are pushed to your main branch.

Adding the Workflow

To begin, create a new directory in your repository called .github/workflows and add a YAML file (e.g., deploy.yml). This file contains the instructions for the GitHub Actions pipeline to build and deploy your website.

name: Build and Deploy to S3

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

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

    - name: Install dependencies
      run: npm install

    - name: Build the project
      run: npm run build

    - name: Configure AWS credentials
      uses: aws-actions/configure-aws-credentials@v2
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: 'ap-northeast-1'

    - name: Sync to S3
      run: aws s3 sync ./dist s3://$S3_BUCKET_NAME --delete
      env:
        AWS_REGION: 'ap-northeast-1'
        S3_BUCKET_NAME: ${{ secrets.S3_BUCKET_NAME }}

Adding Environment Variables

To secure sensitive information like AWS credentials and bucket names, you'll need to use GitHub's Secrets feature. Follow these steps to configure environment variables:

1. In your GitHub repository, navigate to Settings.

2. Under the Security section, select Secrets and Variables\> Actions.

3. Click New Repository Secret and add the following secrets:

   • AWS_ACCESS_KEY_ID: Your AWS access key ID.

   • AWS_SECRET_ACCESS_KEY: Your AWS secret access key.

   • S3_BUCKET_NAME: The name of your S3 bucket.

With this setup, each time you push changes to the main branch, the workflow will automatically install dependencies, build your project, and sync the built files to the S3 bucket, making your static website live.

This completes the automation setup for deploying your site to AWS S3 with GitHub Actions.

---

With your AWS S3 bucket now set up for static hosting, you are ready to automate deployments using GitHub Actions. Since S3 only supports HTTP for static website hosting, we'll use CloudFront to serve the site over HTTPS. Next, we will cover how to use CloudFront for content delivery (CDN), Route 53 for DNS management, and AWS Certificate Manager to obtain SSL certificates.

Stay tuned!