🚀DEVOPS Project 7: Automating Portfolio App Deployment on AWS S3 with GitHub Actions

Welcome to Day 86 of the #90DaysOfDevOps Challenge. Today, we have a new project where we’ll automate the deployment of a Portfolio app on AWS S3 using GitHub Actions. GitHub Actions will enable us to achieve Continuous Integration and Continuous Deployment (CI/CD) with seamless integration with our GitHub Repository, streamlining our development workflow. Let’s get started!

Project Description:-

In this project, our main objective is to deploy a Portfolio app on AWS S3, a powerful and scalable storage service provided by Amazon Web Services. Leveraging GitHub Actions, we’ll automate the entire process of building and deploying our Portfolio to AWS S3. With this automation, any changes we make to our GitHub repository will trigger automatic updates to our live website, making deployment a breeze.

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.

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

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.

{
    "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.

Congratulations on completing Day 86 of the #90DaysOfDevOps Challenge. By automating the deployment of your Portfolio app on AWS S3 using GitHub Actions, you’ve gained valuable insights into streamlining CI/CD and efficiently managing your application’s deployment. Stay tuned for tomorrow’s challenge, where we’ll dive into another exciting DevOps project!

Hope I helped you in understanding the concept in a better way!!

Happy Learning !!

Next Topic:

Day 87: Discuss the Argo CD in Kubernetes.