S3 Static Website

We are going to host a static website in an S3 bucket. We will:

• Create the S3 Bucket
• Enable website hosting on the bucket
• Add a dns record to point to the bucket

Static Site Requirements

You can use any static site you want for this, it just has to be valid HTML and optionally css, javascript, images, and other assets.

If you wan't, you can use this qr code generator as your static site. Just download the dist.zip folder and unzip it. It contains the index.html file and other assets. Feel free to clone the react code and play around with the app if you like.

The end result will be something like this: https://qr-spa.cloudcourse.dev/ A static site with no server or backend.

Setting up The Bucket

step 1:

Login to your playground account

step 2:

Navigate to the S3 console

step 3:

Click on Create bucket

step 4:

Name your bucket a subdomain of your playground domain, so something like qr-codes-1.play.yourdomain.com Replace "play.yourdomain.com" with the exact domain you used for your playground hosted zone.

step 5:

Since we want anyone to be able to access the files stored in S3, uncheck Block all public access

step 6:

Then acknowledge that's what you want to do

step 7:

Leave all the other settings alone and click Create bucket

step 8:

Select the bucket you just created

step 9:

Select all the HTML, CSS, and JavaScript files/folders and drag them into the bucket. Do not select and upload the dist folder, instead select and upload all the files and folders inside the dist folder.

Your S3 dashboard should look like this

step 10:

Click on Upload

step 11:

When they have finished uploading, click Close

The bucket is now setup with some files in it. If anyone tried to access these files, they would only be able to view or download the actual files, not view them as a static website. We need to change a few settings in S3 to tell S3 to serve these files as a website over HTTP.

Enable Website Hosting

step 12:

Click on Properties

step 13:

Next to Static website hosting, click on Edit

step 14:

Select Enable under Static website Hosting

step 15:

For the index document, type "index.html"

step 16:

For the error document, type "index.html" We will always navigate the user back to the home page.

step 17:

Click on Save changes

step 18:

If you scroll to the bottom, you will see the auto-generated S3 domain for your site. Click it.

You should see a 403 Forbidden page like this. Everything in AWS will always be restricted unless we specifically specify how something can be accesses. Even though we've set this up as a website, we haven't told S3 who is allowed to access the files in the Bucket, so we'll do that next.

Get used to this principle of 'least privilege' in AWS and other cloud services.

step 19:

In the bucket settings, click on Permissions

step 20:

Next to Bucket policy, click on Edit

step 21:

Click on Add new statement

Policies are written in JSON and specify rules for how things can be accessed or denied access. We're going to setup a policy right now that allows anyone to access the files in the S3 bucket. You usually don't want to do this unless your bucket contains public files, like a public website.

step 22:

Select S3 from the list of services

step 23:

Select GetObject as the only action we're allowing

step 24:

Add a new resource

step 25:

Select object as the resource type For the ARN, enter "arn:aws:s3:::your-bucket-name/*"

Make sure you specify the bucket name as the ARN. The /* at the end represents all objects within the bucket. So any rules we're creating here will only apply to all the objects in that specific bucket.

step 26:

Click on Add resource

step 27:

Change principal to "*" Principal is "who" is able to use this policy. * means anyone, so anyone will be able to access the site.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Statement1",
      "Principal": "*",
      "Effect": "Allow",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": [
        "arn:aws:s3:::qr-codes-1.cloudcourse.dev/*"
      ]
    }
  ]
}

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Statement1",
      "Principal": "*",
      "Effect": "Allow",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": [
        "arn:aws:s3:::qr-codes-1.cloudcourse.dev/*"
      ]
    }
  ]
}

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Statement1",
      "Principal": "*",
      "Effect": "Allow",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": [
        "arn:aws:s3:::qr-codes-1.cloudcourse.dev/*"
      ]
    }
  ]
}

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Statement1",
      "Principal": "*",
      "Effect": "Allow",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": [
        "arn:aws:s3:::qr-codes-1.cloudcourse.dev/*"
      ]
    }
  ]
}

step 28:

Click on Save changes

Now if you visit the s3 website domain again, you should be able to access the site. Now we just need to use a custom domain instead of the default S3 one.

Custom Domain

step 29:

Navigate to the Route 53 dashboard

step 30:

Select your playground hosted zone. It should start with play.

step 31:

Click on Create record

step 32:

Click on Switch to wizard

step 33:

Select Simple routing and click Next

step 34:

Click on Define simple record

step 35:

Type in the sub domain to make it match the name of the S3 Bucket you made

step 36:

Select Alias to S3 website endpoint

step 37:

Select the region of your S3 Bucket

step 38:

Select your S3 bucket from the dropdown

step 39:

Click on Define simple record

step 40:

Click on Create records

You should now be able to visit your site using your domain name (the name of the S3 bucket). Sometimes it can take a few minutes or hours to work though, especially if your browser previously cached the domain.

In order to get this working with HTTPS, we need to connect this S3 bucket to cloudfront.