posts tags categories about

Contents

Host HTTPS Website by AWS CloudFront

 included in aws
   866 words   5 minutes 

1. Requirement

  • AWS S3 Bucket (with enabling static website hosting)
    • Bucket endpoint (at “static website hosting” at S3 console)
    • permission to public reading access to the Bucket

2. Create a CloudFront web distribution

  1. Sign in to CloudFront console
  2. “Create distribution” > “Get Started”
  3. Specify settings for the distribution
    • Origin Domain Name : “S3 bucket endpoint”
    • Viewer Protocol Policy : “HTTPS Only”
    • Allowed HTTP Method : “GET, HEAD”
    • Alternate Domain Names : blank (change later)
    • SSL certificate : Default CloudFont Certificate(change later)
    • Supported HTTP version : “HTTP/2, HTTP/1.1, HTTP/1.0”
    • Enable Distribution
  4. Before clicking “Create Distribution”, Go to “3. Make SSl certification by ACM”
Note
Viewer Protocol Policy is preferable “Redirect HTTP to HTTPS” rather than “HTTPS” Only, but it takes redirection fee.

Ref. AWS - CloudFront - Creating Distribution

3. Make SSL certification by ACM

Note
For “Alternative domain name” at CloudFront web distribution, Need the same name of CNAME on SSL certification made by ACM(Amazon Certificate Manager).

At Distribution Settings - SSL Certificate section in CloudFront “create web distribution” page, Go to button named “Request or Import a Certificate with ACM”, that navigates to ACM console

Select the “us-east (Virginia north)" region, request Certificate by following steps:

  1. add domain name

    • example.com
    • *.example.com

  2. select validation method

    You can select CNAME validation or email validation. I did CNAME by just clicking buttons at “Create Record at Route53”.

    Then you can see added one record at Route 53 console. For both domains, the same record was created.

    Ref. DNS validation

  3. add tag

    (nothing at this point)

  4. Confirmation and request

    Just check domain name and validation method you specified, then click “Confirmation and request”

  5. validation

    After validation is done, validation status at “Status” section is marked as “Success(成功)”

Ref. What Is AWS Certificate Manager?

4. Host S3 static web site by CloudFront

Tweaking some instruction at the section of “匿名 (パブリック) アクセスを許可して、ウェブサイトのエンドポイントをオリジンとして使用する” at guidance below.

  1. Create S3 bucket and enable website hosting - done
  2. Copy S3 bucket endpoint from “static website hosting - like this memo
  3. Check bucket policy permitting read access
  4. Check CloudFront web distribution at CloudFront console has Origin Domain Name as “(S3 bucket endpoint)”
  5. Select “Custom SSL Certificate” (example.com)
    1. Add “Alternative Domain Names(CNAMES):
      • example.com
      • *.example.com It’s necessary that CNAMES are same as what are registered in SSL certificate.
    2. Select SSL certificate that you created at ACM
  6. Click “Create distribution”
  7. Default Root Object : Specify the home page at static web site (e.g. “index.html”)

After CloudFront creates your distribution, the value of the Status column for your distribution will change from InProgress to Deployed. If you chose to enable the distribution, it will be ready to process requests after the status switches to Deployed.

You can see “Domain Name” at “General” tab in the distribution in CloudFront console like xxxxxxxxxxxxxx.cloudfront.net. this should be accessible with https via browser.

Ref.

5. Register custom Domain to DNS record

For accessing to static website by custom domain configured by CloudFront, I needed to add 3 records to Route 53 console.

Record name Type Routing policy Value / traffic destination Alias memo
www.example.com CNAME Simple xxxxxxxxxxxxxx.cloudfront.net
example.com A Simple xxxxxxxxxxxxxx.cloudfront.net Yes IPv4
example.com AAAA Simple xxxxxxxxxxxxxx.cloudfront.net Yes IPv6

Ref. AWS - Route53 - Routing traffic to an Amazon CloudFront web distribution by using your domain name

For using your own domain name, use Amazon Route 53 to create an alias record that points to your CloudFront distribution

Especially, iPv6 is enabled for the distribution and you’re creating

  • a first record: choose A – IPv4 address.
  • a second record: choose AAAA – IPv6 address.

After DNS reflected the change, I could access to the static website over SSL:

6. Trouble shooting

Generally, run dig [domain name] and check if answer record is returned. If no, something is wrong.

6.1. Access denied at CloudFront domain over SSL

This XML file does not appear to have any style information associated with it. The document tree is shown below.

  • need to add “Default Root Object” as the home page (e.g. “index.html”)

6.2. Bad Request error (403)

“The request could not be satisfied.Bad Request.

In my case, I could access to CloudFront domain but could not access to custom domain.

  • need to add CNAMEs (example.com, *.example.com) to CloudFront “Alternate Domain Names”.
  • need to add record of CNAMES.

In detail, you should check list at CloudFront が HTTPS 経由でドメイン名を処理しないのはなぜですか?

6.3. Bucket error (404)

404 Not Found

  • Code: NoSuchBucket
  • Message: The specified bucket does not exist
  • BucketName: example-home
  • RequestId: 44FADxxxxxxxxx
  • HostId: /HK1bij70hhjWxxxxxxxxxxxx
  • S3 Bucket name is different from what is resisterd in CloudFront web distribution

Ref.

6.4. Take time to deploy data between edge location

References

Updated on 2021-05-08
Read Markdown
 web, aws, route53, s3, cloudfront
Back | Home