RareTECH受講生ブログ

RareTECHの受講生がアウトプットに利用しているブログです。

【AWS】ReactをS3にデプロイしCloudFrontで表示するテスト

f:id:terralien:20220217033346j:plain
見出し画像つけ忘れてTwitter投稿したら表示された画像

こんにちはRareTECH1ヶ月ちょいとなった寺です。 難易度高いことで脳みそ雲丹になると適当なアウトプットして仕事やってる感を出してます。

ハッカソンでフロントエンドで使用する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


  1. AWSでS3コンソールに移動し、バケットを作成します
  2. バケット作成設定項目
  3. 静的ウェブサイトホスティング設定
  4. バケットポリシーの作成
  5. ブラウザで動作確認

S3コンソールでバケット作成

まずはAWSのS3コンソールへ(アカウントある前提のお話) サービスのところのフォームで検索するなどし開きます。

f:id:terralien:20220217020502p:plain

とりあえず「バケットを作成」ボタンでバケットを作成していきます。

f:id:terralien:20220217025438p:plain

※タブを見て分かる通りめちゃくちゃ関連する情報をググってますw

設定項目

まずはバケット名をつけます。 一意の名前を付ける決まりがあるので、被った場合は名前の後ろに日付付けるなどで回避します。

f:id:terralien:20220217020740p:plain

次にこのバケットのブロックパブリックアクセス設定を行います。

f:id:terralien:20220217020808p:plain

書いてる日本語は読めるのに理解が難しいですw 以下の記事が参考になります。

zenn.dev

続けます。

まず

☑パブリックアクセスをすべてブロック

のチェックを外し、

☑新しいアクセスコントロールリスト(ACL)を介して付与されたバケットとオブジェクトへのパブリック・アクセスをブロックする

☑任意のアクセスコントロールリスト(ACL)を介して付与されたバケットとオブジェクトへのパブリック・アクセスをブロックする

の2つにチェックを入れます。おまじないみたいなもんです。

そして警告が出ているので怯みますが気にせず

☑現在の設定により、このバケットバケット内のオブジェクトが公開される可能性があることを承認します。

にも☑いれます。入れないとオブジェクトの表示ができません。(ハマリポイント)

他の設定は今回デフォルトのままおいといてバケットを作成します。

f:id:terralien:20220217021017p:plain

これでS3バケットが完成しました。コンソール画面で他の設定をしていきます。

f:id:terralien:20220217030608p:plain

静的ウェブサイトホスティング

S3バケットの名前部分を選択して「プロパティ」を開き、一番下にある「静的ウェブホスティング」を設定していきます。

編集ボタンを押し、

静的ウェブホスティング

有効にする

ホスティングタイプ

そのまま

インデックスドキュメント

index.html (ハマリポイント)

エラードキュメントオプション

error.html

これは今回ページ作成しないので指定しなくてもいいと思いますがなんとなく。

f:id:terralien:20220217022005p:plain

変更を保存ボタンを押すと、エンドポイントが作成されます。

f:id:terralien:20220217025357p:plain

次は確認用の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ファイルをアップロードします

オブジェクトタブのアップロードボタンからファイルアップロードが出来ます。

f:id:terralien:20220217022159p:plain

ファイルを追加ボタンでファイルを選択するか、ドラッグアンドドロップでアップロードするファイルを選択します。

アップロードするボタンを押し忘れないように(ハマリポイント)

バケットポリシーの作成

アクセスを許可タブに移動します

少し下にバケットポリシー項目があるので編集ボタンを押し、下記のコードをコピペします。

{
  "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を貼り付けて下さい。/*部分を消さないように!

編集完了したら変更の保存ボタンを忘れないように押しましょう(ハマリポイント) ※ハマリポイントは実際ポカミスでハマったところですw

ブラウザで動作確認

静的ウェブホスティングのところにあるエンドポイントをブラウザに貼り付ければ確認できます。

f:id:terralien:20220217025521p:plain

S3での静的ウェブホスティングテストが完了しました。 次へ進みます

CloudFrontをあてる


手順

  1. AWSでCloudFrontのディストリビューションを作成します
  2. 設定項目
  3. ブラウザで動作確認

CloudFrontのディストリビューションを作成

オリジンドメインにカーソルを合わせると先程作成したS3バケットが表示されるので選択します。

f:id:terralien:20220217030056p:plain

設定項目

その他は大体デフォルトでいいですが、1点ハマリポイントとなる変更せねばならない箇所と、任意で変更するといい箇所があるので以下の通り。

まずは上から順に、任意に変更箇所 設定項目の料金クラス

f:id:terralien:20220217022730p:plain

一番下の「北米、欧州、アジア、中東、アフリカを使用」を選択するといくらか安くなるらしいです。 でもまあテストなんで気にせず「すべてのエッジロケーションを使用する」にしましたw

次に変更せねばならない箇所 デフォルトルートオプションにindex.htmlを入れておかないと表示されない(ハマリポイント)

f:id:terralien:20220217022953p:plain

以上で「ディストリビューションを作成」ボタンを押します。

ブラウザで動作確認

CloudFrontコンソールに戻ってIDを押すと一般タブでディストリビューションドメイン名が取得できます。

f:id:terralien:20220217030309p:plain

これをブラウザにはりつけると

f:id:terralien:20220217025558p:plain

完了 次へ進みます

ReactをS3にデプロイする


手順

  1. Reactアプリをビルド
  2. S3にアップロード
  3. ブラウザで動作確認

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にアップロードします。

f:id:terralien:20220217023515p:plain

S3バケットの「アップロード」画面に全選択からの「ファイルとフォルダ」あたりにドラッグアンドドロップしちゃいます。

f:id:terralien:20220217041334p:plain

プラウザで動作確認

さっき使ったCloudFrontのURLをShift+F5でスーパーリロードしてみましょう。

f:id:terralien:20220217025624p:plain

できてるようです。 念のためCloudFrontがしっかり働いてくれてるかチェックします。

ChromeのDeveloperツールでCloudFrontのキャッシュ状態を確認


ブラウザは何でもいいと思います。 右クリックで検証 > Network > Nameのとこの~cloudfront.netを選択 > Header > X-Cache

ここがHit from cloudfrontになってればOKです。

f:id:terralien:20220217041822p:plain

「hit」してるのでキャッシュがうまく表示されています。 ターミナルなどで curl -i url コマンドでも確認できると思います。

これにてテスト完了です

参考資料

参考にさせていただいたサイトをほぼなぞっただけとなりましたが、めちゃくちゃ理解が深まりました! 感謝しかありません。


こちらビルドにyarnつかってるのでnpm run buildを使用します…がハマリポイントありました。

【React】 AWSにデプロイする - Qiita

WindowsVscode下Gitbashで実行したところnpm run buildが上手く行かなかったのでトランスパイラのbabel入れたところ解消しました

超超最低限のReactのコンパイル環境の構築手順 - Qiita

ナレッジの共有は多分大事

お互いに教えあえる環境があるとめちゃくちゃ理解がはかどります。

以下テンプレ

RareTECHに興味のある方は、こちらのHPをご覧ください。
無料体験授業も行っていますので、ぜひご参加くださいね。

raretech.site