LoginSignup
3
0

More than 1 year has passed since last update.

外部ドメインを用いたS3静的サイト構築(HTTPS通信)

Last updated at Posted at 2021-07-31

はじめに

Route53でドメイン取得したものではS3静的サイト構築したことあったが、
外部ドメイン(お名前ドットコム)でやったことなかったので書いてみました。
ほとんど同じですが。。。

今回はあるコーポレートサイトをAWSへ移行した時の学びをアウトプットします。
NSレコード書き換えやMX、CNAMEレコード書き換えで混乱、失敗したのでこの点は注意が必要です(^^;)

AWSリソース

・S3
・Cloudfront
・Route53
・Certificate Manager

以下のようなアーキテクチャー。

AWS

S3設定

バケット作成

※今回はドメインを仮のyamato.comで表記してるので置き換えてください。

S3static hosting機能を用いて構築します。
まずは指定ドメインでアクセスするには、
バケット名をドメインと同じ名前にする必要があります。

今回https://www.yamato.com(仮)でアクセスしたかったので、
バケット名をwww.yamato.comで作成します。
※そうしないとRoute53からアクセスができない仕様のため

作成したらバケットにリソースを配置。

アクセス許可

配置したリソースを書くセス可能にするために設定します。

まずはアクセス許可のタブを選び以下のように設定します。

S3access

次にバケットポリシーを設定します。
編集ボタンを押し以下のように設定。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.yamato.com/*"
        }
    ]
}

これでどこからでも該当バケットへのGetObjectを許可していることになります。

静的ウェブサイトホスティング

この機能を有効にする設定です。
プロパティタブから一番下にある静的ウェブサイトホスティングを有効にします。バケット作成時に有効にできます。

バケットウェブサイトエンドポイントとしてURLが表示されるのでここで正常に表示されるか確認できます。

Route53設定

Route53の画面でまずはホストゾーンを作成します。
よこのタブのホストゾーンを選択し、ホストゾーン作成ボタンを押します。

ドメイン名にyamato.comを指定します。
タイプはパブリックホストゾーンを選びます。

そしてホストゾーンの作成ボタンを押して作成。

作成すると一覧に表示され、ホストゾーンを選択するとレコードを作成できる画面が表示されます。

今回のドメインはyamato.comをお名前.comで取得していたため、お名前.com側でNSレコードをRoute53のものを設定します。(Route53に記載のNSレコード4つ)

その場合はもともと設定してあったTXTMXCNAMEレコードは忘れずにRoute53側に設定してください。

レコード作成のボタンから作成できます。

※注意
TXTレコードが複数ある場合はダブルクオーテーションで囲い一つにまとめて登録する。
MXレコードについて、サブドメインに@は不要です。
もともと@が設定していたので、Route53側で@を設定するとメールが使用できなくなりテンパリました^^;
空白でよいです。

S3向けのレコード作成

以下のように設定します。

Route53-a

レコード名にwww
ルーティングポリシーはシングルルーティングのままで。
レコードタイプはAレコード
ルーティング先にエイリアスを有効に
選択できるようになるのでS3ウェブサイトエンドポイントを選択。
リージョンは東京リージョンを選択。
エンドポイントを入力に作成したバケットが選択肢にでてくるので選択。

レコード作成のボタンを押して作成完了します。

ここまでの設定でHTTP通信で指定ドメインを用いてアクセスが可能になります。
http://www.yamato.comで正常に表示されるか確認。

次にSSL化(HTTPS通信)します。

Certificate Managerの設定

サービスからCertificate Managerを選択。
リージョンをバージニア北部を選択。(Cloudfrontへ証明書を登録するため)

証明書のプロビジョニングを選択。

パブリック証明書のリクエストを選択し、証明書のリクエストボタンを押す。

ドメイン名にwww.yamato.comと入力し次へ。

DNSの検証を選択し次へ。

タグ追加は任意。
最後確認で確定とリクエストボタンを押して作成。

以下のようにレコードタブを押して画面にでてくるRoute53でのレコードの追加のボタンを押します。
※画像は発行済のため状況が発行済になってるが、実際は検証中となる。

Certificate-a

問題なければ30分程度で発行されます。

発行されたらCloudfrontの設定へ。

Cloudfrontの設定

create distributionボタンを押して作成開始。

Origin domainに選択してS3を選ぶのではなく、静的ホスティング機能に記載のアクセス先を直接ペーストする。

詳細は以下のように設定。

cloudfront1-a

HTTP only以外を選ぶとアクセスできないので注意。

Origin pathは空白のまま。
Origin nameは自動設定。

Viewer protocol policyRedirect HTTP to HTTPSを選択。
(HTTP通信をHTTPS通信へリダイレクトする設定)

Alternate domain name (CNAME) でadd itemを選択しwww.yamato.comと入力し、このアドレスでアクセスできるよう設定。

Custom SSL certificateで発行した証明書を選択。
該当ドメイン名で選択できる。

画面は以下のようになる。

cloudfront2-a

create distributionボタンを押して作成する。

cloudfrontのstatusがenabledになったら、
Route53からCloudfrontへトラフィックするために最後に設定する。

Route53再設定

yamato.comのホストゾーンを選択し、
www.yamato.comのレコードにチェック入れると右側に編集画面がでるので編集ボタンを押す。

エイリアスの箇所でCloudfrontを選択。
リージョンは自動選択。
該当のCloudfrontを選択。IDを確認して間違えないように。

保存を押して編集を反映させます。

これで設定終了です。
https://www.yamato.comで問題なく表示されるか確認。
またHTTP通信でリダイレクトされるかも確認。

作業終了。

保守作業時の対応

S3のリソースを変える保守が発生した場合は、変更を反映させるためにCloudfrontのキャッシュをクリアします。

AWSサービスでCloudfrontを選択。

該当のIDを選択。

Invalidationsタブを選択。

create invalidationボタンを押す。

cloudfront3

Add object pathsにワイルドカードを使用してすべてのキャッシュを削除を指定。
create invalidationボタンを押して完了。

アクセスして変更点が反映されているか確認。

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