AWS Amplifyのoverride.tsで環境毎で分岐させる

2023/11/21

こんにちは、クラウドソリューション事業部の本田です。もうすぐ12月寒かったり、暑かったりで体調崩しやすくなっていますが皆様いかがお過ごしでしょうか？

今回は前回Amplifyに引き続き、今回もAmplify関連のネタです。

Amplifyを触っていますと環境が複数できていきます。本番、ステージング環境に加え、参画しているメンバーの数だけ環境が生まれることになります。となると環境毎で設定したい値が変わってきたり、設定しないものがあったりというのが出てきます。作成してから手動で変えるなんてこもできますが、それはやりたくないですよね。

そこでAmplifyの環境に応じて分岐させる方法をまとめておきます。

AmplifyProjectInfoを利用する

overide.tsを利用する際に、aws-amplify/cli-extensibility-helperのモジュールを読み込んでいます。こちらの中に、AmplifyProjectInfoがありそちらに実行しているAmplifyのプロジェクトネーム（projectName）とバックエンドの環境名（envName）を取得することができます。この環境名を使って分岐させていきます。

1import {
2  AmplifyAuthCognitoStackTemplate,
3  AmplifyProjectInfo,
4} from '@aws-amplify/cli-extensibility-helper'

サンプルその1

cognitoを使ったlogin画面をカスタマイズする際に、UserPoolDomainを設定します。このドメインを環境毎で分けたいと思います。

1import {
2  AmplifyAuthCognitoStackTemplate,
3  AmplifyProjectInfo,
4} from '@aws-amplify/cli-extensibility-helper'
5
6export function override(
7  resources: AmplifyAuthCognitoStackTemplate,
8  amplifyProjectInfo: AmplifyProjectInfo
9) {
10 
11  const domainName = AmplifyProjectInfo.envName
12
13// ユーザープールドメインの設定
14    resources.addCfnResource(
15      {
16        type: 'AWS::Cognito::UserPoolDomain',
17        properties: {
18          UserPoolId: { Ref: 'UserPool' },
19          Domain: domainName,
20        },
21      },
22      'mydomain'
23    )
24  }

こちらをamplify pushしますと、cognitoに設定されるドメインがhttps://環境名.auth.ap-northeast-1.amazoncognito.com になります。

サンプルその2

環境毎で設定しない項目というのもあるかと思います。本番環境のみGoolgeフェデレーションを使ったログインを有効にするなどです。

1import {
2  AmplifyAuthCognitoStackTemplate,
3  AmplifyProjectInfo,
4} from '@aws-amplify/cli-extensibility-helper'
5
6export function override(
7  resources: AmplifyAuthCognitoStackTemplate,
8  amplifyProjectInfo: AmplifyProjectInfo
9) {
10  
11  if (
12    amplifyProjectInfo.envName === 'prd'
13  ) {
14
15    // User Pool Identity Providerの設定
16    resources.addCfnResource(
17      {
18        type: 'AWS::Cognito::UserPoolIdentityProvider',
19        properties: {
20          AttributeMapping: {
21            email: 'email',
22            username: 'sub',
23          },
24          ProviderDetails: {
25            client_id:
26              'aaaaaa',
27            client_secret:
28              'bbbbbb',
29            authorize_scopes: 'openid email profile',
30          },
31          ProviderName: 'Google',
32          ProviderType: 'Google',
33          UserPoolId: { Ref: 'UserPool' },
34        },
35      },
36      'Google-social-provider'
37    )
38  }
39}

prdという環境（本番環境を想定）の場合のみ、Googleフェデレーションの設定を作成します。

注意点

AmplifyProjectInfoですが、amplify cliのバージョンが古い場合利用することができません。12.6.0のバージョンでは利用できることを確認できていますが、9.2.1のバージョンでは利用することができませんでした。AmplifyProjectInfoが使えない、という場合はamplify cliのバージョンを確認してみると良いでしょう。