Help us understand the problem. What is going on with this article?

AWSの10分間チュートリアルをやってみる 10.Deploy and host a ReactJS app

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

今回、AWSの勉強をするために公式の10分間チュートリアルをやってみることにしたので、備忘のために記事に残していこうと思います。
AWSに関しては、1年ほど前転職活動をしていた時期に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の認証画面が表示されるので、認証します。
image.png
認証が完了したら、4.で作成したリポジトリとブランチを選択し[次へ]を押します。

d./e.

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

f.

作成が開始すると次のような画面が表示されます。
image.png
[検証]まですべて緑のチェックになるとデプロイ完了です。

g.

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

7. Automatically deploy code changes

a.

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

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

b.

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

8. Clean up your resources

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

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

まとめ

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

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

giftee
giftee (株式会社ギフティ) は、ソーシャルギフトサービス 「giftee」、法人向けデジタルギフトチケット販売画面の提供、その他O2Oソリューションなどを展開する五反田のスタートアップです。(onlab第1期, KDDI ∞ LABO 第1期)
https://giftee.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした