Project 7 - Day 86 Portfolio app on AWS S3 using GitHub Actions

Project 7 - Day 86 Portfolio app on AWS S3 using GitHub Actions

Project Description

The project involves deploying a Portfolio app on AWS S3 using GitHub Actions. Git Hub actions allow you to perform CICD with GitHub Repository integrated.

Create a repository on GitHub

A repo named my-portfolio is created, from this repo we will deploy a portfolio application

Clone the code to the local and push it to this repo

git clone https://github.com/rjthapaa/tws-portfolio.git

Create an S3 bucket

Set Permissions

Set the bucket permissions to allow public access to your website.

Go to the “Permissions” tab and click on “Bucket Policy” and edit

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket name>/*"
        }
    ]
}

Replace the bucket name with your actual S3 bucket name

For the bucket policy refer to the link

Creating an IAM USER with S3 policy access

Navigate to IAM and create a user with AmazonS3fullaccess

Once the USER is created, under Security credentials, Create access keys and download the credentials

Set Up GitHub Secrets for AWS Credentials

Move to GitHub and open the portfolio repo > settings > Security

"Secrete and variables" > Actions

Click on "New Repository Secret" to add your AWS IAM USER access key and secret key as secrets named ACCESS_KEY_ID and SECRET_ACCESS_KEY, respectively.

Add the Access and Secret access key ID

Our Key IDs are added to GitHub actions

Create the GitHub Actions

In your GitHub repository, navigate to the "Actions" tab and click on "Set up a workflow yourself."

You will be directed to a new file named .github/workflows/main.yml, and add the following content:

name: Portfolio Deployment    #Name of the deployment
on:
  push:                       #Trigger the workflow when changes are pushed
    branches:
    - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v1

    - name: Configure AWS Credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.ACCESS_KEY_ID }}      #Actions keys
        aws-secret-access-key: ${{ secrets.SECRET_ACCESS_KEY }}
        aws-region: us-east-1

    - name: Deploy static site to S3 bucket
      run: aws s3 sync . s3://rjthapaa-portfolio-bucket --delete #Add bucket name

commit the changes and the actions should trigger the S3 bucket.

Enable Static Website Hosting for the S3 Bucket

rjthapaa-portfolio-bucketInfo > Properties > Static website hosting > Edit

Click on Save changes

Access Your Portfolio Website by using the endpoint