こんにちは。トリドリといいます。
新卒で入社した会社でJavaを数年やった後、1年ほど前に転職してからはRailsを中心に使用してアプリケーションの開発をしているしがないエンジニアです。

今回、AWSの勉強をするために公式の10分間チュートリアルをやってみることにしたので、備忘のために記事に残していこうと思います。
AWSに関しては、１年ほど前転職活動をしていた時期にEC2とRDSを少し触っていた以外ほとんど触ったことが無い初心者です。
（ただし、このときにアカウントを作ったので、12ヶ月の無料枠は切れていました）

前回は、「Docker コンテナのデプロイ」をやりました。
今までにない数のいいねをいただいて、トレンドにも載ってびっくりしています。

今回は「Deploy and host a ReactJS app」をやっていきます。

Deploy and host a ReactJS app

(https://aws.amazon.com/jp/getting-started/tutorials/deploy-react-app-cicd-amplify/)

[AWS Amplify Console]はGitベースでSingle Page Applicationや静的サイトを開発・デプロイ・ホスティングするためのサービスです。
このチュートリアルではReactのアプリケーションをデプロイしていきます。

1. Sign up for AWS

AWSのアカウントはすでに作成しているので、サインインしておきます。

2. Confirm environmental setup

ターミナルを開き、以下のコマンドでnodeのバージョンを確認します。

node -v;

command not foundが出る場合はチュートリアルのリンク先からダウンロードします。
また、バージョンが8以下のときは更新します。

3. Create a new React application

npx create-react-app amplifyapp

でamplifyappという名前のReactアプリケーションを作成します。

npxについては、下記が詳しそうでした。
https://dev.classmethod.jp/node-js/node-npm-npx-getting-started/

ちなみに、実行したところ下記のようなエラーが発生しました。

npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! network request to https://registry.npmjs.org/create-react-app failed, reason: read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network proxy' config is set properly. See: 'npm help config'

npm ERR! A complete log of this run can be found in: 
npm ERR! /Users/xxx/.npm/_logs/2020-02-16T10_41_14_3742-debug.log ]
コード [ 'create-react-app@latest' ]でのインストールに失敗しました

以前の記事でネットワーク関係のエラーが出たときにカスペルスキーが関連しているという話があったので、もしかしてと思いカスペルスキーを再起動をしたところ無事作成できました。

作成できたら、

cd amplifyapp
npm start

で起動してみます。

4. Initialize GitHub repository

a./b.

チュートリアルに従ってGitHubでリポジトリを作成し、3.で作成したアプリケーションをpushします。

5. Log in to the AWS Amplify Console

AWSコンソールから[サービス]->[モバイル]にある[AWS Amplify]を開きます。
チュートリアルの通り、検索したほうが早いです。

6. Deploy your app to AWS Amplify

作成したアプリケーションをデプロイします。

a./b.

チュートリアルに従って、[Deploy]の下にある[Get Start]を押し、次の画面で[GiftHub]を選択して[Continue]を押します。

c.

GitHubの認証画面が表示されるので、認証します。

認証が完了したら、4.で作成したリポジトリとブランチを選択し[次へ]を押します。

d./e.

チュートリアルの通り、[ビルド設定の構成]はデフォルト設定で次へ進み、確認画面で[保存してデプロイ]を押します。

f.

作成が開始すると次のような画面が表示されます。

[検証]まですべて緑のチェックになるとデプロイ完了です。

g.

デプロイが完了すると、サムネイルまたはその下のURLからアクセスすることができます。
アクセスすると、3.で起動したアプリケーションと同じように起動しているのが確認できます。

7. Automatically deploy code changes

a.

チュートリアルの通り、ソースを編集した上でGitのmasterブランチに変更をpushします。

pushすると、自動的にAmplify Console上の最終コミットが更新され、デプロイが実行されます。

b.

デプロイ完了後に再度URLにアクセスすると変更点が反映されています。

8. Clean up your resources

最後にアプリケーションを削除します。
チュートリアルの通り、アプリケーションの詳細から[アクション]ｰ>[アプリの削除]をクリックします。
下記の通り、確認のダイアログが表示されるので、削除して問題なければdeleteを入力した上で[Delete]ボタンを押します。

削除されるとメッセージが表示された上で、Amplify Consoleのトップに戻ります。

まとめ

GitHubと接続して、ブランチを更新したら自動的にデプロイしてくれるAmplifyConsoleはとても便利でした。
ちなみに、手元にあったRailsのリポジトリをデプロイしようとしたところビルドでエラーになりました。
今後SPAで開発するときがあったら使用してみたいと思います。

次は「コンテンツを迅速に配信する」をやっていきます
残りの[ウェブサイトとアプリケーション]のチュートリアルがサーバーレス関係ばかりになったのでここで一区切りとし、次回でこの形でチュートリアルをやるの最後にする予定です。