"Automating Website Deployment:My Experience with GitHub Actions and AWS S3"

"Automating Website Deployment:My Experience with GitHub Actions and AWS S3"

In one of the sessions on thecloudseminar.com. We were being taught about the storage part of the Infrastructure as a service. The task was to 'Put a website in the AWS S3 bucket and make it available to the world using one's domain '.
The idea was clear but at the same time, the project(the website) I wanted to put in the S3 bucket was work-in-progress. So the question was, "How can I design things in a way that whatever change I do in my system is directly updated in the Bucket".
I researched for a while and found that I can do it via configuring a CI/CD pipeline. I had no idea how to deal with this automation thing. After researching lil more, I decided to proceed with GitHub Actions. That's how I proceeded-

1. Pushed all of my codes into a GitHub repo:

For using github actions we must have a github repo on which we can apply github actions.

2. Created a AWS S3 Bucket-

For the deployment of the website, I have to create a bucket in S3 and put all of my data(as objects) in that bucket.I named the bucket as yourbuddy.eatandcode.site
where yourbuddy is the intended subdomain and eatandcode.site is the domain name.

Challenges while creating the bucket

~updating the bucket policy to Match with GitHub actions.

{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:PutObject", "s3:GetObject", "s3:ListBucket" ], "Resource": [ "arn:aws:s3:::yourbuddy.eatandcode.site/", "arn:aws:s3:::yourbuddy.eatandcode.site" ] } ] }

~Turning on the static web hosting.

  1. For initializing GitHub actions in the repo, some steps need to be followed.

    • Create a .github folder in the github repo

      • creating a workflows folder in the .github folder

      • creating deploy.yml file in the workflows folder

        name: Deploy to AWS S3

        on: push: branches: - main # Change this to your main branch name

        jobs: deploy: runs-on: ubuntu-latest

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

        - name: Set up AWS CLI 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-2 # Change to your AWS region

        - name: Sync website with S3 run: | git clone https://github.com/prashant235913/YourBuddy.git /tmp/YourBuddy aws s3 sync /tmp/YourBuddy s3://yourbuddy.eatandcode.site --delete

        env: AWS_DEFAULT_REGION: us-west-2 # Change to your AWS region

This workflow does the following:

Triggers the deployment when changes are pushed to the main branch (you can change this branch name).

Checks out your code.

Sets up AWS CLI with your AWS credentials stored in GitHub Secrets.

Syncs your website files from the specified path to your S3 bucket, deleting any files that are no longer in your repository.

  • Committing these changes and make sure the local system is up-to-date with the main branch.

http://yourbuddy.eatandcode.site.s3-website-us-west-2.amazonaws.com

but we want the site to appear in

yourbuddy.eatandcode.site

To do this task,we went to CloudFlare.com and Created a CNAME RECORD(canonical name) as 'yourbuddy' for the domain 'eatandcode.site' and targetted it to the static web hosting link provided by AWS.

In this way, my site is now available on the yourbuddy.eatandcode.site
Also as I am still working on my Project idea. So, whatever changes I am making in my system and pushing to GitHub are directly updated on the Website. In this way, A simple idea in my mind made my life much easier and I am thankful to the man https://x.com/LVNilesh?s=20 for providing such valuable content in thecloudseminar.com

As I continue to explore the exciting world of cloud and DevOps, I invite you to join me on this journey. Follow me on Hashnode and other socials. Your support and engagement mean the world to me, and I look forward to sharing more with you.
Thank you for being a part of this adventure.