Azure Static Web Apps に Flutter on the Web をデプロイしてみた

いわさです。

Azure Static Web Appsはフロントエンドフレームワークごとのデプロイオプションが用意されていますが、Flutterについては用意されていません。
しかし、用意されていないものもカスタムオプションが用意されています。
そのカスタムオプションで用意されていないものも、例えばGitHubリポジトリから統合されたものであればGitHub Actionsの定義を修正することで様々なステップを追加することが出来るのでどうにでもなります。

本日は、GitHub リポジトリで管理している Flutter on the Web を Azure Static Web Apps へデプロイしてみました。

デプロイするアプリケーション

以下の手順に従って、flutter createのデフォルトのやつをデプロイします。

flutter build webでリリース用にビルドします。

出力後は以下のような構成となります。
Static Web Appsへのデプロイ前にビルドし、赤枠部分をアプリケーション出力先として指定したいところです。

Static Web Apps への設定

Static Web Appsでは少しビルド設定が出来るのですが、ビルドコマンドなどは設定出来ません。
カスタムで場所や出力先は設定出来ます。

Static Web Appsでサポートされているいないに関わらず、主要なフロントエンドフレームワークとライブラリの設定が以下にまとまっています。Flutter Webも含まれています。

カスタムビルドコマンドとしてflutter build web、アプリ成果物の場所がとしてbuild/webを指定する必要があるようです。
このうち、アプリ成果物についてはStatic Web Apps構成時のカスタム構成から設定が出来ます。

一旦こちらだけ設定してStatic Web Appsを構築しておきます。

ビルド設定されていないので失敗しました。

ワークフロー編集

flutter build webをどこかで実行してやる必要があります。
Static Web Apps 作成後にワークフローを編集しましょう。

私の観測範囲では、GitHub ActionsでFlutterに関するActionを構成する際はこちらを使うことが多いように見受けられます。本日はこちらを使ってみましょう。

以下のハイライト部分を追加します。

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.0.0'
      - run: flutter pub get
      # - run: flutter test
      - run: flutter build web
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_PURPLE_RIVER_0612AE410 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "build/web" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

今回はテストを含んでいないのでコメントアウトしていますが、必要に応じてflutter testも含めます。
この内容で更新するとStatic Web Appsへの再デプロイされます。動作確認してみましょう。

動作しました。
デプロイパイプラインとして完成したはずなので、コード修正してみましょう。

lib/main.dart

:

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter--;
    });
  }

:

}

変更後のソースコードがビルドされて期待どおり変更が反映されました。

さいごに

本日は Static Web Apps へ Flutter Web をデプロイしてみました。
少しGitHub Actionsを修正する必要がありますが、Flutterに関わらずカスタムビルドが必要なフロントエンドはこの応用でいけそうですね。