Day 78: Project-7 (S3 & GitHub Actions)

Introduction

The project's primary objective is to successfully deploy a Portfolio application onto Amazon Web Services' Simple Storage Service (AWS S3) through the seamless integration of GitHub Actions.

This dynamic combination empowers you to efficiently manage the development, testing, and deployment phases of your Portfolio app while benefiting from the robust version control capabilities of GitHub. By employing GitHub Actions, the project streamlines the deployment process, ensuring that changes and updates are automatically propagated to your AWS S3-hosted Portfolio, ultimately resulting in a more efficient and agile development pipeline.

---

What is GitHub Action?

GitHub Actions is a powerful automation and CI/CD (Continuous Integration/Continuous Deployment) platform integrated directly into GitHub repositories. It allows developers and teams to create custom workflows that automate various aspects of software development, testing, and deployment processes. These workflows can be triggered by specific events, such as code commits or pull requests, and they are defined using YAML files stored within the repository.

---

Task-01

• Get a Portfolio application from GitHub.

• Build the GitHub Actions Workflow

• Setup AWS CLI and AWS Login to sync the website to S3

Prerequisites:

1. AWS S3 bucket to host the Portfolio app.

2. GitHub repository containing Portfolio app code.

3. IAM role to access S3

---

To deploy a Portfolio app on AWS S3 using GitHub Actions, you can set up a workflow that automates the build and deployment process. Here are the general steps to achieve this:

Step 1: Configure AWS S3 Bucket

Create an S3 bucket in AWS where you want to host your Portfolio app.

Enter the unique name of the bucket.

Unblock public access

Scroll down and create a bucket

Make sure your bucket is configured for static website hosting. You'll need to define an index document (e.g., index.html) and an error document (e.g., error.html) in the S3 bucket properties.

Go to the Properties of the S3 bucket.

Scroll down and edit static website hosting

Enable Static website hosting

and save changes

The website is available at the AWS Region-specific website endpoint of the bucket.

Now, we will also need to give Bucket's policy permission in S3

Go to Permissions

Scroll down and enter the policy.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mys3amin/*"
        }
    ]
}

Once done, save the change

Step 2: Configure AWS IAM Access Credentials

Go to IAM and create a new IAM user with S3 access permissions

Proceed further and select the permissions

Review the roles and proceed further to create.

User-created successfully

Generate an AWS access key and secret key for the user.

Go to the Security credentials of the user

Scroll down, create access keys and select CLI

Click Next, create the and download the key.

You can also refer to the blog for detailed steps on how to create Access keys- Day 51: AWS Access Keys & CLI

Step 3: GitHub Repository Setup

Make sure your Portfolio app code is stored in a GitHub repository.

Step 4: Store AWS Credentials in GitHub Secrets

To do so, go to the settings of the repo --> Secrets & variables --> Actions

Enter the ID and secret keys

Step 5: GitHub Actions Workflow

In your GitHub repository, create a .github/workflows directory if it doesn't exist.

Inside the .github/workflows directory, create a YAML file (e.g., main.yml) to define your workflow.

Step 6: Workflow YAML Configuration

In this example YAML file, the workflow is triggered on pushes to the main branch.

name: Portfolio Deployment

on:
  push:
    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.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: us-east-1

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

It checks out your code, configures AWS credentials, builds your Portfolio app (replace with your build commands), and deploys the built files to the S3 bucket.

Step 7: Push to GitHub

Commit and push the changes to .github/workflows/main.yml file to your GitHub repository.

Step 8: GitHub Actions Execution

GitHub Actions will automatically execute your workflow when you push changes to your main branch.

Your Portfolio app should now be automatically built and deployed to your AWS S3 bucket whenever you push changes to your repository's main branch.

The files are also reflected on the S3 bucket.

Step 9: Portfolio App deployed successfully

The Portfolio App has been deployed successfully and can be accessed via Bucket hosting (Static website hosting) link that we configured in the S3 buckets' properties.

---

Conclusion:

In this projectwe have gone through the capabilities of AWS S3 and GitHub Actions to streamline the deployment of a Portfolio application. The integration of GitHub Actions enabled the creation of a robust CI/CD pipeline that automates the build and deployment processes whenever changes are pushed to the main branch of the GitHub repository. The establishment of an AWS S3 bucket for hosting the Portfolio, coupled with the configuration of AWS IAM access credentials, ensures secure and efficient deployment. With these tools in place, the project successfully demonstrated how to harness the power of automation and cloud-based storage to maintain an agile and responsive development pipeline for deploying web applications. The Portfolio app is now readily accessible through its AWS S3-hosted static website.

Hope you like my post. Don't forget to like, comment, and share.