📑

Amplify Hostingを使ってFlutter Webをデプロイする

2023/07/02に公開

AWS

Flutter の Web アプリをサクッとデプロイできるホスティング先を検討・比較していたのですが、以下の点で AWS の Amplify Hosting が良さそうだったので試してみました。

GitHub への push をトリガーに自動でデプロイできる
デプロイ時に Amplify が提供するコンテナ環境を使って build ができる
- ローカルでのビルドが不要
デプロイした Web アプリのアクセス制御に Basic 認証が用意されている
- Poc やプロトタイプ検証などでアクセス制御したいときに便利

また、以下のような機能も用意されているので複雑な要件にも対応できそうでした。

カスタムドメイン
プルリクエスト毎のプレビュー環境の自動作成
SPA 対応（ルーティング設定）

準備

GitHub にリポジトリを作成してデプロイ対象のアプリを push しておきます（プライベートリポジトリでも可）

Amplify Hosting のセットアップ

AWS にログインしてコンソールから Amplify を開く

リージョンを東京に変更（ケースバイケースで）

画面を下までスクロールしてAmplify ホスティングの使用を開始するを選択

ホスティングの設定から GitHub を選択して続行をクリック

表示内容と OAuth を許可する GitHub アカウントを確認してAuthorizeを選択

GitHub アカウントに複数の Organization が紐づいている場合はインストール先を選択

Amplify からのアクセスを全てのリポジトリに許可するか特定のリポジトリを選択してInstall & Authorizeをクリック

deploy するリポジトリとブランチ名を選択して次へ

ビルドの設定から編集をクリック

yaml の編集画面が開くので以下の内容を貼り付けて（上書きして）保存、デフォルトの内容から編集・追記した内容は以下の通りです

preBuild: で Flutter SDK をインストール
build: で Flutter Web をビルド
baseDirectory: に build/web を指定
cache: で Flutter SDK をキャッシュして 2 回目以降のビルド時に再利用するように

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - |
            if [ ! -d _amplify_flutter_root ]; then
                git clone https://github.com/flutter/flutter.git --depth 1 -b 3.10.5 _amplify_flutter_root
            fi
    build:
      commands:
        - |
            _amplify_flutter_root/bin/flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - _amplify_flutter_root

必要な Flutter SDK のバージョン（上記の例だと3.10.5を使用）はプロジェクトによって異なるので、適宜変更してください

yaml の内容が更新されていることを確認して次へ

内容を確認して保存してデプロイをクリックするとデプロイが開始されます

ダッシュボードからデプロイ状況が確認できます

ブランチ名をクリックすると詳細なログが確認できます

構築からフロントエンドを選択するとビルドのログが確認できます、ビルドエラーなどはこちらから確認ができます

デプロイのステータスがグリーンになったら完了です

左下の URL をクリックするとデプロイしたアプリにアクセスできます

以後、GitHub のブランチに push するとビルド&デプロイが走りアプリが自動更新されます

Basic 認証の設定

アプリの設定からアクセスコントロールを選択してアクセスの管理をクリック

全てのブランチで共通のもしくは個々のブランチに対する設定の 2 通りの設定方法があります（Amplify がリポジトリのブランチ毎のデプロイに対応しているためかな）

全てのブランチで共通の設定

グローバルパスワードの適用をクリックして ID とパスワードを入力して Save

ブランチ毎の設定

ブランチのアクセス設定を制限 - パスワードが必須ですに変更して ID とパスワードを入力して Save

設定が保存されていることを確認

デプロイ先の URL にアクセスすると ID とパスワードが要求されることを確認

カスタムドメインの設定（Route53）

カスタムドメインを設定するとわかりやすい URL を使ってアプリケーションにアクセスできるようになります。

この記事ではRoute53で管理しているホストゾーン（ドメイン）使用して Amplify Hosting にカスタムドメインを設定します。Amplify 側でカスタムドメインの設定を行うと Route53 側のホストゾーンに対して自動的に CNAME の登録が行われます。

メニューからドメイン管理を選択してドメインの追加をクリックします。

ドメインの入力欄をクリックすると Route53 で管理しているホストゾーン（ドメイン）が表示されるので、使用するホストゾーンを選択してドメインを設定をクリックします。

サブドメインの設定が表示されます。

ドメインのルートを使わない場合はルートを除外を選択します
画像でwwwが表示されているところに任意のホスト名（CNAME）を入力します
画像のmainはデプロイ対象のブランチです、デプロイ対象のブランチが複数ある場合は選択が可能のようです

保存を押すとデプロイが開始されます（表示が崩れているのは仕様のようです）、Route53 を使用している場合、完了するまで数分かかりました。

デプロイが完了すると指定したドメインとホスト名を使ってアクセスできるようになります。

プルリクエストのプレビュー

プレビューを使用すると、プルリクエストをマージする前に変更をプレビューできます。プルリクエストがオープンされたタイミングでメインのデプロイサーバとは別のサーバにアプリケーションがデプロイされてプレビューが可能になります。

プレビューを有効化をクリックします。

以下の画面が表示されたら初回のセットアップと同様の手順で GitHub との連携を行います。

ブランチを選択して管理をクリックします。

チェックを入れて保存します。

ステータスが有効に変わっていれば完了です

この状態で GitHub 上でプルリクエストを作成します

すると以下のようにプレビューのデプロイが自動で行われます。

デプロイが完了するとプルリクエストの画面にプレビューのデプロイ先の URL が表示されます。

プレビュー環境はプルリクエストがマージやクローズされると自動で削除されます。

補足

アクセスコントロールの設定で Basic 認証を適用する際にグローバルパスワードの適用を選択しているとプレビューのデプロイ先の URL にも Basic 認証が適用されます。個別のブランチを選択している場合はプレビューのデプロイ先の URL には Basic 認証は適用されませんのでご注意ください。

カスタムドメインを設定した場合もプレビューのデプロイは行われますが、プレビューのデプロイ先の URL はカスタムドメインではなく Amplify のデフォルト URL になります。

料金

無料枠がありますが、deploy（build）時間、ストレージ、データ転送、リクエストに応じた従量課金のようです、正しい内容は上記からご確認ください 🙏

以上です、参考になったらいいねを頂けると嬉しいです。

準備

Amplify Hosting のセットアップ

Basic 認証の設定

カスタムドメインの設定（Route53）

プルリクエストのプレビュー

補足

料金

Discussion