AWS Amplify Studioでのdeploy時のつまずきポイント

備忘録として

Github連携時のSave and deployボタンが反応しない

issuesにも上がってました。
https://github.com/aws-amplify/amplify-console/issues/649

ゆくゆく解消されるとは思いますが2022年2月時点でも起こったので。
一旦AWSコンソールへログインし直すと反応するようになりました。

AWS AmplifyStudioへSPAをデプロイした時に下階層のルーティングでリロードするとエラーになる

普通にSPAあるあるなのですが、AmplifyStudioでhtaccessの設定やらapacheを直接貪れるわけではないのでどうすればいいの問題。解消策は単純↓

ALL Apps > *** > App settings: Rewrites and redirects > Rewrites and redirectsにて
Source addressの部分にルールを書き、index.htmlに飛ばしてあげるように設定が可能

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>

ローカルでは通るビルドが本番ビルドで通らない

一口に言っても原因は様々。詳細なログが吐かれるのでそれを読んでトライアルアンドエラーとなると思いますが、私が直面したエラーについて

backend build時: feature flags are ~

feature flags are defined in the "amplify/cli.json" configuration file and are unknown to the currently running Amplify CLI

これはローカルでも出ました。原因追求はっきりしていないですがAmplifyのアップデートが入って以降発生するようになり多少悩まされましたが、amplify cliを最新バージョンに更新すると解消されました。つまり本番buildでのdockerにもそれを使ってもらう必要があるので、App settings: Build settingsのamplify.ymlをコンソールから更新、またはダウンロードしてアプリトップ階層に配置し定義してあげる必要があります。

私の場合は以下のように書き換えました。fronendでnodeのバージョンでこける場合もここで指定できます。

version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - nvm install 16.13.1
        - nvm use  16.13.1
        - npm install @aws-amplify/cli --force
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

または同じ画面の下の方にあるBuild image settingsという部分からパッケージ名とバージョンを定義することも可能。こちらの方がシンプルなのでこれで上手く行く場合はこっちの方が明快かと思います