AWS の開始方法
React アプリケーションの構築
AWS Amplify を使用してシンプルなウェブアプリケーションを作成する
モジュール 1: React アプリケーションをデプロイしてホストする
このモジュールでは、React アプリケーションを作成し、AWS Amplify のウェブホスティングサービスを使ってそれをクラウドにデプロイします。
はじめに
AWS Amplify は、サーバーレスバックエンドを持つ静的ウェブサイトあるいは単一ページのウェブアプリケーションの構築、デプロイ、ホスティングのための詳細なワークフローを提供します。Git リポジトリに接続すると、Amplify では、Amplify CLI で設定されたフロントエンドフレームワークと任意のサーバーレスバックエンドのリソースの両方のビルド設定を決定し、すべてのコードコミットを使用して自動的に更新をデプロイします。
このモジュールでは、まず新しい React アプリケーションを作成し、それを GitHub リポジトリにプッシュします。その後、リポジトリを AWS Amplify のウェブホスティングに接続し、amplifyapp.com ドメイン上でホストされる、グローバルに利用可能なコンテンツ配信ネットワーク (CDN) にデプロイします。次に、React アプリケーションに変化を加えることで継続的デプロイ機能を説明し、マスターブランチに新しいバージョンをプッシュして自動的に新しいデプロイが開始するようにします。
学習内容
- 新しい React アプリケーションを作成する
- GitHub リポジトリを初期化する
- アプリを AWS Amplify でデプロイする
- コードの変更を実装してアプリを再デプロイする
主要な概念
React アプリケーション – React はウェブアプリケーションフレームワークで、デベロッパーが JavaScript を使用して高性能の単一ページアプリケーションをすばやく構築できるようにします。
Git – デベロッパーがファイルを保存し、ファイルとディレクトリ、バージョン、およびファイルへの変更間の関係を維持および更新できるようにするバージョン管理システム。
所要時間
10 分
使用するサービス
実装
-
新しい React アプリケーションを作成する
簡単に React アプリケーションを作成するには、create-react-app のコマンドを使用します。コマンドプロンプトまたはターミナルで次のコマンドを使用して、このパッケージをインストールします。
npx create-react-app amplifyapp cd amplifyapp npm start
-
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
-
AWS マネジメントコンソールにログインします。
このステップバイステップガイドを開いたままにしておくため、AWS マネジメントコンソールを別ウィンドウで開きます。画面が読み込まれたら、ユーザー名とパスワードを入力して作業を開始します。次に、検索バーに「Amplify」と入力して [AWS Amplify] を選択し、サービスコンソールを開きます。
-
アプリを AWS Amplify でデプロイする
このステップでは、先ほど作成した GitHub レポジトリを AWS Amplify サービスに接続します。これにより、アプリを AWS 上でビルド、デプロイ、ホストできるようになります。
a.AWS Amplify サービスコンソールで、[デプロイ] の下の [使用開始] を選択します。
b.レポジトリサービスとして [GitHub] を選択し、[続行] をクリックします。
c.GitHub で認証し、Amplify コンソールに戻ります。先ほど作成したレポジトリとマスターブランチを選択してから、[次へ] を選択します。
d.デフォルトのビルド設定を使用し、[次へ] を選択します。
e.最終的な詳細を確認し、[保存してデプロイ] を選択します。
f.AWS Amplify によってソースコードがビルドされ、アプリが https://...amplifyapp.com にデプロイされます。
g.ビルドが完了したら、サムネイルを選択してウェブアプリが稼動していることを確認します。
-
コードの変更を自動的にデプロイする
このステップでは、テキストエディタを使ってコードにいくつかの変更を加えて、その変更をアプリのマスターブランチにプッシュします。
a.次のコードで src/App.js を編集して保存します。
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1>Hello from V2</h1> </header> </div> ); } export default App;
b.コマンドプロンプト (Windows) またはターミナル ( macOS) で GitHub に変更をプッシュして、新しいビルドを自動的に開始します。
git add . git commit -m “changes for v2” git push origin master
c.ビルドが完了したら、AWS Amplify コンソールのサムネイルを選択して更新されたアプリを確認します。