Deploy a Static Site on S3

Deploy a Static Site on S3

Introduction

Amazon S3 (Simple Storage Service) is a reliable and proven solution for hosting static websites. Here are some reasons why it's a great choice:

  1. High Availability: S3 offers 99.99% availability, ensuring your site will be accessible almost permanently.
  2. Scalability: S3 can handle any volume of traffic without requiring additional configuration.
  3. Security: AWS provides robust tools to secure your data and control access to your content.
  4. Performance: With the ability to use CloudFront (AWS CDN) as a complement, you can ensure fast loading times worldwide.
  5. Cost-Effective: You only pay for what you use, making it an economical option, especially for small to medium-sized sites.

Setup in 10 minutes.
Deployment in 10 seconds.

I'll do it along with you, for my site MaltaExpat.com.

Prerequisites

  • An AWS account
  • A static site ready to be deployed
  • AWS CLI installed and configured

Deployment Steps

1. Create an S3 bucket for a static website

  • Log in to the AWS console
  • Go to the S3 service
  • Click on "Create bucket"
  • Choose a unique name for your bucket; for this example, we'll use bucket-test-s3-static-website
  • Select the appropriate region
  • In the "Block Public Access settings" section, uncheck "Block all public access"
  • Click "Create" to finish

Or using command line:

aws s3 mb s3://bucket-test-s3-static-website --region eu-west-3

aws s3api put-public-access-block --bucket bucket-test-s3-static-website --public-access-block-configuration '{
  "BlockPublicAcls": false,
  "IgnorePublicAcls": false,
  "BlockPublicPolicy": false,
  "RestrictPublicBuckets": false
}'

2. Configure the bucket for static website hosting

  • Go to the created bucket
  • In the Properties section, enable static website hosting: enter index.html in both Index document and Error document
  • Select Block all public access
aws s3 website s3://bucket-test-s3-static-website/ \
--index-document index.html --error-document index.html
  • In the Permissions section, change the Bucket Policy:
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::bucket-test-s3-static-website/*"
    }
  ]
}

To apply this policy automatically:

aws s3api put-bucket-policy --bucket bucket-test-s3-static-website --policy '{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::bucket-test-s3-static-website/*"
    }
  ]
}'

3. Deploy the site

yarn build

aws s3 sync ./dist s3://bucket-test-s3-static-website --delete

And that's it!
You should now have a static site accessible at the URL:

https://bucket-test-s3-static-website.s3.eu-west-3.amazonaws.com

Security, Performance, and Optimization

You now have a static site on S3. Let's make it secure, performant, and optimized using different AWS services.

1. Route 53

Route 53 is a DNS service that resolves domain names to IP addresses. We'll buy a domain name and link it to the S3 bucket.

Personally, I bought MaltaExpat.com

We'll then create the SSL certificate on AWS Certificate Manager.

2. AWS Certificate Manager

Go to AWS Certificate Manager service and create an SSL certificate in the us-east-1 region. You need to enter the domain with and without www.

Choose DNS validation. Create your certificate.

Once the certificate is created, click on it and click "Create record in Route 53". AWS will automatically create the necessary DNS records for the certificate.

3. CloudFront

CloudFront is a content delivery service that distributes your static website content worldwide. It will help reduce latency and optimize your site's performance.

We'll create a CloudFront distribution for the S3 bucket.

  • In the CloudFront service, click "Create distribution"
  • In the "Origin domain" dropdown, select the previously created S3 bucket
  • Protocol: HTTPS only
  • Viewer protocol policy: Redirect HTTP to HTTPS
  • Web Application Firewall (WAF): You can add a WAF to protect your site against DDoS attacks and other malicious traffic. It's optional, not recommended for a static site.
  • Price class: Use only North America and Europe
  • Alternate domain name (CNAME): add your purchased domain name with and without www
  • Custom SSL certificate: select the previously created certificate
  • Supported HTTP versions: HTTP/2 and HTTP/3
  • Default root object: index.html

And that's it! We can create the distribution, but we'll need to wait for it to become active. Let's add 404 error management:

  • Click on Distribution, then Error Pages
  • Click on Create custom error response
  • HTTP error code: 404
  • Customize error response: Yes
  • Response page path: /index.html
  • HTTP response code: 200

This is a simple and quick way to handle 404 errors, redirecting users to the index.html page. This will also allow Google robots to index your site without having to rewrite URLs.

Note the CloudFront distribution URL, we'll use it to configure DNS. By the way, quick check: paste the distribution URL in a browser, it should display your static site.

4. Route 53 DNS Configuration

First, some cleanup: we'll delete all created CNAME DNS records. These are the ones used to authenticate the SSL certificate.

Then, we'll create a CNAME record for the domain name with www.

  • Create Record
  • Record name: www
  • Record type: CNAME
  • Value: CloudFront distribution URL (example: d111111abcdef8.cloudfront.net)

You can now test with whatsmydns.net to see DNS propagation. At this point, my site is accessible at https://www.maltaexpat.com but not https://maltaexpat.com/

Let's create an A record for the domain name without www.

  • Create Record
  • Record name: (nothing)
  • Record type: A
  • Alias: Yes
  • Alias to cloudfront distribution
  • Select your CloudFront distribution

Similarly, you can test with whatsmydns.net to see DNS propagation. And test with a browser the address without www: https://maltaexpat.com

5. Secure S3 Bucket Access

Now that your site is deployed on S3 and distributed via CloudFront, it's essential to secure access to the S3 bucket to ensure that only requests from CloudFront can access the content. This prevents users from directly accessing your S3 files via the S3 URL and ensures all traffic goes through CloudFront, where you can apply additional security rules.

5.1. Create a new Origin Access Control (OAC) in CloudFront

CloudFront has a feature called "Origin Access Control" (OAC), which replaces the old "Origin Access Identity" (OAI). You'll create an OAC for your CloudFront distribution so it can securely access the S3 bucket.

  • Go to the CloudFront console
  • Select your CloudFront distribution
  • In the "Origins" tab, select your origin (the S3 bucket)
  • Click "Edit" to modify the origin
  • Under "Origin domain" update with S3 endpoint (not the website endpoint)
  • Save changes and return to the same place
  • Under "Origin access", select "Origin access control settings"
  • Create a new OAC by selecting "Create new OAC"
  • Copy the policy

5.2. Configure S3 Bucket Policy to Restrict Access to CloudFront

Now that the OAC is created, you need to update the S3 bucket policy to only allow access to CloudFront via the OAC.

  • Go to the S3 service, select your bucket
  • In the "Permissions" tab, locate the "Bucket Policy"
  • Replace the existing policy with the one you copied:
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::bucket-test-s3-static-website/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::YOUR_ACCOUNT_ID:distribution/DISTRIBUTION_ID"
        }
      }
    }
  ]
}
  • YOUR_ACCOUNT_ID: Replace with your AWS account ID
  • DISTRIBUTION_ID: Replace with your CloudFront distribution ID

This policy ensures that only CloudFront, via your specified OAC, can access objects in the S3 bucket.

5.3 Make S3 Bucket Private

  • In S3 properties, disable static website hosting
  • Enable "Block all public access"

6. Redeploy the Site

We use the same commands to build and upload.

yarn build

aws s3 sync ./dist s3://bucket-test-s3-static-website --delete

but we add a create-invalidation to clear the CloudFront cache.

aws cloudfront create-invalidation --distribution-id DISTRIBUTION_ID --paths "/*"