Amit Kumar
"Automating AWS S3 Website Deployment with GitHub Actions: Effortless Publishing of Your Web Content"

"Automating AWS S3 Website Deployment with GitHub Actions: Effortless Publishing of Your Web Content"

Amit Kumar's photo
Amit Kumar
·

6 min read

Automate with GitHub Actions

Discover a seamless way to deploy your static website on Amazon S3. Our project utilizes GitHub Actions to automate the deployment process, ensuring efficiency and accuracy. Safeguard your credentials with GitHub secrets and let our streamlined workflow handle synchronization. Elevate your web development experience with hassle-free deployment."

Let's Start,

First, create a new repository in your GitHub.

Second, copy the code link for cloning

Next, Open your terminal or the VS Code integrated terminal and paste the code link and run the git clone command

After the Repo is cloned, Create a New "index.html" file to host our website

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333333;
        }
        p {
            color: #666666;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to My Awesome Website</h1>
        <p>This is a sample webpage hosted on AWS S3.</p>
        <p>Feel free to customize and expand upon this template to create your own amazing website!</p>
    </div>
</body>
</html>

Next, Pushed the file to the GitHub repository using the git add, commit and git push command

Here, we can see the index.html file is being uploaded

Next, log in to your AWS Console and go to S3, and create an S3 bucket with a unique name and do remember the bucket name we need it for later.

Give Public Access.

Our S3 bucket is successfully created.

Now, Go to your terminal and Create a new folder inside Your Github repository folder named " .github " and inside the .github folder create another folder named " workflows " and inside the workflows folder create a file " main.yml " - Now this YAML file is the GitHub action configuration file

Now as we go through the YAML file we can see we gave our AWS credentials which are the access and secret keys and on the last command line we can see we running the AWS command line for the S3 bucket sync with the S3 bucket name we just created earlier.

name: Deploy to AWS S3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v1

    - name: Set up 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-west-1

    - name: Deploy static site to S3 bucket
      run: aws s3 sync . s3://github-action-aws-s3-demo-project --delete

Next, see how to get and save our AWS credentials.

Now go to your AWS Console and go to IAM and Select an existing user having administration access or create a New user.

Next, go to the securities and scroll down to " Access keys " And select "Create access key"

Next, select the Command line interface (CLI) option

Our Access key is being created

Next, go to your GitHub and go to settings - on the left side of the screen you will see an option, and from there - select " Secrets and variables" - Actions.

Next, the "new repository Secret"

Here, name the secret as the same name we have given in the main.yml code as - " AWS_ACCESS_KEY_ID" and below copy - paste the IAM user access key and select add secret

Note: For security purposes, I have edited the access and secret key. Make sure you do the same and don't share your access keys with public

Next, we do the same for Secret Key - give the same name as the main.yml code - " AWS-SECRET_ACCESS_KEY " and below paste the IAM user secret key and Select add secret

As we can see both Access and Secret keys are saved.

Saving access keys in the GitHub secrets environment is a security best practice that helps protect sensitive information. Storing access keys directly in your code repository can expose them to potential breaches and unauthorized access.

Now, go to your terminal and run the git add and commit command, and finally push the main.yml to the GitHub repository

Next, go to GitHub and go to Actions - As soon we pushed our main.yml to the file our GitHub action is triggered because our main.yml we configure that when any change is pushed GitHub action will trigger

To check what jobs and steps GitHub action has performed - select the workflow or select the workflow itself (Delpoy to AWS S3) on the left side under - All Workflows

We can see all the steps that GitHub actions have performed

As GitHub Action successfully performed its task, We can go to our AWS and see on the S3 bucket that our files have been uploaded successfully.

Next, to deploy our website - we go to the S3 bucket - select properties

Here, scroll all the way down - there you will see the option " Static website hosting " - select "Edit"

Here we don't need to do anything with the default setting

Scroll down and here give the file name which is in most cases is - " index.html "

And select " save changes "

Static website hosting is successful

Scroll down and on Static website hosting - select the endpoint URL - it will open the site in a new tab.

Here it giving us a 403 error.

A "403 Forbidden" error is an HTTP status code that indicates that the server understood the request, but refuses to authorize or fulfill it. In other words, the server has understood the request, but it doesn't allow the requested action due to insufficient permissions or authentication issues

This is because remember while creating the S3 bucket we opt for " public access " so now we have to give public access permission to the S3 bucket policy.

Go to GitHub action S3 bucket and select the "permission" option

Scroll down and select "Edit" the bucket policy - get the permission code from the internet and paste the code permission code and make sure to put your bucket name in the "resources" syntax of the code which in our case is " github_action_aws_s3 " and save the change

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

Our bucket policy is successfully updated

Now, refresh your website page or open the URL in a new tab - here we see our website is successfully deployed.

In conclusion, this project has been an enjoyable voyage of discovery and learning. The fusion of GitHub Actions and AWS S3 automation has made deploying our website both efficient and satisfying. The process of setting up workflows, managing secrets, and witnessing our content go live globally has added an element of delight to web development. This endeavor showcases the delightful harmony between technology and creativity, making the journey both engaging and fulfilling.

We extend our gratitude for your readership. Your time spent engaging with this article is greatly appreciated!!!!

TrainWithShubham#90daysofdevopsDevopsgithub-actionsAWS