S3 Web サイトの HTTPS 化
Summary
概要
環境として AWS を使用しています。 S3 でホスティングしているサイトを HTTPS 化(常時 SSL 対応)させます。
Before
今回対象となるサイトは、以下の構成のサイトです。
AWS を使った静的サイトのホスティングする定番の構成です。
- S3: 静的サイトのホスティング
- Route 53: DNS管理(独自ドメインの管理)
After
今回、上記サイトを以下の AWS のサービスを使って HTTPS 対応にします。
- ACM
SSL 証明書の発行(サイトの HTTPS に対応させるため) - Cloud Front
CDN(Content Delivery Network: サイトの複製を世界各国のサーバに配置する仕組み)。
S3 では SSL 証明書を直接扱えないので、使い扱えるようにするために Cloud Front を利用します。
SSL 証明書の発行
発行の要求
ACM で証明書を発行してもらうよう、リクエストします。
まずは、AWS Certificate Manager にアクセスし、作業するリージョンを Virginia に変更します(なっていなければ)。
グローバルリージョン(Virginia)である Cloud Front で使用できる証明書は、グローバルリージョンで作成したものだけです。
HTTPS 対応させるドメインを入力します。
validation methods は DNS validation を選びます。
これについては後ほど詳しく説明します。
Request ボタンを押します。
所有物認証
Status を見ると Pendig validation となっており、発行が保留中であることがわかります。
証明書が発行されるには、要求者がドメインの管理者であることをAWSが認証することが必要です。
認証には所有物認証(あるものを所有してることを示すことで確かに本人であると確認する方式)が用いられます。
セキュリティって小難しい..。けどわかると楽しい。
具体的には、DNS の所有物認証と、Email の所有物認証とが用意されています。
Email はドメインを登録する際に設定するアドレスです。
Route 53 を利用している場合、 DNS の所有物認証がかんたんなので上記のとおり DNS validation を選びました。
DNS の所有物認証は、DNS にレコードが追加することで認証してもらいます。
Create redodes in Route 53 ボタンを押すと自動的に Route 53 に CNAME レコードが1行作成されます。
これが ACM 側から確認される(すこし時間がかかります)とStatus が issued となり SSL 証明書が発行されます。
ワンボタンなのでかんたんですね。
Route 53 以外の DNS を使用している場合、 CSV ファイル経由でレコードを作成することができます。
Cloud Front の設定
次に、 Cloud Front で Distribution を新規作成します。
Distribution とは、コピー元となるサイト(Origin といいます)について、コピーして配布(distribute)する設定のこと(あるいは配布されたもの、そのもの)です。
Origin の指定
Origin には Web サイトのドメインを指定します。このドメインは、自動でリストに表示されないので注意です。
S3 の Static website hosting の項目から手動でコピーしてペーストします。
ウェブサイトエンドポイント に記載がありました。
余談ですが…
Origin の選択リストに出てくる S3 のバケットを間違って指定してしまうと、サイトのトップページ以外が見れなくなります。
具体的には、ブラウザでドメインルート以外の URL へアクセスすると、HTTP 403 でアクセス拒否され以下のエラーメッセージがブラウザに表示されます。
This XML file does not appear to have any style information associated with it. The document tree is shown below.
私はこれをやってしまい、しかも一晩気が付きませんでした。
原因は、ブラウザが S3 の内部ファイルである XML ファイルを参照しようとしますが、このファイルへのアクセス権限が設定されていないためです。
Default root object の指定
index.html を指定します。
これも指定しないとと、xml を参照しようとしてエラーが出ます。
SSL 証明書の指定
前もって作成した SSL 証明書を使うことを知らせます。
一覧から先程作成した証明書をリストから選択します。
リストに表示されない場合、Virginia 以外のリージョンで SSL 証明書を発行していないか確認します。
Distribuiton の確認
Cloud Front のディストリビューションを作成してしばらくすると Status が Enabled になります。
ここでディストリビューションが機能しているか確認します。
Detail に Distoribusion domain name が表示されます。
このドメインにブラウザ(シークレットモード)でアクセスし、以下を確認します。
- 各ページが表示されること
- HTTP(http://~) でアクセスすると HTTPS(https://) にリダイレクトされること
大丈夫そうですね。
Route 53 の設定
現在の状況
現在、Route 53 が直接 S3 Bucket を向いていますが、これを Cloud Front 経由にします。
A レコードの変更
Route 53 で A レコードの転送先を S3 バケットから Cloud Front に変更します。
Jekyll 側の設定(おまけ)
サイトの設定も忘れずに変更します。
# Site
name: "923 Technology"
title: "923 Technology"
url: https://923.technology
# ↑ 変更
HTTP でアクセスしても HTTPS にリダイレクトされるので動作としては問題ないですが、サーバへの負荷を減らす一助になります。
まとめ
以上で、サイトの HTTPS 化 ができました。 実際にサイトにアクセスして問題ないことを確認します。
長い記事ですが、最後までお付き合いくださりありがとうございました。
Explore more like this
macos-trash
rm コマンドでファイルを消すと、本当に消えてしまいます。 そこで、間違って rm コマンドを実行してしまっても復活できるように、一旦 Mac のゴミ箱に移動させるようにしていきます。 rmt...
Google Search Console 対策
現象 Google Search Console にこのサイトの Sitemap を登録していましたが、エラーが出ていることに気が付きました。 エラーを見てみると、有効なURLではありま...
Comments