s3の静的ホスティングをhttps化する
背景
以下の対応で、httpのリンクではスマホアプリであるiOS版でエラーが吐かれてしまう。
※正確にはhttpを許可する設定もあるようだが、appleに審査を依頼することを考えると、後々困る前に、https化する対応を検討する必要があるので、対応していく。
前提条件
以下の準備が終わっていること
・ドメインの作成
・静的ホスティングするものをS3で構築済み
ゴール
・利用規約であるhtmlファイルが、httpsで取得できるようになる
・SSL証明書を発行する
・CloudFront経由でリリースできること
作業
CloudFront設定
・CloudFrontを開く
・ディストリビューションを作成をクリックする
・以下を入力する
→s3の対象のバケットを選択
→オリジンパスはからにする
→名前は変更せずにそのまま
→Origin access control setting (recommend)を設定
→Create new OACを選択→Createを押下する
→代替ドメイン名に、今回のサブドメイン名を入れる
→カスタムSSL証明書の箇所で、証明書をリクエストを押下します。
※失念してしまいましたが、何かの機能のために、バージニア北部に地域を設定する必要がありました。
・そのまま証明書を進めていきます。
→ドメインはs3で作るサブドメインの名称を入れてください
→発行まで進めます。
・証明書の詳細に入り、Route53でレコードを作成を押下して、進めます。
※CNAMEに紐づけるために、SSL証明書が終わる前に作成を押下します。
※CNAME作成後、数分すると完了していました。
・SSL証明書が発行後、設定からカスタムSSL証明書の選択から、発行されたものを選択して、設定する
ドメインにCNAMEの追加
※バケット名がサブドメインの場合、CNAMEでその名前を定義します。
・Route53を開いて、ホストゾーンに遷移し、
・対象のドメインを選択し、編集画面に遷移する
・レコードを作成をクリックする
※CNAMEレコードをサブドメインの名前で追加
・シンプルルーティングのまま変更せずに次へを押下する
・シンプルなレコードを定義のボタンをクリックする
・以下を入れる
→バケットで設定したサブドメイン名
→CNAMEレコード
→レコードタイプは先ほど作成したCloudFrontで作成したディストリビューションの「ディストリビューションドメイン名」を入力します。
・シンプルなレコードを定義で作成します。
・レコードを作成を押下します。
バケットポリシーの変更
・S3にアクセスし、
・パブリックアクセスを全てブロックをオンにする
・バケットポリシーを加える
※セキュリティーの関係上公開はしない
※概要はcloudfront経由でのみしかアクセスできないようにしている。
結果
無事にhttps通信ができるようになりました。
元々起因していたreact-native側に実装をしていきたいと思います。
Discussion