Day 86 of 90 Days of DevOps Challenge: Deploying a Portfolio App on AWS S3 Using GitHub Actions

In today’s tech landscape, deploying applications efficiently and reliably is crucial. With the rise of CI/CD practices, automation tools like GitHub Actions allow developers to streamline their deployment processes directly from their GitHub repositories. In this blog post, we will walk through the steps to deploy a portfolio application on AWS S3 using GitHub Actions, enabling a seamless and automated deployment experience.

---

Project Overview

This project aims to deploy a portfolio application hosted on AWS S3. We will utilize GitHub Actions to automate the Continuous Integration and Continuous Deployment (CI/CD) process, allowing for easy updates and management of our portfolio site.

---

Key Components

1. AWS S3

Amazon Simple Storage Service (S3) is an object storage service that provides industry-leading scalability, data availability, security, and performance. S3 is perfect for hosting static websites, including portfolio applications.

2. GitHub Actions

GitHub Actions is a powerful automation tool integrated directly into GitHub that enables you to create workflows for CI/CD. It allows developers to automate tasks like testing, building, and deploying their applications.

---

Implementation Steps

Step 1: Get the Portfolio Application

1. Clone the Repository: Start by obtaining the portfolio application code from GitHub.

    git clone <your-portfolio-app-repo-url>
    cd <your-portfolio-app-directory>
   

Step 2: Set Up AWS CLI

1. Install AWS CLI: If you haven't installed the AWS CLI yet, follow the instructions on the official AWS documentation.

2. Configure AWS CLI: Configure the AWS CLI with your credentials by running the following command:

    aws configure
   

   You will need to input your AWS Access Key, Secret Key, region, and output format.

Step 3: Create an S3 Bucket

1. Create an S3 Bucket: You need to create an S3 bucket to host your portfolio application. You can do this via the AWS Management Console or using the AWS CLI:

    aws s3api create-bucket --bucket <your-bucket-name> --region <your-region> --create-bucket-configuration LocationConstraint=<your-region>
   

   Replace <your-bucket-name> with a unique name for your bucket and <your-region> with your AWS region.

Step 4: Build the GitHub Actions Workflow

1. Create the Workflow File: In your portfolio application directory, create a .github/workflows directory if it doesn't already exist. Inside this directory, create a new YAML file (e.g., deploy.yml).

2. Add Workflow Configuration: Edit the deploy.yml file and add the following configuration:

    name: Deploy to S3
   
    on:
      push:
        branches:
          - main  # Change to your main branch
   
    jobs:
      deploy:
        runs-on: ubuntu-latest
   
        steps:
          - name: Checkout code
            uses: actions/checkout@v2
   
          - name: Set up AWS CLI
            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: <your-region>
   
          - name: Sync files to S3
            run: |
              aws s3 sync . s3://<your-bucket-name> --exclude '.git/*' --exclude 'node_modules/*' --exclude '*.md'
   

   Replace <your-region> with your AWS region and <your-bucket-name> with your S3 bucket name.

Step 5: Configure GitHub Secrets

1. Add AWS Credentials: For security reasons, you should store your AWS credentials in GitHub Secrets. Go to your GitHub repository settings, then to "Secrets" and add the following secrets:

   • AWS_ACCESS_KEY_ID

   • AWS_SECRET_ACCESS_KEY

Enter your AWS access key and secret key in their respective fields.

Step 6: Push Changes and Deploy

1. Commit and Push: Commit your changes and push them to the main branch of your GitHub repository.

    git add .
    git commit -m "Set up GitHub Actions workflow for S3 deployment"
    git push origin main
   

2. Check the GitHub Actions Tab: After pushing your changes, navigate to the "Actions" tab in your GitHub repository to see your workflow running. If everything is set up correctly, your portfolio application should be deployed to your S3 bucket.

Step 7: Access Your Portfolio App

1. Access the S3 Bucket: Once the deployment is complete, you can access your portfolio app by visiting the URL of your S3 bucket. The format is typically:

    http://<your-bucket-name>.s3-website.<your-region>.amazonaws.com
   

---

Conclusion

By following the steps outlined in this blog post, you can successfully deploy your portfolio application on AWS S3 using GitHub Actions. This project not only highlights your ability to work with cloud services but also demonstrates your proficiency in CI/CD practices. Automating the deployment process will save you time and ensure that your portfolio is always up-to-date with the latest changes.