Amplifyで Webアプリケーションの堅固な土台をサクッと構築する方法の手順まとめ

DevelopersIO 2022

#AWS Amplify

#AWS Cloud9

川崎照夫

2022.07.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Amplifyで Webアプリケーションの堅固な土台をサクッと構築する方法、
ということで、詳細な手順を本ブログにまとめました。

全体の流れは、ビデオセッションやスライドを確認してください。

初心者向けハンズオンでは、初めて Amplify を実行するという前提で手順が作成されていました。

本手順では、既に一度ハンズオンを実施した前提での手順となりますので、2回目以降実施する必要がない手順はスキップしています。

Cloud9 のセットアップ

Cloud9 のセットアップ
- Cloud9 インスタンスの作成
- Cloud9 の環境設定
- Cloud9 のプレビューURL確認

初心者向けハンズオンでは、開発環境としてクラウドIDE の Cloud9 を利用していました。

本手順でも、同様にCloud9 で環境構築を行います。

Cloud9 の良い所は、ハンズオンを実施する際に、ローカル環境の種類によらず、ハンズオンの手順を揃えることができます。

また、本手順を準備する段階のように、Amplify についていろいろ試す際には、うまくいかなかった時には無理に進めないで、新規の環境で再実行することができ、手軽な使い捨ての環境として利用することができます。

Cloud9 インスタンスの作成

Cloud9 で利用するインスタンスタイプは、デフォルトの t2 micro では、ビルド時にメモリが不足する可能性があり、t3 small に変更します。

それ以外の設定は、デフォルトのままで進めます。

Cloud9 の環境設定

「AWS Managed temporary credentials」をオフにして、Amplify CLI で発行した、IAM ユーザの認証情報を利用し、Cloud9 上での作業を進めます。

EBS のボリュームは、デフォルトでは OS の領域も含めて 10GB となっています。

インスタンスを起動した時点で、空き容量は 4GB ほどです。

ハンズオンを進めていくと、EBS ボリュームの容量が、不足してしまう可能性があります。

EBS のサイズを 32GB に拡張します。

Cloud9 の環境設定の手順をこちらのブログにまとめましたのでよろしければご覧ください。

Cloud9 のプレビューURL確認

最後に Cloud9 環境のプレビューURLは、後ほど設定で入力しますので、メモしておきます。

Amplify CLI 環境構築

Amplify CLI 環境構築
- 作成済みの IAM ユーザの認証情報を設定
  - $ aws configure
- Amplify CLI のインストール
  - $ npm install -g @aws-amplify/cli
- Reactアプリの作成
  - $ npx -y create-react-app app-base
- Amplify プロジェクトの初期化コマンド
  - $ amplify init -y
- Amplify Framework のインストール
  - $ npm install aws-amplify @aws-amplify/ui-react

本手順では、既に一度ハンズオンを実施した前提での手順となりますので、 2回目以降実施する必要がない手順はスキップします。

amplify configure はスキップします。代わりに aws configure を実行し、1回目の手順で作成済みの IAM ユーザの認証情報を設定します。

また、amplify init コマンドはyオプションを付けて実行し、手順を効率化しています。

作成済みの IAM ユーザの認証情報を設定

aws configure を実行し、作成済みの IAM ユーザの認証情報を設定します。

aws configure

Amplify CLI のインストール

Amplify CLI をインストールします。

npm install -g @aws-amplify/cli

Reactアプリの作成

次に create-react-app コマンドを実行し、Reactアプリのスケルトンを作成します。

npx -y create-react-app app-base && cd app-base

Amplify プロジェクトの初期化コマンド

次に amplify init コマンドをyオプションを付けて実行します。こうすることでデフォルトの設定でAmplify が初期化されます。

amplify init -y

Amplify Framework のインストール

最後に必要な Amplifyのモジュールをインストールします。 aws-amplify パッケージはAmplify のメインライブラリ、 ui-react パッケージはReact の UI コンポーネントです。

npm install aws-amplify @aws-amplify/ui-react

amplify add hosting コマンドでホスティングを行う手順

amplify add hosting コマンドでホスティングを行う手順
- GitHub新規リポジトリ作成
  - $ git init
  - $ git push -u origin main
- amplify add hosting コマンド実行
  - 継続的デプロイ設定開始
- Amplify コンソールからデプロイ設定
  - GitHubリポジトリを指定
  - ビルド設定
- 動作確認

本手順では、継続的デプロイを設定します。

git リポジトリへの push をトリガーとして、デプロイが自動的に実施されるように設定します。

継続的デプロイを設定する際に、GitHubのアカウントを利用します。

GitHub新規リポジトリ作成

最初に GitHubにログインし、新規リポジトリを作成しておきます。

https://github.com/new

リポジトリの種類はpublic でも private でもどちらでも OK ですが、意図しない公開を避けるため、本手順では private リポジトリを選択します。

GitHub 連携設定

Cloud9 のターミナルに戻り、GitHub の連携設定を行います。

git config --global init.defaultBranch main
git config --global user.name "xxxx"
git config --global user.email xxxx@xxxx.jp

公開鍵・秘密鍵のペアを作成します。全てデフォルトで enter を押してください。

cd ~/.ssh/
ssh-keygen

ssh-rsa から始まる文字列をコピーします。

cat id_rsa.pub

GitHub の https://github.com/settings/ssh/new にアクセスして、Key 欄にペーストします。Title 欄を入力し「Add SSH key」ボタンをクリックします。

Cloud9 のターミナルに戻り、git init と git push を行い、先ほど作成した React アプリ／Amplify プロジェクトのスケルトンを GitHub のリポジトリに保存します。

cd ~/environment/app-base/
echo "# app-base-20220701" >> README.md
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:kawasaki-teruo/xxxxx.git
git push -u origin main

後続の手順では、push した内容をホスティングで利用します。

amplify add hosting コマンド実行

amplify add hosting コマンドを実行します。

画面に表示される Amplify CLI のメニューから、継続的デプロイを選択し設定を開始します。

amplify add hosting

Amplify コンソールからデプロイ設定

次にブラウザで Amplify コンソールを開きます。

先ほど作成したアプリを開き、「Hosting environments」のタブを表示します。

Gitリポジトリの種類を選択します。今回は GitHub を選択します。

ここで、GitHub の認証画面が表示されたら、内容を確認して先に進めます。

リポジトリとブランチを選択します。

ブランチとバックエンド環境をひも付けします。

ビルド設定です。今回はデフォルトのままで問題ありません。

設定内容を確認します。「保存してデプロイ」をクリックするとデプロイが始まります。

以上で継続的デプロイの設定が完了し、GitHubリポジトリからソースコードを取得して、デプロイが開始されます。

数分後デプロイが完了します。

動作確認

画面左下に表示されるホスティングURL にアクセスして、ホスティングされたアプリの動作確認を行います。ホスティングURL は、後ほどログイン設定の際に、入力しますのでメモしておいてください。

最後に Cloud9 のターミナルに戻り、enter を入力して amplify add hosting コマンドを終了します。

amplify add auth コマンドでログイン設定を行う手順

ログイン設定
- ソーシャルサインイン設定確認
  - Google Oauth の「クライアント ID」「クライアントシークレット」を確認
- ログイン設定追加
  - $ amplify add auth
  - Google Oauth 側にも反映
- フロントエンドにログインを確認できるコード追加
  - src/App.js を修正
  - $ git push
- 動作確認
  - $ npm start

本手順では「デフォルト設定＋ソーシャルサインイン」の構成を利用し、 Google Oauth 認証の構成を追加し、簡単にログインできるようにします。

ソーシャルサインイン設定確認

最初にソーシャルサインイン設定を確認します。 Google Oauth のクライアント ID／クライアントシークレットをメモしておきます。

環境変数設定

Amplify コンソールから、環境変数設定を追加します。

項目	変数	値
クライアント ID	AMPLIFY_GOOGLE_CLIENT_ID	GCPのサイトで生成された値
クライアントシークレット	AMPLIFY_GOOGLE_CLIENT_SECRET	GCPのサイトで生成された値

ログイン設定追加

Cloud9 のターミナルに戻り、amplify add auth コマンドを実行します。

amplify add auth

Amplify CLI のメニューからデフォルトコンフィギュレーションウィズソーシャルプロバイダーの選択肢を選びます。サインインの方法は Username を選択します。ここではアドバンストセッティングは不要なので No を選択します。 domain name prefix はデフォルトの値をそのまま利用します。

signin および signout のリダイレクトURL を入力していきます。 Cloud9 環境のプレビューURL と先ほどホスティングの時に作成されたホスティングURL の 2つをそれぞれ入力します。 signin および signout の URL は同じ値で問題ありません。

ソーシャルプロバイダーの種類を選択します。ここでは Google を選択します。選択の方法は、カーソルキーで上下に移動し、スペースキーを押すと選択状態になりますので enter キーを押して次に進みます。最後に GCP のサイトで取得したクライアント ID、クライアントシークレットを入力して完了です。

ログイン設定追加後にデプロイ先に反映します。

amplify status
amplify push -y

amplify push コマンドを yオプションを付けて実行します。数分待つと、デプロイ先に反映されます。 amplify push コマンドの最後の方で出力される「Hosted UI Endpoint」の値をメモしておきます。

Google Oauth 側にも「Hosted UI Endpoint」の値を、認証情報の「承認済みの JavaScript 生成元」「承認済みのリダイレクト URI」の項目に反映します。

「承認済みの JavaScript 生成元」は、「Hosted UI Endpoint」の値から最後の「/」を除去して入力する必要があります。「承認済みのリダイレクト URI」は「承認済みの JavaScript 生成元」の後ろに「/oauth2/idpresponse」を追加した文字列です。

フロントエンドにログインを確認できるコード追加

Cloud9 上で src/Appjs を修正し、ログインを確認できるコードを追加します。

import { Amplify } from 'aws-amplify';
import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import awsconfig from "./aws-exports";
awsconfig.oauth.redirectSignIn = `${window.location.origin}/`;
awsconfig.oauth.redirectSignOut = `${window.location.origin}/`;
Amplify.configure(awsconfig);
console.log("redirectSignIn: ", awsconfig.oauth.redirectSignIn);

function App({ signOut, user }) {
  return (
    <>
        <Heading level={1}>Hello {user.username}</Heading>
        <Button onClick={signOut}>Sign out</Button>
    </>
  );
}
export default withAuthenticator(App);

npm start コマンドを実行します。

npm start

Cloud9 環境のプレビューURL を開き、動作確認します。

Cloud9 のターミナルに戻り、ctrl+C を入力してプレビューを終了します。

git push でコードの修正をリポジトリに反映させると、デプロイが開始されます。

git add .
git commit -m "add auth"
git push

動作確認

ホスティングURL を開き、ホスティング先を確認します。

amplify env add コマンドでマルチ環境設定を行う手順

マルチ環境設定
- 新規環境として production を追加
  - $ amplify env add
- develop ブランチ追加
  - $ git checkout -b develop
- ブランチと環境の紐付けを修正
  - main ブランチ → production 環境
  - develop ブランチ → dev 環境
- dev環境のログイン設定変更
  - $ amplify update auth
- 動作確認

マルチ環境を構築します。開発環境と本番環境の 2面の環境を用意します。

新規環境として production を追加

この手順ではまず env add コマンドを実行して、新規環境として production を追加します。

amplify env list
amplify env add

環境名として「production」と入力します。

次に環境構築を行うための認証情報を選択します。

ここでは AWS profile を選択し、プロファイルとして default を選択します。

処理が実行されるのを待ち、最後に production 環境で利用する、クライアント ID、クライアントシークレットを入力します。

ここでは既存の dev 環境と共通の値を入力します。

次に amplify push コマンドを実行します。数分待つとホスティング先に反映されます。

amplify status
amplify push -y

amplify push コマンドの最後の方で出力される「Hosted UI Endpoint」（production環境）の値をメモしておきます。 Google Oauth 側にも「Hosted UI Endpoint」の値を、認証情報の「承認済みの JavaScript 生成元」「承認済みのリダイレクト URI」の項目に追加します。

Amplifyコンソールで、mainブランチの接続先を dev環境から production環境に変更します。

git add .
git commit -m "env add"
git push

push をトリガーとして、production環境でデプロイが実行されます。

production環境のホスティングURLを開き、動作確認します。

develop ブランチ追加

gitリポジトリに develop ブランチを追加します。

git checkout -b develop
git push -u origin develop

ブランチと環境の紐付けを修正

Amplifyコンソールで、ブランチと環境の紐付けを追加します。 develop ブランチを dev 環境に紐付けます。

dev 環境でデプロイが実行されます。

dev環境のログイン設定変更

amplify update auth コマンドを実行して、dev環境のログイン設定を変更します。

amplify env checkout dev
amplify env list
amplify update auth

signin のリダイレクトURL として、dev 環境のホスティングURL を追加します。

先ほどと同様に、signout のリダイレクトURL として、dev 環境のホスティングURL を追加します。

次に amplify push コマンドを実行します。数分後にデプロイ先に反映されます。

amplify push -y

動作確認

Amplify コンソール上でデプロイ完了を確認できたら、それぞれの環境のホスティングURL にアクセスして動作確認を行います。

本ブログの内容が、みなさまのお役に立てたら幸いです

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。