AWS Amplify に Flutter プロジェクトをデプロイする

ステージング環境および本番環境を含む

FlutterプロジェクトをAWS Amplifyバックエンドで作成した後、次のステップはデプロイすることです。ここでは、FlutterプロジェクトをAWS Amplifyホスティングにデプロイする方法を紹介します。

AWS Amplifyは、フルスタックアプリケーションの開発とホスティングを行うためのAmazonのサービスです。一部の人は、プロトタイピングにしか向いていないと述べていますが、ここでは特定の適切性について議論するのではなく、このホスティングの実装方法についてレビューします。

Flutter to amplify tracktor

Flutterフルスタックアプリの構造

Flutterフルスタックアプリは、主に2つのコンポーネントから構成されています。

Flutterフロントエンド
一部のバックエンド

フロントエンドは、Webアプリ、Androidアプリ、iOSアプリにコンパイルでき、それぞれ異なる方法でデプロイされます。ここではWebアプリのみをレビューします。

Flutterフルスタックプロジェクトのバックエンドは、AWS Amplifyを使用するとJavaScriptのLambda関数のセットになります。正確にはTypeScriptです。選択肢はそれほど多くありませんが、GraphQL関数、DynamoDBとのREST、AWS S3へのアクセスなどがあります。しかし、これは速く簡単に実装できます。

AWS Amplifyデプロイの設定

では、AWS Amplifyデプロイを作成しましょう。

https://console.aws.amazon.com/amplify/apps にアクセスし、お好みのリージョンを選択してください。
Create new appボタンをクリックしてください。
Gitプロバイダーを選択してください。2024年8月以前にAWSアカウントを作成した場合、新しい顧客にはAWS Codecommitサービスが提供されません。私はそうしたので、このテストではAWS Codecommitを使用しています。Nextボタンをクリックしてください。
デプロイするFlutterアプリのリポジトリとブランチを選択してください。Nextボタンをクリックしてください。
今、App settingsページにいます。ここで、WizardはAmplify Gen2アプリを検出しましたが、フロントエンドのビルド設定が誤って設定されています。後で修正します。Nextをクリックしてください。

detected the Amplify Gen2 app

まとめを確認し、Save and Deployをクリックしてください。
新しいデプロイが進行中であることを確認できます。

amplify-deploying

その後、驚くほどデプロイが完了します。

amplify-deployed

このdomainリンクをクリックすると、まだFlutterアプリがビルドされていないため、ブラウザ画面が空になります。心配しないでください。修正するために必要なのは、ただ1つのことだけです。

左のパネルでHosting / Build Settingsをクリックしてください。以下のような画面が表示されます。

amplify-build-settings

編集し、フロントエンドビルド設定を貼り付け、アーティファクトとキャッシュの部分を保持してください。

frontend:
  phases:
    preBuild:
      commands:
        - echo "Installing Flutter SDK"
        - git clone https://github.com/flutter/flutter.git -b stable --depth 1
        - export PATH="$PATH:$(pwd)/flutter/bin"
        - flutter config --no-analytics
        - flutter doctor
        - echo "Installing dependencies"
        - flutter pub get
        - echo "Generating backend connection"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Building Flutter web application without WASM support"
        - flutter build web

コンパイルとデプロイスクリプトの完全な例については、以下を参照してください。

Saveをクリックし、デプロイページに移動してRedeploy this versionをクリックしてください。または、ブランチに変更をコミットしてプッシュしてください。
再構築と再デプロイが完了するのを待ち、アプリにアクセスしてください。

ステージングとプロダクション環境

Prod、Staging、その他の環境ごとに特別な設定や追加の環境変数が必要ではありません。 Amplifyデプロイはすでに環境変数 $AWS_BRANCH と $AWS_APP_ID を提供しています。したがって、異なるブランチをデプロイする際、スクリプトはバックエンドを異なるステージにデプロイし、フロントエンドをそのステージに接続します。 アプリの新しいデプロイを作成し、異なるブランチを選択するだけです。それだけです。

詳細については、以下を参照してください。

バックエンドをコンパイルする際、以下のような部分があります。

npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID

これは、Reactフロントエンドが必要とするamplify_outputs.jsonファイルを生成します。

[INFO]: File written: amplify_outputs.json

しかし、Flutterフロントエンドではamplify_outputs.dartが必要です。

オリジナルのドキュメントでは、Flutterフロントエンドについてあまり述べていませんが、重要なポイントがあります。

以下を実行して、ブランチ環境の設定を生成してください：

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

このスクリプトは、Flutterフロントエンドが使用するDartバックエンド接続コード（ファイルlib/amplify_outputs.dart）を生成します。 --app-id <your-amplify-app-id>と--branch <your-git-branch-name>のパラメータを指定することで、デプロイされた各ブランチのバックエンドが異なります。このファイルはGitリポジトリに含めないでください。アプリプロジェクトの.gitignoreに以下が含まれていることを確認してください。

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

lib/amplify_outputs.dartをGitにプッシュし、npx ampx generate outputs...を実行しない場合、デプロイされたフロントエンドは開発用のサンドボックスに接続しようとして、適切なステージングまたはプロダクションバックエンドに接続しません。

Amplifyホスティングでのビルド設定の実際のスクリプトは次の通りです。

npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID

Amplify.yamlの例

Redditのどこかで見つけたものです。ここに保存しておきます。

AWS AmplifyホスティングにFlutter WebアプリをビルドおよびデプロイするAmplify.yamlの完全な例：

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:
        - echo "Installing Flutter SDK"
        - git clone https://github.com/flutter/flutter.git -b stable --depth 1
        - export PATH="$PATH:$(pwd)/flutter/bin"
        - flutter config --no-analytics
        - flutter doctor
        - echo "Installing dependencies"
        - flutter pub get
        - echo "Generating backend connection"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Building Flutter web application without WASM support"
        - flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

Flutterフルスタックアプリの構造

AWS Amplifyデプロイの設定

ステージングとプロダクション環境

Amplify.yamlの例

有用なリンク