How to Deploy a Portfolio App on AWS S3 Using GitHub Actions

Introduction

Deploying applications can be a challenging task, especially if you're new to the world of DevOps and CI/CD (Continuous Integration and Continuous Deployment).

In this article, we will walk you through the process of deploying a Portfolio app on AWS S3 using GitHub Actions. This step-by-step guide is designed to be beginner-friendly, making it easy for anyone to follow along and achieve a successful deployment.

Step-by-Step Guide

Step 1 : Get a Portfolio Application from GitHub

The first step is to get a Portfolio application. If you don’t already have one, you can find many open-source Portfolio apps on GitHub. Here’s how to do it:

1. Search for a Portfolio App:

   • Go to GitHub and use the search bar to look for “Portfolio app”.

   • Browse through the results and choose a repository that fits your needs.

2. Fork the Repository:

   • Once you’ve found a suitable Portfolio app, click on the “Fork” button in the top right corner of the repository page. This creates a copy of the repository in your GitHub account.

3. Clone the Repository:

   • Open your terminal or command prompt.

   • Clone the forked repository to your local machine using the git clone command. Replace YOUR_GITHUB_USERNAME and REPO_NAME with your GitHub username and the repository name.

       git clone https://github.com/YOUR_GITHUB_USERNAME/REPO_NAME.git
     

Step 2 : Build the GitHub Actions Workflow

GitHub Actions is a powerful tool that lets you automate tasks like building, testing, and deploying your applications. We will create a workflow file to handle the deployment process.

1. Navigate to Workflows Directory:

   • In your cloned repository, go to the .github directory. If it doesn’t exist, create it.

   • Inside the .github directory, create a new folder named workflows.

2. Create the Workflow File:

   • Inside the workflows folder, create a new file named deploy.yml.

3. Add Workflow Configuration:

   • Open the deploy.yml file and add the following configuration. This configuration tells GitHub Actions what to do when changes are pushed to the main branch.

       name: Deploy to AWS S3
     
       on:
         push:
           branches:
             - main
     
       jobs:
         deploy:
           runs-on: ubuntu-latest
     
           steps:
             - name: Checkout code
               uses: actions/checkout@v2
     
             - name: Install dependencies
               run: npm install
     
             - name: Build the app
               run: npm run build
     
             - name: Deploy to S3
               run: aws s3 sync ./build s3://YOUR_S3_BUCKET_NAME --delete
     
             - name: Invalidate CloudFront cache
               run: aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"
     

Step 3 : Setup AWS CLI and AWS Login in YAML

To deploy your app to AWS S3, we need to set up the AWS CLI (Command Line Interface) and log in to your AWS account. This allows the workflow to interact with your AWS services.

1. Install AWS CLI:

   • Follow the official AWS CLI installation guide to install AWS CLI on your local machine.

2. Configure AWS CLI:

   • Open your terminal or command prompt.

   • Run the following command to configure the AWS CLI with your AWS credentials. You will need your AWS Access Key ID and Secret Access Key, which you can find in your AWS account.

       aws configure
     

3. Add AWS Credentials to GitHub:

   • Go to your GitHub repository.

   • Click on Settings > Secrets > New repository secret.

   • Add two new secrets: AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY. Use your AWS Access Key ID and Secret Access Key as values.

4. Update Workflow File:

   • Open the deploy.yml file and update it to include the AWS credentials setup:

       - 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: us-east-1
     
             - name: Deploy to S3
               run: aws s3 sync ./build s3://YOUR_S3_BUCKET_NAME --delete
     
             - name: Invalidate CloudFront cache
               run: aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"
     

Step 4 : Run the Project and Share on LinkedIn

Now that everything is set up, it’s time to deploy your application:

1. Push Changes to GitHub:

   • Make sure all your changes are committed.

   • Push your changes to the main branch.

       git add .
       git commit -m "Setup GitHub Actions workflow for deployment"
       git push origin main
     

2. Automatic Deployment:

   • GitHub Actions will automatically run the workflow you created. You can check the progress in the Actions tab of your GitHub repository.

3. Verify Deployment:

   • Once the workflow completes successfully, your Portfolio app will be live on AWS S3.

   • Visit your S3 bucket’s URL to see your deployed app.

Conclusion

Congratulations! You’ve successfully deployed your Portfolio app on AWS S3 using GitHub Actions. This process not only helps you deploy your app but also gives you a solid understanding of CI/CD pipelines, GitHub Actions, and AWS S3.

By following these steps, you’ve automated your deployment process, ensuring your application is always up-to-date with the latest changes.

Keywords

• Portfolio App: A web application showcasing your projects and skills.

• GitHub Actions: A CI/CD platform for automating workflows directly from your GitHub repository.

• AWS S3: Amazon Simple Storage Service, used for storing and retrieving any amount of data.

• CI/CD: Continuous Integration and Continuous Deployment, practices that enable frequent and reliable updates to software.