More than 1 year has passed since last update.

マルチフロントエンドのAmplifyの環境切り替え自動化とCI/CD（Expo＋EAS Build）の設定

Posted at 2022-02-18

背景

Amplifyで作られたWEBアプリケーションが既にある
ExpoでiOS/Android版アプリの開発を始める
アプリのリポジトリではAmplifyのBackendは編集しないが、Amplifyの認証くらいは使いたい
amplify-jsには aws-exports.jsだけあればよいので、そのファイルだけもらえるようなAmplifyの自動環境切り替えを実現したい
- フロントエンドのリポジトリでは amplify/ フォルダを無視（.gitignoreしてエディタからも非表示）してしまいたい
自動化できた折りにはCI/CD（EAS　Build）でも使いたい

参考

この辺りを参考にしていく

出来たもの

全ファイルをGistでDLできます

amplify-pullの自動化（CI/CD対応）

AmplifyのProjectNameとAppIDを埋め込んでコミットしておく
amplify pullの前にamplify/フォルダとsrc/aws-exports.jsを削除
- ※上書きされるだけなので削除の必要はないが念の為
amplify pullの最後に聞かれる質問に自動でNoと答えるように設定 (echo n |)
- ※Noと答えるとamplify/backend/フォルダは削除される

bin/amplify-setup

#!/bin/bash
set -e
IFS='|'

AWS_PROFILE="your_aws_profile"
PROJECT_NAME="amplify_project_name"
APP_ID="amplify_app_id"

if [[ "${AWS_ACCESS_KEY_ID:+x}" && "${AWS_SECRET_ACCESS_KEY:+x}" ]]; then
  AWSCREDENTIALS="\"useProfile\":false,\
\"accessKeyId\":\"$AWS_ACCESS_KEY_ID\",\
\"secretAccessKey\":\"$AWS_SECRET_ACCESS_KEY\","
else
  AWSCREDENTIALS="\"useProfile\":true,\"profileName\":\"$AWS_PROFILE\","
fi

REACTCONFIG="{\
\"SourceDir\":\"src\",\
\"DistributionDir\":\"build\",\
\"BuildCommand\":\"npm run-script build\",\
\"StartCommand\":\"npm run-script start\"\
}"
AWSCLOUDFORMATIONCONFIG="{\
\"configLevel\":\"project\",\
$AWSCREDENTIALS\
\"region\":\"ap-northeast-1\"\
}"
AMPLIFY="{\
\"projectName\":\"$PROJECT_NAME\",\
\"appId\":\"$APP_ID\",\
\"envName\":\"$1\",\
\"defaultEditor\":\"code\"\
}"
FRONTEND="{\
\"frontend\":\"javascript\",\
\"framework\":\"react-native\",\
\"config\":$REACTCONFIG\
}"
PROVIDERS="{\
\"awscloudformation\":$AWSCLOUDFORMATIONCONFIG\
}"

rm -rf amplify src/aws-exports.js
echo n | amplify pull \
--amplify $AMPLIFY \
--frontend $FRONTEND \
--providers $PROVIDERS

# Thanks
# https://github.com/aws-amplify/amplify-cli/issues/5275#issuecomment-724069616
# https://github.com/aws-amplify/amplify-cli/issues/3292#issuecomment-788249445
# https://docs.amplify.aws/cli/usage/headless#amplify-pull-parameters

EAS Buildの実行前フック

EAS Buildの実行環境にはamplifyコマンドがないのでインストールする
eas build --profileの値でAmplify環境を切り替える

bin/eas-build-pre-install

#!/bin/bash
set -e
IFS='|'

if which amplify >/dev/null; then
  :
else
  npm install --quiet -g @aws-amplify/cli
fi

if [[ $EAS_BUILD_PROFILE == "production" ]]; then
  ./bin/amplify-setup prd
else
  ./bin/amplify-setup stg
fi

コマンドショートカットを追加

Amplify環境切り替え系は init:amplify:* に設定
EAS Buildの実行前フックは eas-build-pre-install に設定

package.json

{
  "main": "index.js",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android --device",
    "ios": "expo run:ios --device",
    "init:clean": "rm -rf src/* amplify .expo/* android ios",
    "init:amplify": "yarn init:amplify:test",
    "init:amplify:test": "bin/amplify-setup test",
    "init:amplify:stg": "bin/amplify-setup stg",
    "init:amplify:prd": "bin/amplify-setup prd",
    "build:ios:stg": "eas build -p ios --profile preview",
    "build:android:stg": "eas build -p android --profile preview",
    "build:ios:prd": "eas build -p ios --profile production",
    "build:android:prd": "eas build -p android --profile production",
    "eas-build-pre-install": "./bin/eas-build-pre-install"
  }
}

.gitignore

amplify/フォルダごとGit管理から外す

.gitignore

amplify/
aws-exports.js

使い方

構築済みのAmplify環境を切り替えたい場合は、以下のように実行する
- yarn init:amplify:test
- yarn init:amplify:stg
実行するとこんな感じになる

GraphQL(Amplify API)も使いたい場合

このままでもAppSyncが使えるのでよいが、AmplifyがビルドしてくれるGraphQLも使いたい場合も少し変えれば対応できそう

.graphqlconfig.ymlをBackend用のAmplifyのリポジトリからコピーしてくる
- あるいはこのリポジトリで一度Backend有りでpullしたあとに amplify codegen add を実行し生成する
amplify-setupを以下のように修正する

bin/amplify-setup

- rm -rf amplify src/aws-exports.js
+ rm -rf amplify src/aws-exports.js src/graphql src/API.ts
- echo n | amplify pull \
+ echo y | amplify pull \
  --amplify $AMPLIFY \
  --frontend $FRONTEND \
- --providers $PROVIDERS
+ --providers $PROVIDERS && \
+ amplify codegen
+ rm -rf amplify/backend