ドメインを取得してS3(静的Webホスティング)をHTTPS化する

Tatsuroh Wakasugi

February 14, 2023

AWS

前述の S3 に立てた静的 Web サイトの記事であるが、S3 静的 Web ホスティングでサイトを建てた時、通常では HTTP でのアクセス、表示となっている。

また、S3 静的 Web サイトホスティングを設定した場合、公開 URL の形式は固定されている。

自分で設定した URL で公開したい場合、また HTTPS 化して通信したいとなった時どうすれば良いか。今回はその実施を行ってみたので、そのための手順を留めておく。

HTTPS とは

の前に、まず HTTPS とは何なんだろうか。

HTTP

まず前提として、ユーザーが Web ブラウザを通して、Web サイトのあるサーバからサイトのデータをやり取りするためのプロトコル(通信規則)としてHTTP がある。

流れとしては、ユーザーが Web ブラウザから指定した Web サイトを開こうとすると、その Web サイトがある Web サーバーにリクエストが送信される。Web サーバー側はそのリクエストを受信し、その Web サイトを構成するデータ(html ファイルなど)をユーザー側にレスポンスとして返す。そのレスポンスを Web ブラウザが受け取り、Web サイトを表示するという仕組みになっている。

HTTPS

しかし、この HTTP では、リクエストとレスポンスは暗号化されておらず、他の第三者が通信を傍受し、内容を覗き見るとどのようなデータが送られているかがわかってしまう状態になってしまう。

特に重大な情報を送ってないのであれば良いのだが、例えば決済を行うサイトの場合は自分のクレジットカード情報やパスワードだったり、個人情報を利用するサイトでは自分の個人情報を送るパターンもある。そのような場合、他の第三者に内容がわかってしまう状態で送るのは良くないだろう。

このような場合の対策として、HTTP に暗号化を施して送受信する仕組みがHTTPSである。HTTPS で送受信した場合、データが暗号化されるため、第三者に通信を傍受されても内容が解読できず読み取られない。

HTTPS の設定

HTTPS を設定するためには何を用意すれば良いか。

HTTPS の暗号化設定は、SSL サーバ証明書を利用する事で実現できる。

SSL サーバ証明書とは、ユーザ(Web ブラウザ)と Web サーバ間で通信の暗号化を行うための電子証明書であり、ユーザ・サーバとは別の外部の認証局から発行される。

認証局とは、対象の Web サイトの正当性を示すための第三者機関であり、Web サイトの審査を行い、正当性が確認できたら証明書の発行を行う。

この SSL サーバ証明書には、Web サイトの情報、及び暗号化に必要な鍵などのデータが含まれており、これを利用して HTTPS 通信を行う。

このうちの認証局について、実は AWS には認証局の役割を行えるサービス「AWS Certificate Manager」がある。今回はそちらを使用しつつ行っていく。

ドメインとは

インターネットで言うドメインとは、いわゆる Web 上での住所のことを言う。

正確には Web 上での住所のことは「IP アドレス」と言う数字列で示されるのだが、数字列だとわかりにくいため、人間がわかりやすいような文字列で置き換える(DNS と言う仕組みを用いる)ことが多い。この文字列がドメイン名である。

ちなみにこのブログは「wat-notes.com」と言うドメイン名を設定している。

このドメイン名だが、実は自由に設定できると言うわけではなく、世界で一意でなければならない。

また、ドメイン名の登録には料金がかかる。ドメイン名の登録や購買は専用のサービスがあるのでそちらを利用して行う。

ちなみに AWS では、DNS の設定を行うサービス「Route 53」があるので、今回はこちらを使用する。また、この Route53 により、ドメイン名の登録・購入も行える。

静的 Web へのドメイン取得・HTTPS 化の手順

大まかな手順としては以下の通り。なお S3 での静的 Web ホスティングは既に行われている前提である。

Route53 で独自ドメインを設定（別サービスでドメインを取得しているなら飛ばす）
ACM で証明書を作成する
CloudFront でディストリビューションを作成し、S3 の静的 Web サイトと結びつけ、また証明書も適用する

Route53 でドメインを取得する

まずは、HTTPS 化に必要なドメイン名の登録を行っておく。

(既に別の方法でドメインの取得を行っている場合、ここは不要。)

マネジメントコンソールから Route53 のページへ

「ドメインの登録」へ
ドメイン名と、トップレベルドメイン(.com など)を入力する
「チェック」を押して、登録可能か確認する
決めたら「カートに入れる」を押して「続行」

「ドメインのお問い合わせ」で連絡先を書く

最終確認で入力事項が全て正しいか確認する。

※ 「ドメインを自動的に更新」の欄は確認しておく。

よければ「注文を完了」

するとリクエストが送られる
コンソール上の「保留中のリクエスト」の欄で注文したドメインがあるか確認
しばらくすると登録したメールアドレスに AWS から認証メールが来る

メール内の認証用アドレスを開く
認証成功の画面が表示されたら OK、閉じる
しばらくすると AWS から認証・登録完了のメールが来る

注文したドメインが保留中のリクエストから「登録済みドメイン」に行くことを確認する

これで完了。また、「ホストゾーン」の欄を開くと、ドメインのレコード等の編集が行える。

（ちなみにだが、この節に載せた写真はあくまで例として記載したまでなので、実際に購入はしてはいないことを補足しておく。）

ACM で証明書を作成する

次に、AWS で認証局の役割を行ってくれるサービス「AWS Certificate Manager(ACM)」の設定を行う。

マネジメントコンソールから AWS Certificate Manager のページへ
リージョンを「 us-east-1(バージニア北部) 」に切り替えて作成する

※ 今回は後述の CloudFront、Lambda@edge を利用する関係上、us-east-1 リージョンで作成を行う。

「証明書をリクエスト」へ

「パブリック証明書をリクエスト」へ

[ドメイン名] に先ほど作成したドメイン名を入力。
検証方法は DNS 検証
その後「リクエスト」

その後「証明書の一覧」画面でステータスが　保留中　で作成される
証明書の一覧画面からその証明書を開く

ドメイン　の欄で、「Route53 でレコードを作成」を押下して作成
すると、Route53 で作成したドメインに CNAME レコードが作成される。
ステータスが「発行済み」　になるまで待つ

これで証明書が作成される。

CloudFront でディストリビューションを作成する

次に、CloudFront ディストリビューションを作成して、静的 Web サイトへのアクセス時に証明書を用いるように設定する。

マネジメントコンソールから CloudFront のページへ
「CloudFront ディストリビューションの作成」へ

その後、ディストリビューションの各設定を入力する。各設定項目は以下を入力する。

オリジンドメイン：作成した S3 バケット
オリジンパス：空欄
名前：オリジンドメイン入力したら自動で入る
S3 バケットアクセス：Origin access conntrol settings を選択 - origin access control：　コントロール設定を作成　で作る - 作成したらそれを選択 ※バケットへの実際の OAC の適用は次章の Cognito 認証のところで行う。ここでは次章のために設定をしておく。
カスタムヘッダーを追加：空欄
オリジンシールドを有効にする：いいえ
ビューワープロトコルポリシー：Redirect HTTP to HTTPS
許可された HTTP メソッド：GET, HEAD
ビューワーのアクセスを制限する： No
キャッシュポリシー：CachingOptimized
オリジンリクエストポリシー：空欄
レスポンスヘッダポリシー：空欄
関数の関連づけ：なし
料金クラス：全てのエッジロケーション
AWS WAF Web ACL：空欄
代替ドメイン名(CNAME)：ACM で設定した証明書を取得したドメイン名
カスタム SSL 証明書：ACM で作った証明書（ここの証明書はus-east-1 で作成しないと不可）
サポートされている HTTP バージョン：HTTP/2
デフォルトルートオブジェクト：index.html など（各自の環境に合わせて設定する事）
標準ログ記録：オフ
IPv6：オン

入力したら一番下の「ディストリビューションの作成」を押下して作成する

S3 の CORS 設定を追記する

また、S3 対象バケットのアクセス許可　のセクションにある CORS の設定に以下の JSON を設定する。

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "HEAD"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": []
  }
]

Route53 で独自ドメインのエイリアスの向き先を変更する

最後に、作成したドメインの向き先を Cloudfront に向ける。

マネジメントコンソールから Route53 へ

「ホストゾーン」から作成・登録したホストゾーン(ドメイン)を開く
そこから「レコードの作成」へ
レコードタイプは　 A
レコード名は ACM,CloudFront で設定したドメイン名を入力
エイリアスを ON にして、　トラフィックのルーティング先　を「CloudFront ディストリビューションのエイリアス」に選択
「ディストリビューションの選択」で、対象 CloudFront のディストリビューションドメイン名　を入力する
ルーティングは　シンプルルーティング　（各自の環境に合わせて設定する）
それで　レコードを作成

また、Cloudfront ディストリビューションが IPv6 も有効になっているので、同様の手順で AAAA レコードも作成する。

これで作成したドメイン名の URL にアクセスすると、S3 での静的 web サイトが表示される（はず）。

次は、この静的 Web サイトに認証機能を設けることを考えてみる。