Continuing from our last article regarding the static website deployment using AWS S3, we will be adding additional features of configuring CI/CD for any changes deployment to our website created in AWS S3.

Requirements

1. You have an AWS Account Created.

2. You have already followed our last article to create the Static website hosting bucket in AWS S3.

Step 1: Add AWS User for using access keys in GitHub Action and Generating Access Keys

We will be creating a new AWS user solely for using it in the GitHub Action. Since, we require this user to perform action only to the AWS S3, we will be attaching the single policy for S3 access.

1. Go to the AWS Console, search for IAM, and select it.

2. From the left side menu, select Users.

   

1. Click on Create user.

   

2. Add the user name in the User name field and click on Next.

   

3. Select Attach policies directly, and search for s3 in the search bar. Select AmazonS3FullAccess.

   

4. Click Next.

5. Click on Create User to create the user.

After the user is created, it will appear in the IAM>Users list.

1. Click on the user you created.

2. Select Security Credentials tab.

   

3. Move to the Access keys section and Click on Create access key.

4. Select Command Line Interface for use case, and check the Confirmation box, and click on Next.

   

   1. Click on Create access key .

   2. Download the csv file and click on Done.

      

Step 2: Pushing your static website code to the GitHub Repo

I have already created a repository where I have pushed the code for the static website. You can find the repository here.

Step 3: Configuring AWS Secrets in GitHub Repository

Our next step will be to add the AWS credentials to the repository's secret vault.

1. Go to your GitHub repository.

2. Select Settings. From the left side menu, Click on Secrets and Variables. Select Action from the listed menu.

   

3. Next, we will be adding the following secrets to our repository:

   1. AWS_ACCESS_KEY_ID

   2. AWS_SECRET_ACCESS_KEY

   3. AWS_REGION

   4. S3_BUCKET

Access key ID, and secret key can be found in the downloaded CSV file that we have from the above step.

AWS region is the region where your S3 bucket is located, and S3 bucket is the name of the bucket where your static site is deployed.

Once you have added the secrets, it should look like this.

Step 4: GitHub Action

Our next step is to write the GitHub action which will be triggered when we push any changes to the master branch. Once the changes are pushed to the master branch, it should push the changes to the AWS S3 and should be reflected on our website.

1. Create a folder named .github in the root directory of your project.

2. Create another new folder inside .github folder named workflows where our workflow will be stored.

3. Create a new file named deploy.yml inside the workflows directory.

4. Add the following content to the deploy.yml file.

name: Deploy static website to S3
on:
  push:
    branches:
      - master
jobs:
  upload:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - 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: ${{ secrets.AWS_REGION }}
      - name: Upload code to S3
        run: aws s3 sync src s3://${{secrets.S3_BUCKET}}

Here's a simple explanation of the workflow.

1. We are creating a workflow that gets triggered whenever new changes are pushed to the master branch.

2. We have one job in the workflow named upload which does the following actions.

   1. It checks out the code in the first step.

   2. It configures the AWS Credentials using the community-developed GitHub action.

   3. It uploads our code using the command
      aws s3 sync src s3://${{secrets.S3_BUCKET}}
      We are using aws s3 sync NAME_OF_FOLDER s3://BUCKET-NAME to sync our folder named src.
      Change src to your folder name which stores all static content files. If it's a root directory, just use . instead of the src.

Now, whenever you make any changes to your code, and is pushed to master branch, it will get auto-deployed and changes can be seen and reflected on your website.

Thank you for reading this article. Hope you learned something from it and can use it in real life. 🎉🎉🎉