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

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 コンソールから、環境変数設定を追加します。

ログイン設定追加

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サイトをご覧ください。