Skip to main content

Hosting: React Static S3

Some Notes on Static S3 Hosting with an S3 Bucket, CloudFront, ACM and Route 53​

Summary​

  1. Register a domain
  2. Create NS record in Route 53
  3. Confirm Nameservers switched in registrar
  4. Create an S3 bucket
  5. Upload website files to your bucket including index.html
  6. Enable website hosting on your bucket
  7. Create a CloudFront distribution.
  8. Request an ACM public certificate
  9. In ACM request a certificate for your domain,
  10. Create CNAME records in Route 53
  11. Add A record for each subdomain in Route 53
  12. Deploy distribution
  13. Test page

S3 Bucket​

  • Create an S3 bucket with the name of the domain you want to use. For example, if you want to use www.example.com, create a bucket named www.example.com.
  • Enable static website hosting on the bucket.
  • Make index.html your root file
  • Upload static files to the bucket.

CloudFront Distribution​

  • Create a CloudFront distribution.

  • Set the origin domain name to the S3 bucket.

  • Set the alternate domain names to the domain you want to use. For example, www.example.com.

  • Set the SSL certificate to the ACM certificate you created for the domain.

  • Cloudfront distribution creation page notes

    • Origin domain - s3 bucket
    • Origin access Legacy access identities
    • Bucket policy - YES, update the bucket policy
    • Viewer protocol policy - Redirect HTTP to HTTPS
    • GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
    • Custom SSL certificate - optional
    • Alternate Domains
        * guitarsnow.com
        * www.guitarsnow.com
    • Request certificate - see ACM part below
    • index.html for root object response/error
    • Default root object - optional
    • Description

ACM Certificate​

* Request a public certificate
* Fully qualified domain name Info
  * Example:
    * guitarsnow.com
    * www.guitarsnow.com
    * *.guitarsnow.com
* Create CNAME Records in Route 53
* Create A Records in Route 53

Test domain DNS, if issues​

Errors​

  • Registrar DNS errors:
    • ACM SSL cert will not validate if the nameserver at your registrar is not correct.
    • Check the nameserver in the registrar and make sure it matches the nameserver in Route 53 hosted zone.
  • Amazon errors:
    • Missing index.html file
    • Index.html not set as root object
    • Cloudfront alternate domains not set