Amplify Gen2 ブランチ別環境管理Tips

Amplify Gen2 環境別デプロイ

個人的なハマりどころの備忘録

バックエンド：ブランチ別に既存リソースを使い分ける

RDS/AuroraやVPCサブネットなどAmplify定義外の既存のリソースを使うとき、本番環境・ステージング環境でリソースを使い分けたいことがよくある。
こういうときは、configファイルをつくって定義を分けておくとよい。（環境変数で切り替え）

構成例

amplify
└ config
  └ index.ts
  └ prod.ts
  └ stg.ts
  └ dev.ts

index.ts

import { devConfig } from './dev';
import { stgConfig } from './stg';
import { prodConfig } from './prod';

const stage = (process.env.STAGE ?? 'dev') as 'dev' | 'stg' | 'prod';

export const getConfig = () => {
  switch (stage) {
    case 'prod':
      return prodConfig;
    case 'stg':
      return stgConfig;
    default:
      return devConfig;
  }
};

export type EnvConfig = typeof devConfig;

prod.ts,stg.ts,dev.ts

export const prodConfig = {
  stage: 'prod', // 'stg' or 'dev',
  vpc: {
    vpcId: 'vpc-132abc456def',
    availabilityZones: ['ap-northeast-1a', 'ap-northeast-1c'],
    privateSubnetIds: ['subnet-123abc456def', 'subnet-789ghi012jkl'],
  },
  rds: {
    securityGroupId: 'sg-012abc345xyz',
    secretArn: 'arn:aws:secretsmanager:ap-northeast-1:987654321012:secret:hogehoge',
  },
...
};

利用例）

backend.ts

import { getConfig } from './config';

const config = getConfig();

const stack = Stack.of(l2Fn);

const vpc = ec2.Vpc.fromVpcAttributes(stack, 'ExistingVpc', {
  vpcId: config.vpc.vpcId,
  availabilityZones: config.vpc.availabilityZones,
  privateSubnetIds: config.vpc.privateSubnetIds,
});

api/resource.ts

import { defineFunction } from '@aws-amplify/backend';
import { getConfig } from '../config';

const config = getConfig();

export const SECRET_ARN = config.rds.secretArn;

export const api = defineFunction({
  name: 'api',
  entry: './function/handler.ts',
  runtime: 20,
  timeoutSeconds: 30,
  memoryMB: 256,
  environment: {
    SECRET_ARN: SECRET_ARN,
  },
});

バックエンド：サンドボックス環境でリソース名の重複を避ける

CognitoやAPI Gatewayなどのリソース名はそのままだと重複してしまって、AWSコンソール上で見分けがつけにくい。
そこで、名前にユーザー名(環境変数)をつけるようにしておく。

backend.ts

import { getUserName } from './utils';

const userPoolName = `hogehoge-userpool-${config.stage}` + getUserName();

utils.ts

export const getUserName = () => {
  if (process.env.STAGE && process.env.STAGE !== 'dev') return '';

  const user = process.env.USER;
  if (!user) {
    throw new Error(
      'Environment variable USER is not set. Please set it before running this script.'
    );
  }

  return '-' + user;
};

バックエンドデプロイにはサービスロール

Amplifyホスティングではフロントエンドのデプロイはそのままできるが、バックエンドをデプロイするためにはサービスロールを設定する必要がある。

アプリ > アプリケーションの設定 > IAMロール > サービスロール

対象のロールは、以下のポリシーをひもづけたもの。

Amplify - Backend Deployment

amplify.yml

あとはビルド定義でバックエンドもデプロイするように記述すればよい。

アプリ > ホスティング > ビルドの設定

（または、プロジェクトに保持）

amplify.yml

version: 1
backend:
  phases:
    build:
      commands:
        - cd amplify/api/function && npm ci && cd ../../../
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
frontend:
  phases:
    build:
      commands:
        - npm ci
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

環境変数はデプロイ時に反映

アプリ > ホスティング > 環境変数

環境変数は書き換えただけでは反映されない。デプロイ時に反映される。

ブランチ名AWS_BRANCHやアプリIDAWS_APP_IDといった変数は予め定義されている。