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

React入門しつつ、これをサーバレスで実行すればAWS入門ネタになりそうだって思ったんです。が、どうやってサーバレス実行すればいいんだろう？Lambda関数にすればいいのかな？って思って調べてみたけど、やりたいことはフロント処理だけなので、何かが違います。去年あちこちで目にした「Amplify」がヒントになりそうです。今日は、Amplifyについて学習します。

AWS Amplify のウェブホスティングサービスでReactアプリケーションをデプロイする

AWS公式ドキュメントの Reactアプリケーションの構築を参考に、React 公式チュートリアルで作成した三目並べを、EC2上ではなくサーバレスで実行してみます。ドキドキ。

学習内容

1. 新しい React アプリケーションを作成する

2. GitHub リポジトリを初期化する

3. アプリを AWS Amplify でデプロイする

4. コードの変更を実装してアプリを再デプロイする

このうち、「1.新しいReactアプリケーションを作成する」は、前回完成させた三目並べを使用するので、「2.GitHub リポジトリを初期化する」以降の手順を学習します。GitHubアカウントを持っていないので、アカウントを登録して、アプリ用のリポジトリを登録しました。

EC2にgitをインストールする

三目並べアプリは EC2 に作成したので、EC2にgitをインストールして、GitHubに三目並べのソースをプッシュします。AWSのEC2にgit cloneする方法（GitHub）（@konshun_programさん）を参考に、gitをインストールして、ソースをプッシュします。

新しいコンソール、見やすくなった！？

gitのインストール

SSH-Keyを生成して、GitHubのSSHKeyに設定しました

これでGitHubと通信可能になったっぽい！

initial commitできた！

AWS Amlify でデプロイしてみる！

初めてのAmlify！

GitHubを選択して開始

GitHubの認証に成功！

アプリケーションのリポジトリのmasterブランチを選択

defaultの設定のまま次へ

確認後、保存してデプロイ

作成中。。。

できたらしい！！！

むむむ、白い画面！！！

マス目も何も表示されていない！！！

アプリケーションを削除して、ビルド設定をドキュメントに従って編集

うーん、ビルド設定を間違っているみたい。。。

失敗したので、次回解決したい

うーん、ビルド設定に問題があり、三目並べが表示できませんでした。ちなみに、EC2で実行すると、このように三目並べが遊べます。

EC2では実行できているのになぁ。。。

失敗したアプリケーションを削除しました

失敗したプリケーションを削除して、EC2を停止しました。今日はここまででタイムアップです。次回、問題を解決して三目並べをデプロイしたいと思います。続きは、次の週末の予定ですが、もしかしたら、その前に解決できたら投稿するかもしれません。うーん、残念。とほほ。。。