この記事について
この記事では、ReactアプリをHTTPSで公開するために、S3+CloudFrontでどのような設定・操作を行えばいいのかを解説します。
また、ドメインを独自のものにしたい場合には追加でどのような設定が必要かも示します。
使用する環境・バージョン
- OS: macOS Catalina 10.15.7
- aws-cli/2.0.10 Python/3.7.4 Darwin/19.6.0 botocore/2.0.0dev14
前提条件
- AWS CLIは使用できる状態にセットアップされているものとします。
- 独自ドメインを購入済み&そのドメインのホストゾーンがRoute53に存在済みとします。
構成概要
実はS3だけでもバケットの中身をWebに公開できる「静的ウェブサイトホスティング」という機能が存在します。
しかし、S3のウェブサイトエンドポインとはHTTPSアクセスをサポートしていません。
そのため、S3の中身をHTTPSで公開したい！という場合は、CloudFrontというCDNサービスを噛ませる必要があります。
Reactアプリを作る
まずはReactアプリを作りましょう。今回はTypeScriptを使ってやってみます。
以下のコマンドを実行します。
$ npx create-react-app my-app --template typescript
するとmy-appというディレクトリが作成され、その中にReact新規プロジェクトが作成されます。
あとはReactアプリを自由に開発しましょう。
S3にアップロード
Reactアプリが出来上がったら、次にそれをS3にアップロードします。
s3のバケットを作成
AWSコンソールでS3の画面を開きます。
右上の「バケットを作成」をクリックします。
すると、作成するバケットの設定画面に遷移します。
ここで名前を決めます(好きな名前をつけてOKです)。
パブリックアクセスを全てブロックします。
その他はデフォルト設定のままにして、バケットを作成します。
バケットにアプリをアップロード
S3にアプリをアップロードするために、作ったReactアプリを本番環境用にビルドします。
そのために、my-appディレクトリ配下で以下のコマンドを実行します。
$ npm run build
すると、my-app配下に新たにbuildフォルダができ、その中に本番環境用に最適化・軽量化されたアプリのコードが格納されています。
このbuildフォルダ内のコンテンツを全て、以下のコマンドを用いて先ほどのS3にアップロードします。
# my-app配下で以下を実行
$ aws s3 cp ./build s3://[バケット名] --recursive
(おまけ)静的ウェブサイトホスティング設定はしなくていいの？
バケットを選択→プロパティタグ→静的ウェブサイトホスティングという設定があります。
構成概要のところで述べた通り、これを使えばS3の静的ホスティング機能でのコンテンツ公開ができるようになります。
CloudFrontを噛ませる場合は、これが無効でも大丈夫です。
CloudFrontでS3の中身を配信
次に、このS3の中身をCloudFront経由で配信するために設定を行います。
CloudFrontを開くと、以下のような画面になります。
画面中央の"Create Distribution"ボタンをクリックします。
今回はWebサイトを配信したいので、WEBディストリビューションの方で"Get Started"をします。
Origin Settings
まずは、配信するコンテンツそのものに関する設定を行います。
まずは、"Origin Domain Name"のところに、さっき作成したS3バケットを指定します(入力フォームにフォーカスすると、プルダウンメニューが出てくるので、その中から先ほどのS3バケットを選択しましょう)。
すると、OriginIDが自動的に埋まり、以下のように新しい設定入力タブが出現します。
そして、以下のように設定を入力します。
- Restrict Bucket Access: Yes
- Origin Access Identity: Create a New Identity
- Grant Read Permissions on Bucket: Yes
Restrict Bucket Accessは、S3コンテンツへのアクセスを、CloudFront経由のみに制限するかどうかの設定項目です。これをYesにすると、S3バケットに直接アクセスして中身をみようとする行為をブロックすることができます。
Origin Access Identity(OAI)は、S3へのアクセスがCloudFront経由かどうかを識別させるためのIDです。Distribution作成に伴って、それに関連づけたいOAIも新規作成したいので、"Create ~"を選択します。
設定フォームのCommentは、OAIの名称(説明)を書くところです。これはデフォルトのままでもいいですし、「何月何日に〜のために作ったOAI」と自分で書いてもいいです。
Grant Read Permissions on Bucketは、ここで指定したOAIにS3の閲覧権限を与えるかどうかの項目です。Yesを選択すれば、自動的にS3のアクセス権限をアップデートしてくれます。
Default Cache Behavior Settings
この部分の設定はデフォルトのままで大丈夫でしょう。
特筆すべき点としては、"Viewer Protocol Policy"のところで、HTTPアクセスを許可するかブロックするか、強制的にHTTPSに直すかを選択することができます。ここは好きに選択すればいいでしょう。
Distribution Settings
ここでは、以下の部分の設定を追加します。
- Default Root Object: index.html
これで、アクセスが来た場合は、S3中のindex.htmlにデフォルトで行くようになります。
デプロイ
ここまで設定できたら、画面下部の"Create Distribution"ボタンをクリックします。
すると、以下のようにエッジサーバーへのコンテンツ配信が始まります(StatusがIn Progressのときは配信中です)。
しばらく時間をおくとStatusがDeployedに変わります。これで準備は終わりです。
この状態になったら、Domain Nameに表示されているURLhttps://xxxxxxxxxx.cloudfront.netにアクセスしてみましょう。
すると、S3にアップロードしたReactアプリがHTTPSで見れるようになっているのがわかると思います。
独自ドメインにしたい
今のままでは、アプリが公開されているURLがCloudFrontデフォルトのhttps://xxxxxxxxxx.cloudfront.netのままです。
ここからは、これを既に持っている独自ドメインに変更する過程を紹介します。
AWS Certificate Managerで証明書発行
独自ドメインでもHTTPSで通信できるように、証明書を発行します。
このとき、リージョンをus-east1にしてから作業を行ってください。
(CloudFrontに利用する証明書はus-east1発行のもののみ使えるので、ap-northeast-1のままだとNGです)
AWS Certificate Managerを開くと以下の画面になります。
パブリック証明書のリクエストを選択します。
ここで、証明書で認証したいドメインを指定します。
例えば、example.comという独自ドメインを持っていた場合、ドメイン名のところには「*.example.com」を入力しました。
先ほど入力したドメインが有効なものかどうかをどうやって検証するかをここで選びます。
今回は「DNSの検証」を選択します。
タグの追加はせずに次に進むと、以下のような画面になります。
「ドメインのDNS設定に次のCNAMEレコードを追加します」という表示があります。先ほどのドメインの「DNS認証」というのは、今画面に表示されているCNAMEレコードをDNSサーバーに書き込むことで認証が行われる方法なのです。
「Route53でのレコード作成」ボタンをクリックします。
それほど時間が掛からずに成功表示が出ます。これで、Route53に自動でCNAMEレコードが入りました。
「続行」ボタンを押すと、証明書の申請は完了です。
最初は検証保留中の状態ですが、しばらく待つと発行済みになります。これで証明書が準備できました。
CloudFrontで独自ドメインを使用するよう設定
先ほどCloudFrontで作ったDistributionを開き、Settings→Editを選択します。
すると、以下のような設定編集画面が現れます。
ここで、以下のように設定します。
- Alternate Domain Names:
www.[独自ドメイン] - SSL Certificate: Custom SSL Certificateを選択して、先ほど作った証明書を指定します。
- Custom SSL Client Support: SNI
この状態で、設定を保存します。
Route53の設定
あとはRoute53の方で、「独自ドメインは、CroudFrontのデフォルトURLのエイリアスである」という情報の登録を行えばOKです。
Route53の独自ドメインホストゾーンにてレコードを作成します。
すると、以下のような画面になります。
「シンプルルーティング」を選んで「次へ」をクリックします。
「シンプルなレコードを定義」をクリックして、レコード追加の設定を行います。
- レコード名:
www.[独自ドメイン] - 値/トラフィックのルーティング先: CloudFrontへのエイリアス/米国北部/
xxxxxxxxxx.cloudfront.net(デフォルトのCloudFront URL) - レコードタイプ: A
このように入力したら、「レコードを定義」をクリックして保存します。
テスト
これで独自ドメインでの公開準備は全て終了です。
試しに、独自ドメイン(https://www.example.com)でブラウザからアクセスしてみると、S3の中身が表示されるはずです。
片付け
CloudFrontは使いっぱなしだとお金がかかるので、いらないのなら削除してしまいましょう。
CloudFrontの使用をやめたい場合は、コンソール上でDistributionをDisable→DeleteとすればOKです。
