🛖

Amplify Gen2でFlutter Webをホスティングしようとしたらクライアント設定がなくて沼った

2024/09/08に公開

Flutter

はじめに

比較的簡単なアプリにおいて、フロントエンドにはFlutter、バックエンドにAWS Amplifyを用いると爆速でデプロイまでできるのでは！？と思ったので試してみました。
AWSのリソースを使わない場合はサクっとデプロイまでできたのですが、DynamoDB等のサービスと連携させたバックエンドをデプロイしようとした時にちょっと沼ったので、その備忘録です。

沼ったこと

FlutterとAmplify Gwn2を利用する場合、自動生成されるamplify_outputs.dartファイルを参照することで、AWS上のバックエンドと通信を行うことができます。
開発で使用するsandbox環境であれば

npx ampx sandbox --outputs-format dart --outputs-out-dir lib

の実行時に生成されるため、特に意識せず使用することが可能です。

しかし、Amplifyの自動デプロイを使用する際、amplify_outputs.dartが 自動生成されない ため、Amplifyでのビルド時に以下のエラーによりデプロイができませんでした。

Error: Error when reading 'lib/amplify_outputs.dart': Error reading 'lib/amplify_outputs.dart' (No such file or directory)

解決法

自動生成されないので生成する必要があります。
どうすれば良いのかしばらく調べていたら、Fullstack branch deploymentsにクライアントを生成するためのコマンドの記載がありました。

npx ampx generate outputs --app-id <your-amplify-app-id> --branch <your-git-branch-name> --format dart --out-dir lib

というわけで、これをビルド前に呼ぶようにします。

# 上省略
    preBuild:
      commands:
        - npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID --format dart --out-dir lib
# 以下省略

※ $AWS_BRANCHでビルド対象のブランチ名、$AWS_APP_IDでAmplifyのアプリIDを取得することができます。

これでアプリのビルド前に通信クライアント用のファイルが生成され、アプリをビルド、デプロイできるようになりました！

おまけ設定ファイルの全貌

上記を適用したビルド設定ファイル(amplify.yml)の内容は以下です。
通信クライアントの生成の他、ビルド高速化のためFlutterSDKのキャッシュ機構も追加しています。
※ 環境変数としてFLUTTER_VERSIONを追加しています。

version: 1
backend:
  phases:
    build:
      commands:
        - npm ci --cache .npm --prefer-offline
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
frontend:
  phases:
    preBuild:
      commands:
        - |
          if [ ! -d _amplify_flutter_root ]; then
                git clone https://github.com/flutter/flutter.git --depth 1 -b $FLUTTER_VERSION _amplify_flutter_root
            else
                echo "Flutter is already installed."
            fi
        - npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID --format dart --out-dir lib
    build:
      commands: 
        - _amplify_flutter_root/bin/flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - "**/*"
  cache:
    paths:
      - _amplify_flutter_root

キャッシュについては以下の記事を参考にさせていただきました。ありがとうございます！

おわりに

Flutter Webでsandbox環境を使って開発を行うところまではドキュメントのQuickstart通りにやることでできるのですが、Flutterのホスティングについて明言されていないため困っていました。
同じ悩みを抱えている人に少しでも助けになればと思います。

はじめに

沼ったこと

解決法

おわりに

Discussion