AWS の開始方法
フルスタック React アプリケーションを構築する
AWS Amplify を使用してシンプルなウェブアプリケーションを作成する
モジュール 1: React アプリケーションをデプロイしてホストする
このモジュールでは、React アプリケーションを作成し、AWS Amplify のウェブホスティングサービスを利用してそれをクラウドにデプロイします
概要
AWS Amplify は、サーバーレスバックエンドを備えた単一ページのウェブアプリケーションや静的サイトを構築、デプロイ、ホストするための Git ベースの CI/CD ワークフローを提供します。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.新しいターミナルを開き、アプリケーションのルートフォルダ (例: amplifyapp) に戻ります。
c.create-react-app を使用すると、Git リポジトリが自動的に初期化され、最初のコミットが行われます。Git が初期化されていない状態で既存の React アプリケーションをデプロイする場合は、続行する前に必ず以下のコマンドを入力してください。
git init git add . git commit -m "initial commit"
d.コンピュータで GitHub を一度も使用したことがない場合は、アカウントへの接続の許可を続行する前に、次のステップを実行してください。
コマンドラインインターフェイスで次のコマンドを実行して、新しい GitHub リポジトリにアプリケーションをプッシュします。
git remote add origin git@github.com:username/reponame.git git branch -M main git push -u origin main
-
AWS マネジメントコンソールにログインする
このステップバイステップガイドを開いたままにしておくため、AWS マネジメントコンソールを別ウィンドウで開きます。画面がロードされたら、ユーザー名とパスワードを入力して開始します。その後、検索バーに Amplify と入力して [AWS Amplify] を選択し、サービスコンソールを開きます。
-
アプリを AWS Amplify でデプロイする
このステップでは、先ほど作成した GitHub リポジトリを AWS Amplify サービスに接続します。これにより、アプリを AWS 上でビルド、デプロイ、ホストできるようになります。
a.AWS Amplify サービスコンソールで、[Amplify Hosting] の下の [Get Started] (使用を開始) を選択します。
b.レポジトリサービスとして [GitHub] を選択し、[続行] をクリックします。
c.GitHub で認証し、Amplify コンソールに戻ります。先ほど作成したリポジトリとメインブランチを選択してから、[Next] (次へ) を選択します。
d.デフォルトのビルド設定を使用し、[次へ] を選択します。
e.最終的な詳細を確認し、[Save and deploy] (保存してデプロイ) を選択します。
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 main
c.ビルドが完了したら、AWS Amplify コンソールのサムネイルを選択して更新されたアプリケーションを確認します。
まとめ
AWS Amplify を使用して GitHub と統合することによって、AWS クラウドで React アプリケーションをデプロイできました。AWS Amplify では、継続的にアプリケーションをクラウドにデプロイし、グローバルに利用可能な CDN でホストできます。
次に、アプリケーションのローカルバージョンを作成して、開発を続行し、新しい機能を追加します。