As I continue my journey through the Cloud Resume Challenge, I’ve completed the first two phases where I deployed my portfolio website using AWS services like S3 and CloudFront and integrated a dynamic view counter with Lambda and DynamoDB.

In this phase, I’ve implemented Continuous Integration/Continuous Deployment (CI/CD) using GitHub Actions to automate the deployment of my website every time I push updates to the repository. This ensures that my website is always live with the latest changes without manual intervention.

What is CI/CD?

Continuous Integration (CI) and Continuous Deployment (CD) are key principles of modern DevOps practices. Here’s a quick breakdown:

Continuous Integration (CI): This involves automating the process of integrating code changes from multiple contributors into a shared repository. With CI, each code commit triggers automated builds and tests to ensure that the codebase is stable.
Continuous Deployment (CD): CD takes it a step further by automatically deploying the integrated code to production environments. Once the code passes all necessary tests, it is automatically delivered to production, ensuring that updates are quickly available to users.

By using CI/CD pipelines, developers ensure faster, more reliable deployments while minimizing the risk of errors and improving collaboration between teams.

In this blog, I’ll detail how I set up a CI/CD pipeline to deploy my website hosted on an AWS S3 bucket using GitHub Actions. Let’s dive into the setup and challenges I faced.

Prerequisites:

Before setting up the CI/CD pipeline, ensure that you have the following:

AWS Account – With an S3 bucket configured to host your portfolio website.
GitHub Account – Repository where your website code is stored.
Basic understanding of Git, GitHub Actions, and AWS S3.

Architecture Diagram

(@copyright This architecture diagram is made by me ask for permissions before using)

Step 1: Creating a GitHub Repository and Pushing Website Code

First, I created a GitHub repository to store my website code and connect it with the CI/CD pipeline. Here’s how you can do the same:

Create a New GitHub Repository:
- Go to GitHub and log in.
- Click on the New Repository button.
- Name your repository, for example, portfolio-website, and set it as public or private according to your preference.
- Initialize the repository with a README file and add a .gitignore for any sensitive or unnecessary files you don’t want to track (e.g., node_modules for JavaScript projects).
Push Your Website Code:
- On your local machine, open the terminal and navigate to the folder where your website code is stored.
- Initialize Git and link your local repository to GitHub:
```
git init
git remote add origin https://github.com/username/portfolio-website.git
git add *
git commit -m "Initial commit"
git push origin main
```
- This uploads your website code to GitHub and sets the foundation for the next step.

Step 2: Setting Up GitHub Actions for CI/CD

To automate the deployment, I used GitHub Actions. Here’s how I configured the workflow:

Open the Project in a Code Editor:

I opened my project in Visual Studio Code and created a new folder named .github/workflows. This is where GitHub Actions workflow files are stored.

Creating the CI/CD Workflow File:

Inside the workflows folder, I created a file named front-end-cicd.yml and added the following code:

name: Upload Website files to S3 bucket

on:
  push:
    branches:
    - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master
    - uses: jakejarvis/s3-sync-action@master
      with:
        args: --acl public-read --follow-symlinks --delete
      env:
        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: 'ap-south-1'
        SOURCE_DIR: 'public'

Step 3: Explaining the Workflow Code

Trigger on Push to Main Branch:
The workflow is triggered every time I push changes to the main branch:
```
on:
  push:
    branches:
    - main
```
Runs on Ubuntu Latest:
The job runs on a virtual machine using the latest version of Ubuntu.
```
runs-on: ubuntu-latest
```
Steps:
- Checkout Repository: The workflow first checks out the code from the repository.
```
- uses: actions/checkout@master
```
- Sync Files to S3: The workflow uses the jakejarvis/s3-sync-action to sync the files from the local repository to the S3 bucket. This is where the actual deployment happens.
```
- uses: jakejarvis/s3-sync-action@master
  with:
    args: --acl public-read --follow-symlinks --delete
```
  - Secrets and Environment Variables: To ensure security, the AWS Access Keys and S3 bucket details are stored in GitHub secrets and referenced in the workflow. This prevents sensitive information from being exposed in the code.
```
env:
  AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  AWS_REGION: 'ap-south-1'
  SOURCE_DIR: 'public'
```

Step 4: Committing and Pushing the Workflow

Once the workflow file was added, I committed and pushed the changes to my GitHub repository:

    git add .
    git commit -m "Added CI/CD pipeline"
    git push origin main

Step 5: Setting Secrets in GitHub

When the workflow was triggered, I encountered the following error:

    AWS_S3_BUCKET is not set.

This meant that I hadn’t set up my GitHub Secrets properly. Here’s how I resolved it:

Generate AWS Access Keys:
- I created an IAM user with programmatic access and attached the required S3 permissions (AmazonS3FullAccess).
- In the IAM console, I generated an Access Key ID and Secret Access Key.
Add Secrets to GitHub:
- I navigated to my GitHub repository > Settings > Repository Secrets > Actions and added the following secrets:
  - AWS_S3_BUCKET: The name of my S3 bucket.
  - AWS_ACCESS_KEY_ID: The access key generated in IAM.
  - AWS_SECRET_ACCESS_KEY: The secret access key generated in IAM.

Step 6: Fixing ACL Errors

After resolving the secrets issue, I faced another error:

upload failed: An error occurred (AccessControlListNotSupported)

This was because I had blocked all public access in my S3 bucket, and the workflow was trying to set files as public (--acl public-read). To resolve this:

Enable ACLs in S3:
I navigated to the S3 bucket permissions and enabled ACLs (Access Control Lists).
Update the Workflow File:
As we have set the access keys, so the github actions will try to access using it which is not public access. that's why I replaced public-read with private in the workflow file to avoid further access issues:
```
args: --acl private --follow-symlinks --delete
```

Step 7: Successful Deployment

After making these changes, the CI/CD pipeline ran successfully! Every time I push a change to the main branch, GitHub Actions automatically deploys my website to the S3 bucket.

Challenges Faced:

Secret Configuration:
Forgetting to set up the necessary secrets in GitHub caused the first error. Ensuring secrets are properly configured is essential when working with cloud services and CI/CD pipelines.
Access Control Errors:
The public-read setting in the workflow caused an error because the S3 bucket had BlockPublicAccess enabled. Changing the workflow to use private solved the issue.
AWS Permissions:
Having the wrong permissions on the IAM user initially caused errors in uploading to S3. Ensuring the IAM user has the correct S3 permissions is crucial for deployment pipelines.

What I Learned From This:

Continuous Integration & Continuous Deployment (CI/CD):
By automating the deployment process using GitHub Actions, I now understand how vital CI/CD is for continuous development. It eliminates manual deployment steps, reduces the chances of errors, and ensures the latest version of my website is always live.
Working with GitHub Actions:
GitHub Actions is a powerful tool for automating workflows. From testing to deployment, it provides flexibility and seamless integration with AWS.
Creating and Using AWS Secrets:
I learned how to securely store and use AWS credentials in GitHub. It’s important to keep sensitive data out of codebases and leverage tools like GitHub Secrets for security.
AWS S3 Permissions:
Configuring the correct permissions in S3 is crucial for deployment. Understanding how ACLs and Bucket Policies work is a vital part of deploying static websites securely on AWS.

Conclusion:

Setting up a CI/CD pipeline with GitHub Actions to automatically deploy my portfolio website to AWS S3 was an exciting and educational experience. Not only did I deepen my understanding of CI/CD, but I also learned how to troubleshoot and resolve real-world errors related to access controls and security. With this all I learned

If you're looking to streamline your deployment process, I highly recommend trying out GitHub Actions. It's a powerful tool for automating your cloud workflows.

Feel free to check out my previous blogs on setting up AWS S3, integrating Lambda with DynamoDB, and stay tuned for more posts on my journey through the Cloud Resume Challenge!

Search This Blog

My AWS Cloud Journey

Automating Frontend Deployment with GitHub Actions: A CI/CD Pipeline for AWS S3