こんにちはRareTECH１ヶ月ちょいとなった寺です。 難易度高いことで脳みそ雲丹になると適当なアウトプットして仕事やってる感を出してます。
ハッカソンでフロントエンドで使用するReactのデプロイ先をS3にするということが決まりました。 事前準備としてデプロイのテストを行ったのでその辺の知識を皆さんと共有しとこうと思いました。 ※ハッカソンチームで共有したナレッジを再編（ほぼそのまま）して掲載しています。
学べること
S3にHello worldできる それをCLoudFrontでキャッシュできる さらに流行りのフロントエンド環境Reactをデプロイできる…！ のテストが出来ます。
ちなみに私のITレベルは HTML, CSS, JavaScriptをなんぼかかじった程度です。
ハッカソンで選定された技術
フロントエンド ReactとTypeScript
バックエンド FastAPI
インフラ AWSでECS、Fargate
開発環境 Docker、Github
よしなにひとつさわったことないぞ！（Github以外）😇
やること
S3で静的ウェブサイトホスティング
CloudFrontでキャッシュ
Reactをデプロイしてみる
まずはS3でHelloWorld
S3コンソールでバケット作成
まずはAWSのS3コンソールへ（アカウントある前提のお話） サービスのところのフォームで検索するなどし開きます。
とりあえず「バケットを作成」ボタンでバケットを作成していきます。
※タブを見て分かる通りめちゃくちゃ関連する情報をググってますｗ
設定項目
まずはバケット名をつけます。 一意の名前を付ける決まりがあるので、被った場合は名前の後ろに日付付けるなどで回避します。
次にこのバケットのブロックパブリックアクセス設定を行います。
書いてる日本語は読めるのに理解が難しいですｗ 以下の記事が参考になります。
続けます。
まず
☑パブリックアクセスをすべてブロック
のチェックを外し、
☑新しいアクセスコントロールリスト（ACL）を介して付与されたバケットとオブジェクトへのパブリック・アクセスをブロックする
と
☑任意のアクセスコントロールリスト（ACL）を介して付与されたバケットとオブジェクトへのパブリック・アクセスをブロックする
の２つにチェックを入れます。おまじないみたいなもんです。
そして警告が出ているので怯みますが気にせず
にも☑いれます。入れないとオブジェクトの表示ができません。（ハマリポイント）
他の設定は今回デフォルトのままおいといてバケットを作成します。
これでS3バケットが完成しました。コンソール画面で他の設定をしていきます。
静的ウェブサイトホスティング
S3バケットの名前部分を選択して「プロパティ」を開き、一番下にある「静的ウェブホスティング」を設定していきます。
編集ボタンを押し、
静的ウェブホスティング
有効にする
ホスティングタイプ
そのまま
インデックスドキュメント
index.html （ハマリポイント）
エラードキュメントオプション
error.html
これは今回ページ作成しないので指定しなくてもいいと思いますがなんとなく。
変更を保存ボタンを押すと、エンドポイントが作成されます。
次は確認用のindex.htmlファイルをアップロードしましょう
適当なフォルダでindex.htmlを作成 中身はハローワールドな感じで作成します。 めんどければ以下をコピペ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1> Go to Hello Work! </h1> </body> </html>
S3バケットにindex.htmlファイルをアップロードします
オブジェクトタブのアップロードボタンからファイルアップロードが出来ます。
ファイルを追加ボタンでファイルを選択するか、ドラッグアンドドロップでアップロードするファイルを選択します。
アップロードするボタンを押し忘れないように（ハマリポイント）
バケットポリシーの作成
アクセスを許可タブに移動します
少し下にバケットポリシー項目があるので編集ボタンを押し、下記のコードをコピペします。
{ "Version":"2012-10-17", "Statement":[ { "Sid":"PublicRead", "Effect":"Allow", "Principal": "*", "Action":["s3:GetObject","s3:GetObjectVersion"], "Resource":["arn:aws:s3:::xxxxxxxxxxx/*"] } ] }
Resourceのarn:aws:s3:::xxxxxxxxxx部分は自分で作成したバケットのarnを貼り付けて下さい。/*部分を消さないように！
編集完了したら変更の保存ボタンを忘れないように押しましょう（ハマリポイント） ※ハマリポイントは実際ポカミスでハマったところですｗ
ブラウザで動作確認
静的ウェブホスティングのところにあるエンドポイントをブラウザに貼り付ければ確認できます。
S3での静的ウェブホスティングテストが完了しました。 次へ進みます
CloudFrontをあてる
手順
- AWSでCloudFrontのディストリビューションを作成します
- 設定項目
- ブラウザで動作確認
CloudFrontのディストリビューションを作成
オリジンドメインにカーソルを合わせると先程作成したS3バケットが表示されるので選択します。
設定項目
その他は大体デフォルトでいいですが、１点ハマリポイントとなる変更せねばならない箇所と、任意で変更するといい箇所があるので以下の通り。
まずは上から順に、任意に変更箇所 設定項目の料金クラス
一番下の「北米、欧州、アジア、中東、アフリカを使用」を選択するといくらか安くなるらしいです。 でもまあテストなんで気にせず「すべてのエッジロケーションを使用する」にしましたｗ
次に変更せねばならない箇所
デフォルトルートオプションにindex.htmlを入れておかないと表示されない（ハマリポイント）
以上で「ディストリビューションを作成」ボタンを押します。
ブラウザで動作確認
CloudFrontコンソールに戻ってIDを押すと一般タブでディストリビューションドメイン名が取得できます。
これをブラウザにはりつけると
完了 次へ進みます
ReactをS3にデプロイする
手順
- Reactアプリをビルド
- S3にアップロード
- ブラウザで動作確認
Reactアプリをビルド
事前準備として適当なディレクトリを準備し、サンプルToDoアプリをGithubからクローンします。
git clone https://github.com/reduxjs/rtk-convert-todos-example.git
該当ディレクトリに移動しnpm run buildします。
上手く行かない時は環境にトランスパイラであるbabelを入れてみましょう（ハマリポイント）
npm install --save-dev babel-cli
S3にアップロード
buildコマンドを実行すると「build」ディレクトリが出来ますので、その中身をすべてS3にアップロードします。
S3バケットの「アップロード」画面に全選択からの「ファイルとフォルダ」あたりにドラッグアンドドロップしちゃいます。
プラウザで動作確認
さっき使ったCloudFrontのURLをShift+F5でスーパーリロードしてみましょう。
できてるようです。 念のためCloudFrontがしっかり働いてくれてるかチェックします。
ChromeのDeveloperツールでCloudFrontのキャッシュ状態を確認
ブラウザは何でもいいと思います。 右クリックで検証 > Network > Nameのとこの～cloudfront.netを選択 > Header > X-Cache
ここがHit from cloudfrontになってればOKです。
「hit」してるのでキャッシュがうまく表示されています。
ターミナルなどで curl -i url コマンドでも確認できると思います。
これにてテスト完了です
参考資料
参考にさせていただいたサイトをほぼなぞっただけとなりましたが、めちゃくちゃ理解が深まりました！ 感謝しかありません。
こちらビルドにyarnつかってるのでnpm run buildを使用します…がハマリポイントありました。
WindowsのVscode下Gitbashで実行したところnpm run buildが上手く行かなかったのでトランスパイラのbabel入れたところ解消しました
超超最低限のReactのコンパイル環境の構築手順 - Qiita
ナレッジの共有は多分大事
お互いに教えあえる環境があるとめちゃくちゃ理解がはかどります。
以下テンプレ
RareTECHに興味のある方は、こちらのHPをご覧ください。
無料体験授業も行っていますので、ぜひご参加くださいね。