ReactJS アプリケーションをデプロイしてホストします

AWS Amplify コンソールを使用します

AWS Amplify コンソールは、サーバーレスバックエンドを持つ静的ウェブサイトあるいは単一ページのウェブアプリケーションの開発、デプロイ、ホスティングのための詳細なワークフローを提供します。Git リポジトリに接続すると、Amplify では、Amplify CLI で設定されたフロントエンドフレームワークと任意のサーバーレスバックエンドのリソースについてビルド設定を自動的に決定します。

このチュートリアルでは、まず新しい React アプリケーションを作成し、それを GitHub リポジトリにプッシュします。  その後、Amplify コンソールに接続し、amplifyapp.com ドメイン上でホストされる、グローバルに利用可能なコンテンツ配信ネットワーク (CDN) にデプロイします。次に、React アプリケーションに変化を加えることで継続的デプロイ機能を説明し、マスターブランチに新しいバージョンをプッシュして自動的に新しいデプロイが開始するようにします。

このチュートリアルはすべて無料利用枠の範囲で実行できます。

このチュートリアルの内容
時間 10 分                                           
料金 無料利用枠の対象
ユースケース ウェブサイトとウェブアプリ
製品 AWS Amplify コンソール
対象者 開発者
レベル 初心者
最終更新日 2018 年 3 月 4 日

1.AWS へのサインアップ

AWS Amplify コンソールでこのチュートリアルを使用するには、AWS アカウントが必要です。このチュートリアルでの AWS Amplify は追加料金なしで使用できます。このチュートリアルで作成するリソースは無料利用枠の対象です。 

2.環境の設定を確認する

コマンドラインインターフェイスを開き、次のコマンドを入力します。

node -v;

このコマンドで v8.0 未満が返された場合は、ノードを 8 以上のバージョンにアップグレードする必要があります。コマンドが見つからない場合は、nodejs.org/download からノードをインストールします。

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

簡単に React アプリケーションを作成するには、create-react-app のコマンドを使用します。以下のコマンドを使用して、このパッケージをインストールします。

npx create-react-app amplifyapp
cd amplifyapp
npm start

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

このステップで、GitHub レポジトリを作成してコードをレポジトリにコミットします。このステップを完了するには、GitHub アカウントが必要です。まだお持ちでない場合はこちらでサインアップしてください。 

a.アプリ用の新しい GitHub レポジトリを作成します (リンク)。

b.Git を初期化して、コマンドラインインターフェイスで以下のコマンドを実行する新しい GitHub レポジトリにアプリケーションをプッシュします。

git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m ‘initial commit’
git push origin master

5.AWS Amplify コンソールにログインする

このステップバイステップガイドを開いたままにしておくため、AWS マネジメントコンソールを別ウィンドウで開きます。画面が読み込まれたら、ユーザー名とパスワードを入力して作業を開始します。次に、検索バーに [Amplify] と入力して [AWS Amplify] を選択し、サービスコンソールを開きます。

6.アプリを AWS Amplify にデプロイする

このステップでは、先ほど作成した GitHub レポジトリを AWS Amplify サービスに接続します。これにより、アプリを AWS 上でビルド、デプロイ、ホストできるようになります。

a.[デプロイ] の下にある [開始] を選択します。

b.レポジトリサービスとして [GitHub] を選択し、[次へ] を選択します。

c.GitHub で認証し、Amplify コンソールに戻ります。先ほど作成したレポジトリとマスターブランチを選択し、[次へ] を選択します。

d.デフォルトのビルド設定を使用し、[次へ] を選択します。

e.最終的な詳細を確認し、[保存してデプロイ] を選択します。

f.AWS Amplify コンソールによってソースコードがビルドされ、アプリが https://<branchname>.<appid>.amplifyapp.com にデプロイされます。

g.ビルドが完了したら、サムネイルを選択してウェブアプリが稼動していることを確認します。

tmt-react-ClickThumnail

7.コードの変更を自動的にデプロイする

このステップでは、コードにいくつかの変更を加えて、その変更をアプリのマスターブランチにプッシュします。

a.src/App.js ファイルを編集します。

b.ビルドが完了したら、AWS Amplify コンソールのサムネイルを選択して更新されたアプリを確認します。

tmt-react-7b-2

8.リソースをクリーンアップする

AWS Amplify コンソールで作成したリソースは簡単に終了させることができます。ベストプラクティスとしては、使用しないインスタンスは終了させ、その後の課金を停止させることを推奨します。

[アクション] を選択し、[アプリを削除] を選択します。モーダルが開いたら、「delete」と入力してアプリを削除することを確認します。アプリが削除されました。

おめでとうございます

Amplify コンソールを使用して GitHub と統合することによって、クラウドで React アプリケーションをデプロイできました。

AWS Amplify コンソールでは、継続的にアプリケーションをクラウドにデプロイし、グローバルで利用可能な CDN でホストできます。

このチュートリアルは役に立ちましたか?

ありがとうございます
このチュートリアルで良かった点をお聞かせください。
ご期待に添えず申し訳ありません
古い説明、わかりにくい説明、間違った説明はございませんでしたか? このチュートリアルの改善のために、ぜひフィードバックをお寄せください。