reactページをS3に上げてhttps化するまで

todo aws

https://mydomain.comでバケットA
https://sub.mydomain.comでバケットB
のreactページを表示させようとした際のメモです。
一通り作業した後の走り書きなので抜けてる作業があるかもしれません。

reactのビルド

npm run buildした後にindex.htmlを開くと真っ白なのでpackage.jsonにhomepageを追記

  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",

もう1回npm run buildしてindex.htmlを確認

S3にアップロード

バケット作ってbuildフォルダの中身を全てアップロード
バケットのルートにindex.htmlが来るようにします

静的webホスティングで確認

バケットの設定で

静的ウェブサイトホスティング有効
　ホスティングタイプ
　　静的ウェブサイト
　インデックスドキュメント
　　index.html　
ブロックパブリックアクセスを全てオフ
バケットポリシーでs3:GetObjectを許可(編集画面で右側のヘルパー見ながらやる)

静的ウェブサイトホスティング欄にエンドポイント表示されるのでアクセス

前項でページがアップロードできていることを確認したらバケットをプライベートに戻します。

静的ウェブサイトホスティングをオフ
バケットポリシー削除
ブロックパブリックアクセス全てオン

独自ドメインおよびhttpsでのアクセスするためにはcloudfrontを経由する必要があり、その際にOACという機能を使ってプライベートバケットにアクセスすることができます。

ドメイン取得

(覚えてないので省略)
route53にドメイン名のホストゾーンといくつかのNSレコードができるはず

SSL証明書作成(ACM)

us-east1に移動
us-east1以外で作成した証明書はcloudfrontの設定時に認識できないため

リクエスト  
パブリック証明書をリクエスト  
ドメイン名にドメイン名とサブドメイン名を入力
DNS検証
リクエスト

このまま待っても検証終わらないので追加作業

検証が保留中の証明書をクリック  
ドメイン->Route53でレコードを作成  (ドメイン取得時に作ったroute53ホストゾーンに対してCNAMEレコードを追加)
数分すると検証が完了する

S3バケットとcloudfrontの紐付け

ディストリビューションを作成
オリジンドメイン
　(s3バケットを選択)
オリジンアクセス
　Origin Access Control Settings
　コントロール設定を作成
　バケットポリシーを更新
Redirect HTTP to HTTPS
代替ドメイン名
　ドメイン名を入力
カスタムSSL証明書
　ACMで作成した証明書を選択
デフォルトルートオブジェクト
　index.html

ドメイン名とcloudfrontの紐付け(route53)

route53でホストゾーン選択
レコード作成
レコードタイプ
　A
エイリアスにチェック
作成したcloudfrontディストリビューションを選択

https://(ドメイン名)でアクセスしてページが表示されるか確認

おまけ) サブドメインで別バケットのページも表示させるには？

上の作業に続けて

をします。

SSL証明書の作成、cloudfrontオリジンに複数のドメインを指定できるのでサブドメインへの振り分けも含めて一つのディストリビューションで実現できるのかと思いましたが、
ビヘイビアでドメイン名に応じた振り分けができないので別のディストリビューションを用意する必要があると思われます。