S3上のGatsby BlogのCloudFrontを利用したhttps化 / Enable https using by CloudFront for Gatsby Blog on S3

2020, Jan 12

English follows Japanese

AWSのRoute53とS3利用したこのBlogをCloudFrontを利用してhttps化しました。証明書はACM(AWS Certificate Manager)を利用して無料で設定しています。 全体アーキテクチャはこんな感じ↓です。 Architecture

CloudFront

以下の点に気をつけて作成すればOKです。

  • OriginにはS3のWeb HostingのEndpointを指定すること。プルダウン選択肢に出てくるものは選ばないこと！この設定を行わないと記事URLへの直アクセスやページ更新時にエラーが発生します
  • Alternate Domain Names (CNAMEs)にドメイン名(blog.bebenos.uk)を設定
  • httpからhttpsへのリダイレクト

  • gatsby-config.jsに以下の追記

    {
resolve: `gatsby-plugin-s3`,
options: {
    bucketName: "my-example-bucket",
    protocol: "https",
    hostname: "www.example.com",
},
}

    その他注意点はこちらを参照してください。 Provisioningに30分程度かかる点もお忘れなく。

ACM(AWS Certificate Manager)

証明書はACMで利用することで無料で発行できます。

  • ブログのドメイン(blog.bebenos.uk)で利用するために証明書も同じblog.bebenos.ukと作成するのが重要です。
  • バージニア北部(us-east-1)で作成すること。Route53のエイリアス設定時にリストに出てくるようになります。

Route53

blog.bebenos.ukのエイリアスを元々指定していたS3からCloudFrontに変更すればOKです。

確認

http://blog.bebenos.uk にアクセスしてhttps化されていることを確認すればOKです。

English

This blog URL is changed to https using by AWS CloudFront. Certificate is provided from ACM "AWS Certificate Manager" for free. Overview architecture is following. Architecture

CloudFront

Please refer to following points.

  • Set S3 web hosting endpoint to Origin configuration. Do not enter value from pulldown menu. If this setting is missed, you can't reload page and direct access to article page.
  • Configure "Alternate Domain Names (CNAMEs)" to blog domain name "blog.bebenos.uk"
  • redirect from http to https

  • add following code to gatsby-config.js

    {
resolve: `gatsby-plugin-s3`,
options: {
    bucketName: "my-example-bucket",
    protocol: "https",
    hostname: "www.example.com",
},
}

Other points are described in here. Provisioning will have around 30 minutes.

ACM(AWS Certificate Manager)

Certificate is provided from ACM by free.

  • It is important to create certificate name as same as blog domain name blog.bebenos.uk.
  • Create ACM in us-east-1. It is enable to use Route53 automatically.

Route53

Change alias name from S3 to CloudFront for domain blog.bebenos.uk.

Confirmation

Access to following URL and confirm https is enabled.

http://blog.bebenos.uk

bebenosuke

# Technology# AWS