Contents
前提条件と AWS アカウント設定
本セクションでは、本番環境で Amplify と Cognito を利用する際に必須となる IAM 権限 と リージョン選択 の考え方を説明します。適切な権限付与はセキュリティの基本であり、リージョン制約はサービス可用性とレイテンシーに直結します。
必要な IAM ポリシー
Amplify CLI がバックエンド（Cognito ユーザープール・ID プール、AppSync など）を自動生成・管理できるようにするための最小権限です。実務では「最小権限」ポリシーをベースに追加許可を付与すると安全です。
| ポリシー | 主な権限 | 推奨利用ケース |
|---|---|---|
AdministratorAccess |
すべての AWS リソースへのフルアクセス | 開発・検証環境で手間を省きたいとき（本番は非推奨） |
AmplifyFullAccess |
Amplify アプリ、バックエンドスタックの作成・更新 | 本番でも最小権限に近い形で使用可能 |
AmazonCognitoPowerUser |
Cognito ユーザープール／ID プールのフル操作 | カスタム属性や MFA 設定が必要な場合 |
最小権限構成例（JSON）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "amplify:*", "cognito-idp:*", "cognito-identity:*" ], "Resource": "*" } ] } |
ポイント：
AmplifyFullAccessに加えてcognito-idp:*とcognito-identity:*を許可すれば、管理コンソールでの余計な権限付与を防げます。
リージョン選択とサービス制限
日本国内向けアプリの場合は ap-northeast-1（東京） が最もレイテンシーが低く、データ主権要件にも合致します。2024‑06 時点で Cognito と Amplify Console の両方がフル機能を提供しています。
| 項目 | 内容 |
|---|---|
| 無料枠 | Amazon Cognito は月間 5 万件の認証リクエスト（MAU） が無料です※[2]。2024 年 7 月以降に変更があれば AWS の料金ページをご確認ください。 |
| 機能提供状況 | MFA（SMS・TOTP）は全リージョンで利用可能ですが、プッシュ通知方式の MFA は us-east-1（バージニア） が最初にリリースされました※[3]。他リージョンへのロールアウトは段階的です。 |
| 推奨設定 | 本番環境では ap-northeast-1 をデフォルトとし、必要に応じて us-east-1 のプッシュ MFA だけを有効化する構成も可能です（Cognito コンソールの「MFA and verifications」から設定）。 |
注意：リージョンごとの機能差は公式の「[サービス対応表]」で随時更新されますので、デプロイ前に必ず確認してください。
Amplify CLI のインストールとプロジェクト初期化
このセクションでは、Amplify CLI の最新安定版（2024‑06 時点は v13 系）をインストールし、ヘッドレスモードでプロジェクトを作成する手順を示します。CI/CD パイプラインに組み込む前提なので、対話型の入力を省くオプションに注目してください。
npm で Amplify CLI をインストール
Node.js（v18 以上）と npm がインストール済みであることを確認したうえで、以下コマンドを実行します。@latest は常に最新の安定版を取得します。
|
1 2 |
npm install -g @aws-amplify/cli@latest |
インストール後はバージョンを確認して、13.x 系 が表示されれば成功です。
|
1 2 |
amplify --version # 例: 13.2.0 |
ポイント：グローバルにインストールすると複数プロジェクトで同一 CLI バージョンを共有でき、バージョン不一致によるエラーを防げます。
amplify init のヘッドレス構成例
amplify init はプロジェクトのバックエンド環境（Amplify アプリとデフォルトのスタック）を作成します。以下は TypeScript プロジェクト 用に --yes と JSON 設定ファイルで対話を省いた例です。
|
1 2 3 4 5 6 7 8 9 10 |
amplify init \ --appId $AMPLIFY_APP_ID \ # Amplify Console にすでにアプリがある場合のみ指定 --envName dev \ --frontend javascript \ --framework react \ --srcDir src \ --distDir build \ --codegen false \ --yes |
| オプション | 説明 |
|---|---|
--appId |
Amplify Console のアプリ ID（省略可）。CI 環境ではシークレットとして渡すことが多いです。 |
--envName |
開発・本番など環境名を分離し、スタックの独立性を保ちます。 |
--frontend javascript / --framework react |
フロントエンド言語とフレームワークを明示します（TypeScript でも javascript を指定）。 |
--codegen false |
GraphQL スキーマ生成が不要な場合は無効化し、ビルド時間を短縮。 |
--yes |
対話型プロンプトをすべてスキップします。 |
ベストプラクティス：CI 環境では
amplify env pull --appId $APP_ID --envName dev --yesで既存環境の設定を取得し、ローカルと同一構成に保ちます。
Cognito ユーザープール & ID プールの作成と認証設定
本節では Amplify CLI の add auth コマンドを使い、ヘッドレスでユーザープール・ID プールを作成し、MFA 必須化やカスタム属性を追加する手順を示します。CLI での定義は team-provider-info.json に自動保存され、環境間で共有可能です。
コンソール手動作成 と CLI 自動生成 の比較
| 項目 | 手動（コンソール） | Amplify CLI |
|---|---|---|
| 再利用性 | 設定を手動でコピーする必要がある | amplify env pull ですべての設定がコード化 |
| 可視性 | UI が分散しやすくミスが起きやすい | team-provider-info.json に一元管理 |
| CI/CD 対応 | 手動ステップが残り自動化困難 | 完全ヘッドレスでパイプラインに組み込み可能 |
実務では CLI 自動生成 を推奨します。設定ミスを防ぎ、コードレビューの対象にもなるためです。
amplify add auth の headless JSON 定義（TypeScript 用）
以下は MFA を必須化し、パスワードポリシーを強化、カスタム属性 department を追加する例です。JSON はそのままシェルのヒアドキュメントに貼り付けられます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
amplify add auth \ --headless <<'EOF' { "version": "1", "serviceName": "Cognito", "useDefault": "false", "defaultAuthentication": { "authenticationType": "userPoolAndIdentityPool" }, "advancedSettings": { "mfaConfiguration": "ON", // MFA 必須化 "passwordPolicyMinLength": 12, "passwordPolicyUppercase": true, "passwordPolicyLowercase": true, "passwordPolicyNumbers": true, "passwordPolicySymbols": false, "userAttributes": [ { "name": "email", "required": true }, { "name": "custom:department", "mutable": true } ] } } EOF |
| キー | 説明 |
|---|---|
authenticationType |
userPoolAndIdentityPool を選択すると、フロントエンドで Amplify Auth が自動的に両方を利用できます。 |
mfaConfiguration |
"ON" に設定するとサインイン時に必ず MFA が要求されます（SMS・TOTP／プッシュは別途有効化）。 |
custom:department |
custom: プレフィックスでカスタム属性を宣言し、ユーザー登録画面に入力項目として表示できます。 |
生成ファイルの概要
|
1 2 3 4 5 6 7 8 9 10 11 |
// src/aws-exports.ts（Amplify が自動生成） const awsmobile = { aws_project_region: "ap-northeast-1", aws_cognito_identity_pool_id: "ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", aws_cognito_region: "ap-northeast-1", aws_user_pools_id: "ap-northeast-1_ABCDEFG", aws_user_pools_web_client_id: "xxxxxxxxxxxxxxxxxxxxxxxxxx" }; export default awsmobile; |
注意：カスタム属性は
aws-exports.tsに自動的に含まれませんが、Amplify Auth のuser.attributes['custom:department']で取得できます。
フロントエンド実装：React と Amplify UI コンポーネント
この章では TypeScript だけで統一したコード例を示し、認証フローに MFA と カスタム属性入力 を組み込む方法を解説します。Amplify UI の <Authenticator> コンポーネントはアクセシビリティ対応済みで、独自実装のバグリスクを大幅に削減できます。
Amplify ライブラリと UI コンポーネントのインストール
|
1 2 |
npm install aws-amplify @aws-amplify/ui-react |
アプリエントリ（src/index.tsx）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from "react"; import { createRoot } from "react-dom/client"; import { Amplify } from "aws-amplify"; import awsmobile from "./aws-exports"; import App from "./App"; Amplify.configure(awsmobile); createRoot(document.getElementById("root")!).render( <React.StrictMode> <App /> </React.StrictMode> ); |
カスタムサインアップ画面と MFA フローの実装
以下は カスタム属性 department を入力させ、MFA が必須化された状態で動作する App.tsx の全容です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
// src/App.tsx import { Authenticator, useAuthenticator } from "@aws-amplify/ui-react"; import { Flex, Button, TextField, Heading } from "@aws-amplify/ui-react"; function UserInfo() { const { user, signOut } = useAuthenticator((context) => [ context.user, context.signOut ]); // カスタム属性の取得例 const department = user?.attributes["custom:department"] ?? "未設定"; return ( <Flex direction="column" alignItems="center" gap="large"> <Heading level={3}>ようこそ、{user?.username}</Heading> <p>所属部署: {department}</p> <Button onClick={() => signOut()}>サインアウト</Button> </Flex> ); } export default function App() { return ( <Authenticator hideSignUp={false} // SignUp フォームにカスタム属性フィールドを追加 components={{ SignUp: { FormFields() { return ( <> {/* デフォルトの email と password は自動生成 */} <TextField name="custom:department" label="部署 (Department)" placeholder="例: Engineering" required /> </> ); } } }} > {({ signOut }) => <UserInfo />} </Authenticator> ); } |
ポイント解説
| 項目 | 内容 |
|---|---|
useAuthenticator フック |
現在サインイン中のユーザー情報とサインアウト関数を取得します。 |
カスタム属性入力 (custom:department) |
SignUp.FormFields に追加するだけで、Cognito のカスタム属性として自動保存されます。 |
| MFA 自動挿入 | mfaConfiguration が "ON" の場合、サインイン時に自動的にコード入力画面が表示され、開発者は何も書く必要がありません。 |
デプロイ・CI/CD と運用ベストプラクティス
認証機能はフロントエンドだけで完結しません。バックエンドスタック（Cognito、Amplify Console のビルド設定）をコード化し、GitHub Actions などの CI パイプライン に組み込むことで、変更ごとに自動テスト・デプロイが行えるようになります。
Amplify Console への接続と自動ビルド設定
-
リポジトリ連携
GitHub（または Bitbucket）で管理しているフロントエンドリポジトリを Amplify Console に接続し、amplify init --appId $APP_IDで既存アプリと紐付けます。 -
デフォルトの amplify.yml
amplify push後に自動生成されるビルド定義です。環境変数は Amplify Console の UI またはamplify env addで管理できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
# amplify.yml (Amplify Console が自動生成) version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: build files: - '**/*' cache: paths: - node_modules/**/* |
ヒント：
npm ciはpackage-lock.jsonに基づくクリーンインストールで、CI 環境の再現性が高まります。
GitHub Actions での CI パイプライン例
以下は プルリクエスト時に環境取得・テスト実行し、main ブランチへのマージ時に自動デプロイする構成です。シークレットには AWS_ACCESS_KEY_ID、AWS_SECRET_ACCESS_KEY、AMPLIFY_APP_ID を事前に登録してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
name: Amplify CI/CD on: push: branches: [main, dev] pull_request: jobs: build-test-deploy: runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '20' - name: Install dependencies run: npm ci # Amplify 環境取得（headless） - name: Pull Amplify environment env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} run: | npx amplify env pull \ --appId ${{ secrets.AMPLIFY_APP_ID }} \ --envName dev \ --yes - name: Run unit tests run: npm test # main ブランチだけ自動デプロイ - name: Deploy to Amplify if: github.ref == 'refs/heads/main' env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} run: | npx amplify push --yes |
よくあるエラーと対処法
| エラー | 原因 | 解決策 |
|---|---|---|
| Redirect URI 設定ミス | Cognito の App client に正しい https://<branch>.amplifyapp.com/ が登録されていない |
Amplify Console → App settings → Redirect URLs で自動生成された URL をコピーし、Cognito コンソールの「App client settings」に貼り付ける |
| CORS エラー | フロントエンドと Cognito のオリジンが不一致 | Cognito コンソール > App client settings > Allowed origins に https://<branch>.amplifyapp.com を追加 |
| トークン期限切れ (ExpiredTokenException) | 古いアクセストークンがローカルに残存している | Amplify.Auth.signOut({ global: true }) で全セッションをクリアし、再サインインさせる。エラーハンドリングで Auth.currentSession() の失敗時に自動リフレッシュも実装可 |
| MFA プッシュ通知が無効 | MFA のプッシュ方式は us-east-1 しか未対応 | 必要ならば SMS/TOTP にフォールバックし、プッシュを使う場合は us-east-1 用のユーザープールを別途作成して federated login と組み合わせる |
次のステップとコミュニティ参加
この記事で示した手順を ローカル環境 → CI/CD パイプライン → 本番デプロイ のフローとして実装すれば、数時間以内に本格的な認証基盤が完成します。さらに以下のリソースで最新情報やベストプラクティスをキャッチアップしてください。
| リソース | 内容 |
|---|---|
| AWS 公式ドキュメント（2024‑06 更新） | Amplify CLI、Cognito の設定方法・料金ページ※[1][2] |
| Amplify UI コンポーネントリファレンス | カスタマイズ例とアクセシビリティガイドライン |
| AWS Community Builders Slack | 日本語で質問できる公式コミュニティ（認証系質問が活発） |
| GitHub のサンプルリポジトリ | aws-amplify/amplify-js にある React + Cognito の実装例 |
まとめ：最小権限で IAM を構築し、リージョンを正しく選択。Amplify CLI のヘッドレスモードでインフラコード化し、GitHub Actions で自動テスト・デプロイを行うだけで、スケーラブルかつ安全な認証基盤が手に入ります。
参考リンク
- Amplify CLI ドキュメント – https://docs.amplify.aws/cli/reference/overview
- Amazon Cognito 料金・無料枠 – https://aws.amazon.com/jp/cognito/pricing/
- サービス対応リージョン表 – https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/