Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@ichi_zamurai(Ichi Zamurai)

<AWS>S3にHTTPS(SSL通信)の静的サイトを立ち上げた時の話

Last updated at Posted at 2021-02-08

#TL;DR
too long didn't read
はじめに、キャプチャ多めで、全文が長いので、作業工程の要約をここにまとめたいと思いますー

  1. ドメインを無料で取得。（[freenom][1]）
  2. Amazon S3に静的ホスティング用の対象ファイル(index.htmlとか)をアップロード
  3. Route53でドメインを名前解決する。
    1. Route53でホストゾーンを作成
    2. ドメイン取得したサイト([freenom][1])のネームサーバー設定にRoute53ホストゾーンのNSドメインを設定
  4. AWS Certificate Managerで取得ドメインに対して証明書を発行
    1. CNAME作成
  5. CloudFrontでS3バケットの静的サイトに対して、アクセス可能にする。
    1. CloudFontでディストリビューションを作成
    2. Route53で、CloutFrontのドメイン用のAレコードを作成
    3. S3バケットで、パブリックアクセス設定を変更し、バケットポリシーをJSONで書き換え

(※ちなみに、ちょいちょい個人情報的なのは消してます。お見苦しかったらお許しを☆)
[1]:https://www.freenom.com/ja/index.html

#Amazon S3静的サイトホスティングのアーキテクチャ
今回のアーキテクチャは以下のようになっています。
静的サイトアーキテクチャ2021-02-08 10.11.15.png

#ドメインを取得

AWSのRoute53で取得するとお金がかかるので、
今回は、[freenom][1]で無料でドメインを取得しちゃいます。

  1. freenomのサイトはこんな感じです。(2021-02-08現在)
    トップのヘッダー画像はアクセスごとに変わるみたいです〜。(世界観がすごい)
    1.png

  2. Servicesタブから「Register a New Domain」を選択して、任意のドメイン利用状況をチェック
    使われてないといいな〜
    「$0」：プライスレスに感動
    2.png
    ※ちなみに、.tkはオーストララシアにあるニュージーランドの領土であるトケラウのドメイン。（日本は.jpですね〜〜・・・国ごと売ったのか、、、売国主義www）

  3. 「Get it now!」から好きなドメインを選択して、「Checkout」
    3.png

  4. カートページに飛び、内容を確認。
    Periodのところで、期間を選択。最大で12ヶ月無料も指定できちゃいます。
    4.png
    ※後でネームサーバーの設定をするので、「Forward this domain」or「Use DNS」は、一旦飛ばす。

  5. 明細を確認。利用規約に同意して、「Complete Order」
    確かに$0(0円)。マックのスマイルと同じプライス、タダですねえ！！
    6.png

  6. 注文が完了しました！
    7.png

  7. ちなみに、「Services」タブの「My Domains」を選択すると一覧が出るので、「Manage Domain」を押すと
    8-2.png
    それぞれのドメインに関連する色々な設定画面に飛べます。
    NameServerなんかの設定もここで出来ます。
    8.png
    10.png

#Amazon S3に静的サイト用のindex.htmlアップ
（キャプチャがちょいちょい細切れになっていますm(_ _)m）

  1. 静的サイトをホストするためのバケットを作成します。
    オレンジのボタン「バケット作成」をクリック
    1.png
    バケット名を任意の名前で作成（※静的ファイルを配信したいドメイン名にするのが、オススメ）
    一旦全て、デフォルト設定で作成しちゃいます。
    2.png
    CloudFrontとの結びつけの際に、このパブリックアクセス設定が重要になってきます。(※後述予定)
    3.png
    4.png

  2. 静的ウェブサイトホスティング設定を有効にする
    インデックスドキュメントにindex.htmlと記入
    2-2.png

  3. ファイルをアップロード
    「ファイルを追加」から好きなファイルをアップロードしましょう〜
    5.png
    アップするとこんな感じなります。
    6.png
    これまで、レンタルサーバーとかにFTPでファイル転送してアップしてたけど、
    そういった手間とソフトウェアも要らないし、めっちゃくちゃ楽!!

#Route５３でホストゾーンを作成

  1. Route53のダッシュボードはこんな感じです。
    1.png
    左のサイドバーからホストゾーンを押します。

  2. ホストゾーンのページはこんな感じです。一覧が表示される
    2.png
    「ホストゾーンの作成」を押すと〜

  3. ホストゾーン作成ページ
    ドメイン名に取得した任意のドメインを入れましょう
    3.png
    （キャプチャでは写ってないですが、）右下に、オレンジ色の作成ボタンがあるので、
    そのボタンをクリックすると作成できます！
    上述の1.のキャプチャの通り、ホストゾーンの一覧に表示されます。

  4. ちなみに、ホストゾーンだけを作成すると、最初にNSとSOAのタイプのドメインが発行されます。
    4.png
    NSの4つのものは、ドメインを取得したサイト（[freenom][1]）で、ネームサーバーとして設定する

  5. [freenom][1]のネームサーバーに、NSのタイプのドメイン4つを設定する。
    ※ネームサーバーは、そのドメイン(test-https-static-hosting.tk)に訪れた時に、ルーティング先のドメインを解決してくれるサーバーの役割を果たすやつ
    5.png

#AWS Certificate Managerで証明書を取得しましょう
「証明書のリクエスト」をクリック!!

  1. Certificate Managerのトップページはこんな感じです。
    証明書発行のリージョン設定は、バージニア北部(us-east-1)じゃないと、CloudFrontディストリビューション設定ができないので、注意が必要です。
    ※必ず、バージニア北部(us-east-1)指定してください。
    ※ちなみに、証明書を別リージョンに移すこともできません。
    1.png

  2. 証明書のリクエストを開始します。
    ドメイン名に、
    test-https-static-hosting.tkと*.test-https-static-hosting.tk
    の２種類を登録するといいでしょう〜。
    S3の設定も必要ですが、
    もしサイトにwww.test-https~みたいな形でアクセスしたい時には、
    *のワイルドカードを使用しましょう。
    2.png
    次へ。

  3. 「検証方法の選択」ですが、DNSの検証の方が、公式でもオススメされているので、こちらを使います。
    のちのち、ドメイン取得サイト([freenom][1])のネームサーバー設定の部分に、Route53で発行されるNS(NameServer)ドメインを登録します。
    3.png
    次へ。

  4. タグは管理のための物でしかないので、一旦何も記入せず。
    TPOによって、設定ください〜
    4.png
    確認。

  5. 先ほど証明書を発行したいドメインが表示されていますね〜
    5.png
    確定とリクエスト。

  6. 進行中のリクエストと表示されて、証明書のリクエストがなされました。
    6.png
    ※続行はリロードボタンみたいなもんです。

  7. ドメインのドロップダウンを開いてみると、詳細を確認できる
    「Route53でのレコードの作成」を押す
    7.png

  8. ポップアップが表示されるので、作成を押す
    8.png

  9. Route53にいくと、自動でCNAMEが作成されていたああ！！(お見事)
    ※NSとSOAのタイプのレコードはホストゾーンを作成した時に自動で生成されるやつです。
    9.png

#AWS CloudFrontのディストリビューション設定をする

  1. CloudFrontのディストリビューション設定ページはこんな感じです。
    1.png
    「Create Distribution」を押す。

  2. とりあえず「Get Started」で開始
    説明事項が書かれている。
    内容としては、こんな時にDistribution作ってね って言う説明が書かれている。
    2.png

  3. ディストリビューション作成ページに
    Origin Domain Name:先ほど作ったS3バケットを選択。
    ※Origin IDは自動で入る。
    3.png
    今回は、HTTPS Onlyを選ぶ。(Redirect HTTP to HTTPSでもいいですね。)
    基本はデフォルト設定のままでOK。
    4.png
    5.png
    Distribution Settingsで、
    Alternate Domain Names(Cnames)にドメイン名test-https-static-hosting.tkを記入する。
    SSL CertificateでCustom SSL Certificateを選び、先ほどCertificate Managerで作った証明書を選択する。
    ※ドロップダウンに出てきます。
    6.png
    あとは、デフォルトのままの設定で「Create Distribution」を押す。
    Default Root Objectにサイトのページトップであるindex.htmlを設定する。
    （S3にアップロードしたindex.htmlを指している。）
    7.png

  4. CloudFront Distributionsの一覧に「In Progress」状態で作成される。
    ちょっと経つと「Deployed」状態になり、準備完了になります。
    8.png

###Route53にCouldFrontのアドレスとAレコードで設定

  1. CloudFrontで生成された「Domain Name」を使って、Route53にAレコードを作成します。
    ホストゾーンの一覧をみるとお分かりかと思いますが、作成すると一覧の一番上みたいに、Aレコードが作られます。
    9.png

  2. 「レコードを作成」を押す。
    ルーティングポリシーはシンプルルーティング
    レコード名は空白でOKです。
    エイリアスをONにして
    レコートタイプをA- Ipv4アドレスと一部の・・・を選択
    トラフィックのルーティング先をS3ウェブサイトエンドポイントへのエイリアスを指定
    リージョンを適切に指定　※この例では、アジアパシフィック東京です。
    S3の対象のバケットを指定。
    10.png

###S３のアクセスポリシーを修正する

  1. パブリックアクセスのブロック（バケット設定）を編集する
    新しいアクセスコントロールリスト（ACL）を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックするにチェック
    任意のアクセスコントロールリスト（ACL）を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックするにチェック
    11.png

  2. バケットポリシーにJSONでポリシーを定義
    下記のキャプチャのように、バケットポリシーをJSON形式で指定します。
    意味としては、最新のポリシー言語のバージョン 2012-10-17を使用して、記述しています。
    ステートメントのIDは1。ID:XXXXXのCloudFrontがtest-https-static-hosting.tkのS3バケットに対して、Getを許可するよ。
    ということです。
    ※ステートメントは複数記述することもあるので、識別子としてのIDがあります
    12.png

  3. Principalのcloudfront ~~ XXXXXのXXXXの部分に適切なIDを設定する。
    そのIDは、Origin Access Identityの箇所に記載されています。
    13-2.png

下記はJSONです。

#バケットポリシー
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::test-https-static-hosting.tk/*"
        }
    ]
}

####<解説>

要素 説明
Version 使用するポリシー言語のバージョンを指定。
ベストプラクティスとして、最新の 2012-10-17 バージョン使用
Statement ポリシーのメイン要素。複数のステートメントを含められる。
Sid 複数のステートメントを区別するためのステートメント ID
Effect Allow または Deny を使用してポリシーで付与または拒否するアクセス許可を指定
Principal アクセス許可/拒否するアカウント、ユーザー、ロール、またはフェデレーティッドユーザーを指定
Action ポリシーで許可または拒否するアクション
Resource アクションが適用されるリソース

#Ta-dah!！！！！（ジャジャーン！！！）
サイトが表示されました！！！！
static-site.png
いやあああ、頑張った甲斐がありました。
めちゃめちゃ勉強になったし、
「たかが静的サイト、されど静的サイト」
AWSのサービスを使い倒したような感覚です(｀・ω・´)

ちなみに、こちらのjsを引用させていただきました。
参考ソース：Github

###試しに、直接S3バケットのURLにアクセスしてみる
S3バケットのURLhaこんな感じですねえ
http://xxxxxxxxxxxx.s3-website-ap-region-1.amazonaws.com/
access_denied.png

ちゃんとAccess Deniedが表示されましたー！！
つまり、CloudFront経由からじゃないとこのS3バケットにはアクセスできなくなったということですね

#まとめ：ハマったポイント

  • s3のバケット名は、ドメイン名に
    • 通常はwww.example.comとexample.comの2つを用意したりして、wwwからリダイレクトさせるそうです。
  • 「パブリックバケットポリシーまたはアクセスポイントポリシーを介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする」をオフにしないと、そもそもバケットポリシーを保存できなかった
  • CloudFrontのDefaultRootObjectにindex.htmlと記載しないとaccess deniedで怒られる
  • Alternate Domain Names (CNAMEs)に、test-https-static-hosting.tk を設定しないといけない。（名前解決）
  • CloudFrontで証明書を使用する場合は、必ず「米国東部（バージニア北部）」リージョンで証明書を登録する
  • ドメイン取得は[freenom][1], DNSサーバーはRoute53という関係。つまり、[freeom][1]の**NameServer設定部分に登録する必要あり
  • 証明書が検証保留中になり、あわてふためいたが、15分もすればに発行済になった。
  • ドメイン名の追加セクションに「*.test-https-static-hosting.tk」と「test-https-static-hosting.tk」の２つを入れると便利
  • CNAMEには、頭にアンダースコア付きのものを入れないといけない(※route53ならボタン１つ)
    • 例) Name: _8e9a64e3864xxxxxxxxxxxxxxxxxxxx.test-https-static-hosting.tk.
    • 例) Value: _3e8628f11a5adxxxxxxxxxxxxxxxxxxxxx.jfrzftwwjs.acm-validations.aws
  • 証明書なしでCloudFrontディストリビューションを作ったときは、SSL Certificateでcustomは選べなかったが、発行済になってからは、選択できるようになり、編集すると、再度in progressとなって、更新がかかる

以上、
ありがとうございました！！

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?