DevOps (Day-86): Project-7 Portfolio App

Dear Learners in Today's article we will deploying a Portfolio app on AWS S3 Bucket using GitHub.

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.

Pre-requisties:-

Get a Portfolio application from GitHub:

1 Get the portfolio code form GitHub and clone it to your local or AWS Server.

Get the portfolio code form GitHub and clone it to your local or AWS Server Diagram.

Get the portfolio code form GitHub and clone it to your local or AWS Server Diagram.

Build the GitHub Actions Workflow

1 Choose the action option on the project code repository in GitHub. Then choose to set up a new workflow.

2 Write the YAML file required 0 setup the workflow in GitHub actions.

name: Portfolio Deploymen


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 --deletet

Write the YAML file required 0 setup the workflow in GitHub actions Diagram.

Setup AWS CLI and AWS Login to Sync the website to S3 (to be done as a part of YAML).

1 As we have set up the AWS credentials in the YAML file. Let's Provide the credentials in GitHub.

As we have set up the AWS credentials in the YAML file. Let's Provide the credentials in GitHub Diagram.

As we have set up the AWS credentials in the YAML file. Let's Provide the credentials in GitHub Diagram.

2 Setup the AWS S3 with public access and static website hosting.

Setup the AWS S3 with public access and static website hosting Diagram.

3 Provide the Bucket permission in S3.

Provide the Bucket permission in S3 Diagram.

If you need the Syntax you can direct copy form these:-

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

Change the index.html file to run the workflow in GitHub action and run the portfolio website.

1 Change the index.html file to run the workflow in GitHub action and run the portfolio website. Add, commit and push the changes to the repository in GitHub.

Change the index.html file to run the workflow in GitHub action and run the portfolio website Diagram.

2 The Workflow is now executed in the GitHub action workflow.

3 The Website is now Active.

Thank you for reading!! Hope you find this helpful.

#day86challenge#90daysofdevops

Always open to suggestions..!!

~ Manoj Bhamidipati 🙂

Next Topic:

Day 87: Discuss the Argo CD in Kubernetes.