Default template

How to serve a static site with AWS S3, Cloudfront, Route 53

By ericlau.

Last edited by ericlau. Created .

Creating the S3 bucket

  1. Log into AWS at https://aws.it.umich.edu
  2. Go to S3 and click on Create bucket
  3. Name your bucket as <INSERT_NAME_HERE>.michigandaily.com
  4. The AWS region should be US East (Ohio) us-east-2
  5. Under the “Block Public Access settings for this bucket” section, uncheck “Block all public access”
  6. A warning will appear underneath. Check the box that asks for your acknowledgement
  7. Click “Create bucket”
  8. Click into <INSERT_NAME_HERE>.michigandaily.com and click on the “Permissions” tab
  9. Click on the “Edit” button in the “Bucket policy” section
  10. Paste the following into the “Policy” box:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<INSERT_NAME_HERE>.michigandaily.com/*"
        }
    ]
}

  1. Click on the “Save changes” button
  1. Note that “Permissions overview” will now say the S3 bucket has public access.
  1. Click on the “Properties” tab
  2. Click on the “Edit” button in the “Static website hosting” section
  3. Click on the “Enable” radio button
  4. Type index.html in the “Index document” field
  5. Type index.html in the “Error document” field
  1. This will redirect any routes that error out to index.html
  2. You may want to redirect to another page depending on the nature of the website
  1. Go to the “Objects” tab and upload your production-ready build files

Creating the CloudFront distribution

  1. Go to CloudFront and click the “Create distribution” button
  2. In the “Origin domain” field, type <INSERT_NAME_HERE>.michigandaily.com.s3-website.us-east-2.amazonaws.com
  3. In the “Default cache behavior” section, select “Redirect HTTP to HTTPS” for the “Viewer protocol policy” option
  4. In the “Settings” section, select “Use only North America and Europe” for the “Price class” option
  5. Click the “Add item” button under the “Alternate domain name (CNAME)” option. Type <INSERT_NAME_HERE>.michigandaily.com
  6. Choose the *.michigandaily.com ACM certificate for the “Custom SSL certificate” option
  7. Type index.html for the “Default root object” field
  8. Click the “Create distribution” button
  1. Wait for the distribution to deploy. This may take several minutes.
  1. Make note of the “Distribution domain name”

Creating a new domain record with Route 53

  1. Go to Route 53 and click on “Hosted zones” underneath “DNS management”
  2. Click on the michigandaily.com zone
  3. Click the “Create record” button
  4. Type <INSERT_NAME_HERE> in the “Record name” field
  5. Turn on the “Alias” switch next to the “Value” field
  6. In the dropdown, pick the “Alias to CloudFront distribution” option
  7. Type the “Distribution domain name” that we made a note of from CloudFront
  8. Click the “Create records” button

Go to <INSERT_NAME_HERE>.michigandaily.com and verify that your static site is working.