見出し画像

AWS 入門の記録（１２２）Amplify でReact アプリケーションをホストしてみる（その２）

jnkykn

前回、React公式チュートリアルで作成した三目並べをAWS Amplifyでホストしてみようと思いたち、GitHubとの接続ができたものの、デプロイした結果は真っ白なページでした。今回は、デプロイして、ゲームが実行できることを確認しました。

AWS AmplifyでReactアプリケーションをホストする

基本に戻ろう

AWS公式ドキュメントの「AWS で React アプリケーションを構築する」のReactアプリケーションの初期状態のままデプロイしてみることにしました。手順に従って操作している途中、ふと「フレームワーク React って自動認識されているし、ビルド設定も警告が表示されていない」ことに気が付きました。

Reactと自動認識されている
デプロイした結果もOK

一方、私の三目並べの方は、フレームワークはWebと表示されていて

Reactって認識されていない

ビルドも、警告が表示されていて、パス設定など空欄になっていました。何が違うのか？「npx create-react-app amplifyapp」で作成した基本のアプリケーションと比較してみました。すると、

リポジトリのディレクトリが１階層深い！

つまり、アプリケーションのディレクトリの１階層上で、Gitへのソース追加をしてしまっていたのでした。Amplifyはリポジトリと同期すると、そこをアプリケーションのルートとして使用するので、その下の階層にあると、Reactアプリケーションとは認識してくれないんですね。

正しいディレクトリからプッシュし直し

正しいディレクトリと接続して、ソースをプッシュしました。同期をしたので、前回のソースはディレクトリごと削除されました。これで大丈夫かな？

他にもソース壊れたのを修正したり。。。

表示を確認

今度はビルド設定も自動でReactと認識されたので、設定を変更しなくてもビルドしてデプロイできました。実行確認をしてみると、白いのです。前回EC2では実行できていたので、EC2でも念の為実行してみました。そしたら、こちらも白いのです。

EC2でも白い！！！

ということは、ソースが壊れているということです。先ほど、試しにReactDOM.renderの位置をimportの直後に移動したのを、もとに戻しました。（上から順番に処理されるってことか。。。）EC2で実行できることを確認しました。

このバージョンをGitHubにプッシュしてAmplifyでホストしようと思います。

履歴も表示できた！

少々迷子になりかけましたが、Reactチュートリアルの三目並べをAWS Amplifyでホストすることができました！うれしい！
ちなみに、AWS Amplifyの料金は、基盤として使用する AWS のサービスに対してのみ発生するので、Amplify フレームワークの使用には、追加料金は発生しないそうです。静的ウェブホスティングには無料枠があるので、お試ししやすい！

さて、今回の学習はここまで。次回は次の週末の予定です。Reactの学習は別テーマとしてAWS入門の記録と分けたほうがいいかなぁと考え中です。


この記事が気に入ったらサポートをしてみませんか？