LoginSignup
9

More than 3 years have passed since last update.

AWS S3+Route53+CloudFrontでReact+Redux+RouterなSPAをホスティングする

Posted at

S3に静的コンテンツをアップロードして、Route53で取得したドメインでウェブホスティングしたい。
この際、CloudFrontを使ってオートスケールできるようにしたい、という依頼があった。
ここでいう静的コンテンツというのは、React+Redux+RouterなSPAなのだが。

当方、S3初心者であったため、まず最初のところで躓いてしまった。
そのあたりのことは、別記事に書いた。

この記事では、S3でウェブホスティングしているコンテンツをRoute53で取得したドメインでホスティングすること、そしてもう一歩進んでCloudFrontを使う場合の設定も考えてみたい。

ウェブホスティングしているS3バケットを、Route53で取得したドメインで提供する

これは何のことはない。Route53で取得したドメインにCNAMEを作成して、S3のウェブホスティング用のエンドポイントをCNAMEの値に設定すれば良いだけである。

もう少し、噛みくだくと...

  1. ますS3のバケットを作り、コンテンツをアップロードする。
    1. 私はこのとき、AWS CLIから作業した場合には問題がなかったのですが、AWSマネジメントコンソールで作業すると、どういうわけか、バケットやファイルのアクセス許可を変更できないというトラブルに巻き込まれました。
  2. AWSマネジメントコンソールで、S3バケットのアクセスコントロールリストを操作し、パブリックアクセスのグループeveryoneのオブジェクト一覧を「はい」に設定します。
  3. AWSマネジメントコンソールで、S3バケットにアップロードしたコンテンツのアクセス権限を操作し、パブリックアクセスのグループeveryoneのオブジェクトの読み取りを「はい」に設定します。
  4. AWSマネジメントコンソールで、S3バケットのプロパティを操作し、Static website hostingを「このバケットを使用してウェブサイトをホストする」を選択します。
    1. インデックスドキュメント、エラードキュメントともにindex.htmlにしておきます。(React+Redux+RouterなSPAなので、不正なURLに対する404エラー表示も、そのSPAの中で作り込んでしまいます。)
    2. このときエンドポイントが決定されるので、このエンドポイントをメモしておきます。(まあ、メモしなくても、S3バケット名とバケットのあるリージョンからエンドポイントは明らかなんですけどね。)
  5. ブラウザからエンドポイントにアクセスし、利用可能であることを確認する。
  6. 続いてAWSマネジメントコンソールでRoute53に進み、ホストゾーンからこのウェブサイトに使いたいドメイン名を選びます。
  7. そうしたらレコードセットの作成を選択し、名前を入力して、タイプにCNAMEを選択し、上記4-2でメモしたエンドポイントを値にセットして、作成ボタンをクリックします。
  8. 数分程度待つとDNS情報が浸透するので、ブラウザに上記7で作成したCNAMEの名前を入れてアクセスします。上記5と同じ表示になれば成功です。

CloudFrontを使う(ついでにHTTPSにも対応させる)

これも、わかってしまえば難しいことはない。

  1. AWSマネジメントコンソールで、CloudFrontに進み、Create Distributionボタンをクリックする。
  2. われわれはWebサイトのためのdistributionを作りたいので、Web側のGet Startボタンをクリックする。
  3. いろいろ入力覧があるが...
    1. Original Domain Nameに、ウェブサイトをホスティングしているS3バケットのエンドポイントを入力する。(つまり前節の7でCNAMEの値にセットした値である。)
    2. カーソルを入力覧に入れると、候補としてS3バケットが出てくるので、それを選ぶだけでOK
    3. Origin Pathは空欄でOK
    4. Origin IDは、Original Domain NameににS3バケットのエンドポイントを入力すると、自動的に決まるので何もしないでOK
    5. 他は特に指定する必要がないので、画面の一番下にあるCreate Distributionボタンをクリックする。
  4. そうするとdistributionができるので、できたdistributionを一覧から選択し、Generalタブを選択して、Editボタンをクリックする。
  5. いろいろ入力覧があるが...
    1. Alternate Domain Namesのところに、前節の7で作成したCNAMEのFQDNを入力する。
    2. 続いてSSL Certificateから、Custom SSL Certificateを選択する。
    3. テキストフィールドに上記5-1 Alternate Domain Namesに入力したFQDNを入力し、Request or Import a Certificate with ACMボタンをクリックする。
    4. するとACMで証明書を作成する手順が進むので証明書を作成する。
    5. 証明書が作成され、少し時間を置くと、上記5-2-1のテキストフィールドの選択肢にFQDN (証明書ID)の形式の選択肢が出てくるので、これを選ぶ。
    6. Yes Editボタンをクリックする。
  6. Generalタブに戻って、Domain Name (*.cloudfront.net)をメモする。
  7. AWSマネジメントコンソールでRoute53に進み、前節の7で作ったCNAMEのレコードセットの値を上記5でメモした*.cloudfront.netに変更する。
  8. Route53に登録したDNS情報が浸透し、また、CloudFrontのdistributionのstatusがInProgressからDeployedにかわるまで待って、ブラウザでアクセスする。

以上でOKであります。

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
9