Zenn
🍳

Amplify ConsoleのPreview機能使用時のBackend設定メモ

2021/09/02に公開
AWS
Amplify
CI/CD
tech

やりたかったこと

  • フロントエンドもバックエンドもAmplifyを使いたい。CDもAmplifyでやりたい
  • フロントエンドはAmplifyのプレビュー機能を使いたい
    • 確認が楽だから
  • バックエンドはAmplifyのプレビュー機能を使いたくない
    • バックエンドのAWSリソースを大量に作られると困るから

前提として、、、

Amplify Consoleによる静的ウェブホスティング

Amplify　Consoleを使うと、GithubからSPAや静的サイトのホスティング、CI/CDの構築が簡単にできます。超便利です！！
https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/getting-started.html
https://amplify-sns.workshop.aws/ja/70_multi_env/10_amplify_console/connect_github.html

Amplify Consoleのプレビュー機能

Amplify Consoleでプレビュー機能をONにすることで、Githubでプルリクエストを出した時点で、プレビュー環境がホスティングされます。超便利です！！
https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/pr-previews.html
https://amplify-sns.workshop.aws/ja/70_multi_env/30_preview_autodetection.html

Amplify Consoleによるバックエンドのデプロイ

Amplify Consoleのビルドの設定ファイルであるamplify.yamlにbackendのCD設定を追加すると、バックエンドのCDも構築されます。超便利です！！

backend:
  phases:
    build:
      commands:
        - amplifyPush --simple

https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/build-settings.html

バックエンドのプレビュー機能？？

Amplify Consoleのプレビュー機能がONのときに、バックエンドのCDはどうなるのでしょうか？
プレビュー機能で2パターン選べます。

  • Create new backend environment for every Pull Request を選ぶと、プルリクする度に新しい環境が作られます。
    • 一見良さそうですが、バックエンドの場合DBやCognito等いろいろ初期設定しないとまともに動かないですのでプルリクの度に新環境を一式全部揃えるのはなかなかツラいです。いい感じに初期設定自動化したとしても、APIやCognitoやS3の各種リソースがプルリク毎に作られるのはコスト的にもツラいです。
  • Point all Pull Requests for this branch to an existing environmentを選ぶと、既存のバックエンドを使用します。
    • 一見良さそうですが、既存のバックエンドがプルリクされた内容で上書きされます。つまりプルリクを出すことでCognitoを削除することも可能です。え？

既存のバックエンドを使いつつ上書きしない方法

ということで本題です。既存のバックエンドを使いつつ、上書きしない方法を紹介します。

  1. プレビュー機能の設定でPoint all Pull Requests for this branch to an existing environmentを選び、既存のバックエンドを使う設定にします。

  2. ビルド用のスクリプトファイルを作る

./script/deploy_backend.sh
if [ $AWS_BRANCH = $USER_BRANCH ]
then
  echo 'start deploy backend'
  amplifyPush --simple
  echo 'end deploy backend'
else
  echo 'skip deploy backend'
fi
  • $AWS_BRANCH : Githubのブランチ名
  • $USER_BRANCH : バックエンドのenv
    • ちなみにこの変数はamplifyのマニュアルに載っていないので説明が正しいかは謎
  • preview時は$USER_BRANCHが、プルリク先になるので、if [ $AWS_BRANCH = $USER_BRANCH ]がfalseとなり、amplifyPushは実行されない
  • previewでない時は、if [ $AWS_BRANCH = $USER_BRANCH ]がtrueとなりamplifyPushされる

3.ビルド用のスクリプトファイルを、amplify.ymlから呼び出す

amplify.yml
backend:
  phases:
    build:
      commands:
        - chmod +x ./script/deploy_backend.sh
        - ./script/deploy_backend.sh

補足

  • amplify.yml内に- if [ $AWS_BRANCH = $USER_BRANCH ]; then amplifyPush --simple; fi と書いても何故かif文を無視してamplifyPushされるので、外部のスクリプトが必要。謎です。
  • amplifyのドキュメントにAMPLIFY_SKIP_BACKEND_BUILDというそれっぽい環境変数が載っていますが何に使えるのか分かりませんでした。
    • (追記)amplify.ymlにbackendを書いてなくてもbackendのリソースが存在していると（詳細条件不明)、勝手にbackend対して不要な処理をしてエラーを出してビルド失敗になることがあり、その時にこの環境変数を入れたらfrontendのみをbuildしてくれるようになりました。
      • 明確にfrontendしか存在しない場合はこのオプション付けたほうがよいかもです。

参考

課題

バックエンドが修正された時の動作確認をどうするかという問題が残っています。

2022/05/24追記

$USER_BRANCHについて関連しそうなissue。
https://github.com/aws-amplify/amplify-hosting/issues/500

Discussion