こんにちは。トリドリといいます。
新卒で入社した会社で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で開発するときがあったら使用してみたいと思います。
次は「コンテンツを迅速に配信する」をやっていきます
残りの[ウェブサイトとアプリケーション]のチュートリアルがサーバーレス関係ばかりになったのでここで一区切りとし、次回でこの形でチュートリアルをやるの最後にする予定です。
