parm530
12/20/2019 - 7:05 PM

Creating Static Pages with SSL

s3page.md
content_copyfile_download
  • Rendered
  • Source

S3

  • Youtube vid with detailed steps
  • Create 2 new buckets
    • domainname.com
    • www.domainname.com
  • Set region -> Next
  • Configuration Options (no need to check anything) -> Next
  • Uncheck Block all public access -> Create bucket
  • Upload html & css files (Overview tab)
  • Properties tab -> Static website hosting
    • Select the option to use this bucket to host a website
  • Permissions tab:
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::parmsite.com/*"
        }
    ]
}
  • Your endpoint URL can be found back in the Properties -> Static website hosting tab
  • Site should be up and running

Route53

  • Open the Route53 service on the aws console
  • Left side, navigate to Hosted zones -> Create Hosted Zone
    • Domain Name: enter the name of the s3 bucket
    • Add comment (optional)
    • Type leave default Public Hosted Zone -> Create
  • This will set 2 records:
    • Type NS (Named Server)
      • Will contain 4 urls that will need to be inputted into your domain registrar site (namecheap, network solutions, ...)
    • Type SOA (Start Of Authority)
  • Click on Create Record Set to be able to route traffic for your domain to the website bucket (more info)
    • These records provide information about you want to route traffic for one domain
    • Name: first time record, keep the default value! This is the name of your hosted zone.
    • Type: Choose A-IPv4 address
    • Alias: Yes
    • Routing Policy: Simple
    • Must create another record if you created a bucket with www.domainname.com (just enter www for the name attribute)
      • Ensure that you set the Static Web Hosting property to Redirect all requests
      • Using the first bucket name and http protocol
      • Alias Target: use the www.domainname.com bucket
      • Used to make sure that if the user inputs www.domainname.com, it will be redirected your site without an error.

Network Solutions

  • DNS Registrar: where you can buy the name of a site
  • Find the dns settings for the name, Change where your domain points
  • -> DNS -> Enter the 4 urls found in the Route 53 NS record!

Certificate Manager (Amazon Resource)

  • To make the site secure using the HTTPS protocol, use Certificate Manager
  • Request a Certificate -> Request a public certificate
    • Add the domains in the Domain name section (one for domainname.com and www.domainname.com)
    • Will need to verify via DNS or Email (DNS is easy if Route 53 is used!) More info
    • A button should appear that allows for Route 53 to create the needed records (will take a few minutes to verify)

CloudFront (Amazon Resource)

  • Allows the use of the SSL certificate (obtained above) to serve the website with HTTPS!
  • Also used to speed up website load time by storing the contents in different areas and loading the site for the user from the closet distritbution.
  • Create 2 new web distributions (one for each s3 bucket)
  • Set the following attributes for a basic setup:
    • Origin Domain Name: s3 website endpoint for one of the buckets
    • Origin Id: Pre-populated for you when you enter the Origin Domain Name
    • Viewer Protocol Policy: Set to Redirect HTTP to HTTPS
    • Alternate Domain Names: Should match the s# bucket name ou are pointing to, ex. domainname.com
    • SSL Certification: Select Custom SSL Certificate from the dropdown
  • Repeat for the second bucket: www.domainname.com
  • This will take a few moments to take in effect, going back to the s3 bucket www.domainname.com, in Properties -> Static Web Hosting set the redirect protocol to HTTPS.
  • In route 53, update the custom A records created prior by changing the Alias Target to the CloudFront distribution
  • All should be secure now!

Tips

  • To clear the cache if you page is not taking the new changes, go to cloudfront, to the distribution named domainname.com and add the invalidation /*.
  • To allow for /other-pages, in s3: make sure the file has content-type set to text/html in the metadata property tab and remove the .html from the filename!
  • To set up custom error pages, use cloudfront's error pages tab to set the path to the custom page!
  • When contructing these kinds of websites think about:
    • Google Analytics
    • Structures Data- take a look
    • Other SEO technologies