Day 86 - Deploying a Portfolio App on AWS S3 using GitHub Actions 🌐✨🚀

Welcome to Day 86 of the #90DaysOfDevOps Challenge! 🚀

Today, we're diving into a new project where we’ll automate the deployment of a Portfolio app on AWS S3 using GitHub Actions. Let’s walk through the hands-on steps to achieve this:

Project Description

In this project, our goal is to deploy a Portfolio app on AWS S3 using GitHub Actions for CI/CD. This automation will streamline our deployment process, ensuring any changes to our GitHub repository trigger automatic updates to our live website. 🌐

Hands-on Project: Automating Portfolio Deployment on AWS S3 using GitHub Actions

Step 1: Get the Portfolio Application from GitHub

• Clone the Portfolio application repository to your local environment or directly on your AWS instance where we'll set up AWS S3 and GitHub Actions. 📥

Step 2: Build the GitHub Actions Workflow

• Navigate to your GitHub repository and go to the "Actions" tab.

• Create a new workflow file (e.g., .github/workflows/deploy-to-s3.yml) and define the deployment steps using the following YAML:

name: Deploy to AWS S3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Deploy to S3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --follow-symlinks --delete --exclude '.git/*' --size-only
        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: 'us-east-1'
          SOURCE_DIR: './'

Step 3: Setup GitHub Secrets for AWS CLI

• Go to your repository’s Settings > Secrets.

• Add the following secrets:

  • AWS_S3_BUCKET: Your AWS S3 bucket name.

  • AWS_ACCESS_KEY_ID: AWS Access Key ID.

  • AWS_SECRET_ACCESS_KEY: AWS Secret Access Key. 🔑

    

Step 4: Setup AWS S3 with Public Access and Static Website Hosting

• Ensure your AWS S3 bucket is set up for static website hosting:

  • Enable static website hosting in the S3 bucket properties.

  • Set the index document (e.g., index.html) for your Portfolio app. 🌐

    

Step 5: Update the Index.html File and Run the Workflow

• Make a change in your Portfolio app’s index.html file.

• Commit and push the changes to your GitHub repository to trigger the GitHub Actions workflow. 🔄

  

Step 6: Execute the GitHub Actions Workflow

• GitHub Actions will automatically deploy your Portfolio app to the specified AWS S3 bucket.

• Monitor the workflow execution in the GitHub Actions tab to ensure it completes successfully. 🕵️‍♂️

  

Step 7: Verify the Portfolio app is Deployed and Accessible

• Access your Portfolio app’s URL in a web browser to verify deployment.

• Confirm that the GitHub Actions workflow has copied your app files into the S3 bucket. 🖥️

  

Congratulations on completing Day 86 of the #90DaysOfDevOps Challenge! 🎉

By automating the deployment of your Portfolio app on AWS S3 using GitHub Actions, you’ve enhanced your CI/CD capabilities and streamlined your deployment process. Stay tuned for tomorrow’s challenge, where we’ll explore another exciting DevOps project! 💪