Serving a static website with AWS S3

S3 — CloudFront — Route 53

In this article, I want to tell how to serve a static website with S3 and we will autonomously deploy to this bucket with the GitHub repository via GitHub action. Before starting to tell how to do it, you need some tools here.

Requirements are as follows:

• S3 Bucket
• Certificate Manager
• CloudFront
• Route 53

Create a bucket

A Bucket creation is the easiest thing ever but there are some tips to do it better.

• The “Block public access” setting should be disabled.
• You need to enable Static Website Hosting from bucket properties.

S3 bucket settings

• The bucket should have “PutObject” and “GetObject” permissions. You can see the example below.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:PutObject"
            ],
            "Resource": [
                "arn:aws:s3:::kayahanguven.com",
                "arn:aws:s3:::kayahanguven.com/*"
            ]
        }
    ]
}

• Don’t forget to create another bucket for your “www” subdomain and redirect upcoming requests to the main bucket.

Request a certificate for your domain

You need a certificate to use CloudFront distribution for your domain. Most of the providers provide it in cash but it is free in AWS Certificate Manager, you don’t need to pay anything for making secure your domain.

SSL certificate settings

Redirect domain requests to an S3 bucket

AWS S3 billed you access-based to objects inside. So, you need to make cost optimization there and you need a CDN (Content Delivery Network). AWS CloudFront is coming to your aid here. It has also a good free tier limit. 🫰

You need to go to CloudFront and click on to “Create distribution” button. After that, there are three important points. For the origin domain, you need to choose your S3 endpoint, for the alternate domain name you should enter your domain with subdomains and also choose the SSL certificate that you created above.

S3 bucket to redirect

Route 53 settings

Create A record in Route53

Before creating A record you need to have hosted zone. If you have a domain from AWS Registrar, you don’t need to create but if you have a custom domain you need to create it yourself.

After creating a hosted zone, you can create your A record. In creating A record you need to choose an alias as a CloudFront distribution.

Also, you need to do the same thing for your “www” subdomain, too.

Deploy website files to S3

This action is going to deploy the website files to the S3 bucket after the branch merges with to master.

Note: If you have a compliable application. You can add the build process to this Github action and just upload the index.html file and “dist” folder.

Your git action YAML file should be like this:

name: Deploy To S3
on:
  push:
    branches:
      - master
jobs:
  Deploy:
    runs-on: self-runner
    steps:
      - uses: actions/checkout@master
      - uses: jakejarvis/s3-sync-action@master
        name: Deploy to S3
        with:
          args: --acl public-read --exclude '.git/*' --exclude '.gitignore' --exclude '.github'
        env:
          AWS_S3_BUCKET: "kayahanguven.com"
          AWS_REGION: ${{ secrets.AWS_REGION_EU_WEST }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

Results and Conclusion

If everything goes right, you should see a picture of something like below. Our SSL is working, the request is hit from the CloudFront cache, and you can see Amazon S3 as a server.

The website has SSL certificate and the file hit from CloudFront cache

In the end, we have this diagram, flow. Now, you have a professional website application infrastructure. You can also add another processes like invalidating CloudFront cache after deploying your code to S3 or you can add another CI/CD process.

Diagram of the system

The main purpose of this usage, serving a website with minimum effort and well-built infrastructure. I try to touch and show every detail in this article. I hope it will help you with your work or personal affairs. See you fellas. Good luck.