Day 86 - Deploying a Portfolio App on AWS S3 with GitHub Actions

Introduction

In the ever-evolving landscape of web development, deploying applications efficiently and securely is paramount. This project focuses on deploying a Portfolio app on Amazon Web Services (AWS) S3 using GitHub Actions for Continuous Integration and Continuous Deployment (CI/CD). GitHub Actions will be employed to automate the build and deployment processes, providing a streamlined workflow for developers.

Task-01: Get a Portfolio Application from GitHub

The first step in our project is to obtain a Portfolio application from GitHub. This could be your own custom portfolio or a template that suits your preferences. GitHub hosts a plethora of portfolio templates that you can explore and choose from. Once you've identified the repository you want to use, fork or clone it to your own GitHub account.

Build the GitHub Actions Workflow

GitHub Actions revolves around workflows, which are a series of automated steps executed in response to a triggering event, such as a push to the repository. To build the GitHub Actions Workflow for our Portfolio app deployment, create a YAML file named .github/workflows/deploy.yml in the root of your repository. This file will define the steps necessary for the automated deployment process.

name: Deploy to AWS S3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout Repository
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 14

    - name: Install Dependencies
      run: npm install

    - name: Build Portfolio
      run: npm run build

    - name: Deploy to AWS S3
      run: |
        aws s3 sync dist/ s3://your-s3-bucket-name
      env:
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}        

Ensure to replace your-s3-bucket-name with the name of your AWS S3 bucket.

Setup AWS CLI and AWS Login as Part of YAML

To interact with AWS services from GitHub Actions, you need to set up AWS CLI and login credentials. This can be achieved as part of the YAML file. Add the following steps at the beginning of the workflow:

- name: Configure AWS CLI
  run: |
    aws configure set aws_access_key_id ${{ secrets.AWS_ACCESS_KEY_ID }}
    aws configure set aws_secret_access_key ${{ secrets.AWS_SECRET_ACCESS_KEY }}
    aws configure set default.region us-east-1
    aws configure set default.output json

- name: Login to AWS
  run: aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin ${{ secrets.AWS_REGISTRY_URL }}        

Ensure to replace ${{ secrets.AWS_ACCESS_KEY_ID }} and ${{ secrets.AWS_SECRET_ACCESS_KEY }} with your AWS access key ID and secret access key, respectively.

By following these steps, you'll have a robust GitHub Actions workflow set up to automatically deploy your Portfolio app to AWS S3. This integration not only saves time but also ensures a consistent and reliable deployment process for your projects. Embrace the power of automation and make your development workflow more efficient with GitHub Actions and AWS S3. Happy coding!.

I'm confident that this article will prove to be valuable, helping you discover new insights and learn something enriching .

thank you : )