Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

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 1 year has passed since last update.

@tky_st(てぃー けー)

AWSで独自ドメインかつHTTPSの静的Webサイト配信を行う

Last updated at Posted at 2022-08-15

はじめに

AWSのSAPを勉強中に、上記構成の問題が多く出題されているように感じ、理解を深めるために実際に構築してみることにしました。

利用するサービス

  • Amazon Route 53​(以下Route53)
    • 全世界のエッジロケーションの一部を使用して、高可用性を持ったDNSサービスを提供します。
  • Amazon CloudFront​​(以下CloudFront)
    • 全世界のエッジロケーションを使用してキャッシュを配信できるCDN(Content Delivery Network)サービスです。
    • S3だけではHTTPS通信を行うことができず、HTTPS通信を行うために利用します。
  • Amazon Simple Storage Service (Amazon S3)​​​(以下S3)
    • インターネットからアクセスできるストレージサービスです。
    • 静的なファイル(HTMLなど)を格納するために利用します。
  • AWS Certificate​ Manager​(以下ACM)
    • ドメイン認証の証明書の発行、自動更新管理が可能です。
    • CloudFrontと連携して、所有ドメインのHTTPSアクセスを提供するために利用します。

料金

Route53以外はAWS無料枠内で可能で、Route53も月100円以下ですので、気軽に試してみることができます。

実施方法

今回は以下の流れで進めていきます。

  1. Route53でドメイン名を取得
  2. S3バケットの作成
  3. S3の静的ホスティングを有効化し、コンテンツをアップロード
  4. ACMを利用してSSL/TLS証明書を取得
  5. CloudFrontとACMのSSL/TLS証明書を紐づけ

Route53でドメイン名を取得

まずはRoute53でドメイン名を取得します。
route53_2.png

ただ、Route53でドメインを取得しようとすると高いので、私はお名前.comから取得しました。1円から取得できます。
route53_3.png

↓こんな感じで登録できました。
domain.png

次にRoute53へ登録します。
route53_1.png

先ほど取得したドメインをドメイン名に指定して、ホストゾーンを作成します。
route53_4.png

ホストゾーンが作成されます。
route53_5.png

続いて、上記で作成されたNSレコードの情報をもとに、お名前.comのDNSに設定を行います。お名前.comのドメイン設定画面の「ネームサーバーの変更」をクリックします。
その後、その他のサービスタブにRoute53のNSレコードの4レコードを入力して、更新します。
route53_7.png

次の画面で、ドメインにチェック、「その他」タブから「その他のネームサーバーを使う」を選択し、前述のRoute53で作成された4つのNSレコードを入力して「確認」をクリック。

S3バケットの作成

それではS3バケットを作成していきます。「バケットを作成」ボタンをクリックします。
s3.png

一意なバケット名とリージョンを選択します。
image.png

アクセス設定について、デフォルトのままで問題ありません。それ以外の項目(バケットのバージョニングなど)についてもデフォルトで問題ありません。
image.png

S3バケットが作成されたことを確認します。
s3_1.png

S3の静的ホスティングを有効化し、コンテンツをアップロード

次にS3の静的ホスティングを有効化し、コンテンツをアップロードしていきます。
対象のバケットを選択し、バケットのプロパティタブの静的ウェブサイトホスティングを編集します。

image.png
s3_2.png

静的ウェブサイトホスティングを有効にし、インデックスドキュメントを指定します。その後、変更を保存します。
s3_3.png

静的ウェブホスティングが有効になったことを確認します。
s3_4.png

次に、index.htmlをアップロードします。私は適当に作成したHTMLをアップロードします。
s3_5.png

アップロードが完了できたらこのように表示されます。
image.png

その後、私はアップロードできたHTMLを確認しようと、パブリックアクセスのブロックを解除したのですが、403(AccessDenied)エラーが出てしまいました。
image.png
初期状態のバケットポリシー、ACLは未設定のため、バケットポリシーから参照できるように修正が必要です。バケットポリシーを修正したら、無事S3にアップロードしたHTMLを確認できました。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[S3バケット名]/*"
        }
    ]
}

バケットポリシーとACLの関係性は以下が参考になりました。
https://dev.classmethod.jp/articles/s3-acl-wakewakame/

ACMを利用してSSL/TLS証明書を取得

次にACMを利用してSSL/TLS証明書を取得します。
注意点として、CloudFrontでACM証明書を利用するためには、米国東部 (バージニア北部) リージョンでリクエストを行う必要があります。
https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/acm-regions.html

証明書をリクエストします。

acm_1.png

パブリック証明書をリクエストします。
acm_2.png

取得したドメイン名を入力し、リクエストを行います。
acm_3.png

リクエスト後、リロードします。
acm_4.png

保留中のステータスとなっています。
acm_5.png

証明書の発行にRoute53でCNAMEレコードの登録が必要です。「Route53でのレコードの作成」をクリックするとRoute53へ自動的にCNAMEレコードを登録してくれます。
acm_6.png

acm_7.png

Route53にCNAMEレコードが作成されたことを確認できました。
route53_6.png

この作業を行ってから1日経っても証明書のステータスが保留中の検証のままだったのですが、お名前.comのドメイン利用制限解除の手続きを実施したところ、10分後にステータスが発行済みに更新されました。
acm_8.png

CloudFrontとACMのSSL/TLS証明書を紐づけ

次にCloudFrontで作業を行っていきます。ディストリビューションを作成ボタンをクリックします。

cloudfront_1.png

次にオリジンドメインを選択します。クリックすると、先ほど作成したS3バケットが出力されるので、選択します。
cloudfront_3.png

次にS3バケットへのアクセスにOAIを使用するようにします。
OAIを設定することで、S3へはCloudFront以外からアクセスできなくなります。つまり、S3への直接アクセスができなくなるので、セキュリティが向上します。
cloudfront_4.png

新しいOAIを作成ボタンをクリックします。
cloudfront_5.png

OAIを作成します。
cloudfront_6.png

ここまででオリジンの設定を行いました。
cloudfront_7.png

次にデフォルトのキャッシュビヘイビアを設定します。
今回はビューワープロトコルポリシーをRedirect HTTP to HTTPSに変更します。
cloudfront_8.png

次に設定項目のカスタムSSL証明書を設定します。
先ほどACMで取得した証明書を選択します。
cloudfront_9.png

設定が完了したのでディストリビューションを作成し、ディストリビューションが作成できたことを確認できました。
cloudfront_10.png

また、私は既にS3のバケットポリシーを設定していたため、バケットポリシーの自動更新が実施できず、手動で更新しました。
以下のリンクに従ってバケットポリシーを更新しました。

{
    "Version": "2012-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity EH1HDMB1FH2TC"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::DOC-EXAMPLE-BUCKET/*"
        }
    ]
}

S3バケットへの直接アクセスはエラーとなり、CloudFront経由のアクセスは正常に動作することを確認します。

cloudfront_11.png


cloudfront_12.png

ちなみに現在の設定状況ですと、http://<ドメイン名>/index.htmlまで指定しないとエラーとなります。
cloudfront_13.png

変更するためには、設定のデフォルトルートオブジェクトを設定します。
cloudfront_14.png

設定ができたので、index.htmlを指定せずアクセスできました。
cloudfront_15.png

最終的にhttps://<ドメイン名>でアクセスするとindex.htmlが表示されることが確認できました。
result.png

0
0
1

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?