Flutter WebをGitHub Actionsでビルド＆S3デプロイ自動化（CloudFrontキャッシュも削除）

Flutter Webで構築したウェブサイトを効率的に公開するためには、自動化されたビルドとデプロイの仕組みが不可欠です。
この記事では、GitHub Actionsを活用して、Flutter Webのソースコードを自動でビルドし、S3にアップロード、その後CloudFrontのキャッシュを自動で削除する方法を紹介します。
作業を効率化し、手動ミスを防ぎたいシステムエンジニアの方にとって、実務で役立つ内容となっています。

構成の概要

今回の構成は以下の通りです。

必要な準備

GitHub Secretsへの登録

以下の値をGitHubリポジトリのシークレット変数として登録しておきます。

• AWS_ACCESS_KEY_ID
• AWS_SECRET_ACCESS_KEY
• AWS_S3_BUCKET（S3バケット名）
• CLOUDFRONT_DISTRIBUTION_ID（CloudFrontディストリビューションID）

S3バケットの設定

S3バケットは静的ウェブサイトホスティングとして有効化し、アップロードされたファイルが公開読み取り可能になるよう設定しておきます。

CloudFrontのキャッシュ削除設定

CloudFrontにキャッシュされたファイルを更新した内容に即座に反映させるため、キャッシュの削除処理（無効化）を行います。

実装手順（GitHub Actionsの設定）

リポジトリ内に.github/workflows/deploy.ymlというファイルを作成し、以下の内容を記述します。

name: Flutter Web Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: ソースコードの取得
        uses: actions/checkout@v3

      - name: Flutter環境の準備
        uses: subosito/flutter-action@v2
        with:
          flutter-version: 'stable'

      - name: Web向けビルドの実行
        run: flutter build web --release

      - name: S3へのアップロード
        uses: jakejarvis/s3-sync-action@v0.5.1
        with:
          args: --acl public-read --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          SOURCE_DIR: build/web

      - name: CloudFrontキャッシュの無効化
        uses: awact/cloudfront-action@v1
        with:
          distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
          invalidation-path: '/*'
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

各設定の詳細と意味

flutter-version: ‘stable’

これはFlutterのインストール対象を安定版に指定しています。
開発環境の差異によるビルド失敗を防ぐため、stableなバージョンを明示するのが安全です。

run: flutter build web –release

このコマンドはFlutterのソースコードを本番用に最適化された状態でビルドします。
出力されたファイルはbuild/webに生成されます。

• –release オプションを付けることで、
  • ファイルサイズが縮小される
  • 不要なデバッグ情報が除外される
  • 実行速度が最適化される という利点がある

args: –acl public-read –delete

この部分はS3にアップロードする際の動作指定です。

• –acl public-read
  アップロードされたファイルが誰でも閲覧できるようになる設定です。静的ウェブサイトとして公開するために必要です。
• –delete
  ローカルに存在しないファイルをS3から自動的に削除します。これにより、過去の不要なファイルが残らず、常に最新の状態に保てます。ただし、意図しない削除がないように注意が必要です。

処理の流れ

1. 開発者がmainブランチにプッシュすると、自動的にワークフローが起動します。
2. Flutter環境がセットアップされ、Web向けにビルドされます。
3. ビルド結果がS3バケットにアップロードされ、古いファイルは削除されます。
4. CloudFrontに対して、キャッシュされたファイルの削除要求が送信されます。

よくあるトラブルと対策

ビルドが失敗する場合

Flutterのバージョンがローカルと異なる場合、依存パッケージの問題が原因になることがあります。
事前にflutter pub getをローカルで実行し、依存関係を確認しておきましょう。

S3にファイルが公開されない場合

S3側のバケットポリシーやパーミッションを確認し、公開アクセスが許可されているかを確認してください

CloudFrontの反映が遅い

キャッシュ削除が完了するまで数分かかる場合があります。
即時反映を確認したい場合は、無効化ステータスをAWS管理画面でチェックしてください。

まとめ

Flutter Webで作成したウェブサイトをGitHub Actionsで自動的にビルド・S3へのデプロイ・CloudFrontのキャッシュ削除まで行うことで、運用の手間を大幅に削減できます。
手動によるミスも防げ、より安定した公開運用が可能になります。
FlutterとAWSの知識を実務で活用し、再現性の高い開発フローを構築したい方にとって、本記事の内容が助けになれば幸いです。
この記事を参考に、自社やチームの開発プロセスの自動化を一歩進めてみてはいかがでしょうか。

• Original:https://minory.org/flutter-auto-build-deploy.html
• Source:minory
• Author:管理者

Amazonベストセラー