Deploying a Devops Portfolio website on AWS S3 using Github Action

Project Description:

In this project, we will explore how to deploy a DevOps portfolio website on AWS S3 using GitHub Actions. GitHub Actions allows for seamless integration and automation of various development and deployment tasks. By leveraging the power of AWS S3 for hosting the website, we can achieve scalability, reliability, and cost-effectiveness. Additionally, we will configure a custom domain using AWS Route 53 to enhance the professional appearance of our portfolio website. Let's dive into the prerequisites and step-by-step process, accompanied by suitable screenshots, to deploy and configure your DevOps portfolio website.

The portfolio app source code is available in the GitHub repository:

git clone https://github.com/Omkar0070/my-portfolio.git

Prerequisites:

1. An AWS account: Sign up for an AWS account if you don't have one already.

2. GitHub account: Create a GitHub account and set up a repository for your portfolio website.

3. Domain: Register a domain name or use an existing one for your website.

4. Domain registrar access: Access to your domain registrar's settings to update DNS records (e.g., AWS Route 53, GoDaddy,namecheap)

Step 1: Create an S3 Bucket

• In the AWS Management Console, create a new S3 bucket to host the portfolio app.

• Note down the bucket name for use in the deployment workflow.

  

  

Step 2: Create an IAM User and Access Key

• In the AWS IAM service, create a new IAM user

• Attach the necessary policies, like AmazonS3FullAccess, to the IAM user.

• Save the access key ID and secret access key for later use.

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

Step 3: Configure GitHub Actions Workflow

• Navigate to your GitHub repository and set up the necessary secrets: AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY, using the credentials obtained in Step 2.

  

  

tep 4: Create the GitHub Actions Workflow File

• Inside your GitHub repository, create a new workflow file named main.yml.

• Define the workflow with a specific name, like "my-portfolio-deployment," and set it to trigger whenever changes are pushed to the main branch.

  

Step 5: Configure AWS Credentials in GitHub Actions

• In the workflow file, add a step to configure AWS credentials using the aws-actions/configure-aws-credentials@v1 action.

• Use the secrets you set up in Step 3 to provide access to the IAM user.

Step 6: Deploy the Static Site to S3 Bucket

• In the same workflow file, add a step to deploy the app to the S3 bucket.

• Use the aws s3 sync command to synchronize the app files with the S3 bucket, replacing "omkarkadam.me" with your actual bucket name.

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-action/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://omkarkadam.me --delete

So,once you commit these files should reflect in S3 bucket as we provided below line in main.yml

run: aws s3 sync . s3://omkarkadam.me --delete #changebuckename

Step 7: Test the Workflow

• Commit and push changes to your GitHub repository, and the GitHub Actions workflow will automatically trigger the deployment to the S3 bucket.

Step 8: Verify the Deployment

• Go to your AWS S3 bucket and verify that the portfolio app files have been deployed successfully.

Step9:Navigate to Static website hosting and here we go with our website!

Step 10: Configuring AWS Route 53 for Custom Domain

After deploying your DevOps portfolio website on AWS S3 using GitHub Actions, you can further enhance its professional appearance by configuring a custom domain using AWS Route 53. Follow the steps below to set up and configure Route 53 for your custom domain:

1. Register a Domain:

   • If you haven't already registered a domain, you can do so through AWS Route 53 or any other domain registrar.

   • Choose a domain name that reflects your brand or personal identity.

2. Create a Hosted Zone in AWS Route 53:

   • Log in to your AWS Management Console and navigate to the Route 53 service.

   • Click on "Create Hosted Zone" to create a new hosted zone.

     

   • Enter your domain name in the "Domain Name" field and click on "Create".

     

3. Obtain Route 53 Nameservers:

   • Once the hosted zone is created, Route 53 will assign four nameservers to it.

   • Note down these nameservers as they will be used to update your domain

     registrar's settings.

     

4. Update DNS Settings at the Domain Registrar:

   • Go to your domain registrar's website (e.g., AWS Route 53, GoDaddy) and log in to your account.

   • Locate the domain for which you want to configure Route 53.

   • Look for DNS or Nameserver settings for the domain.

   • Replace the existing nameservers with the ones provided by Route 53 during hosted zone creation.

   • Save the changes to update the DNS settings.

     

5. Configure Route 53 DNS Records:

   • Go back to the AWS Route 53 console and navigate to your hosted zone.

   • Click on "Create Record Set" to add DNS records for your custom domain.

     

   • Select the appropriate record type based on your needs (e.g., A record for pointing to the S3 bucket).

     

   • Configure the record set to

     point to your S3 bucket's static website endpoint.

   • Save the changes.

6. Verify DNS Propagation:

   • DNS propagation can take some time to propagate globally, usually ranging from a few minutes to a few hours.

   • Use online tools like "DNS Checker" to check the status of DNS propagation.

   • Enter your custom domain name and check if the DNS records have propagated successfully.

7. Test the Custom Domain:

   • Access your DevOps portfolio website using your custom domain (e.g., "https://www.yourdomain.com").

     "omkarkadam.me"

     

   • Ensure that the website loads successfully and all functionality is intact.

Conclusion:

Deploying a DevOps portfolio website on AWS S3 using GitHub Actions and configuring a custom domain with AWS Route 53 is a powerful combination that can elevate your professional online presence. By automating the deployment process and leveraging cloud services, you can showcase your skills and projects effectively.