Contents
Flutter WebアプリのAWS Amplifyデプロイ手順を明確にしたガイド
Flutter Webアプリの公開や運用において、AWS Amplifyは開発効率と保守性を高めるための重要なツールです。特にバージョン管理やCI/CDの自動化が容易で、フロントエンドエンジニアにとって実践的な選択肢として注目されています。本記事では、Flutter WebアプリをAWS Amplifyでデプロイする具体的な手順と落とし穴を解説します。
AWS Amplifyアカウント設定手順
Flutter Webアプリのデプロイにはまず、AWS Amplifyの環境構築が不可欠です。サービス有効化からCLIインストールまでの一連の流れを確認してください。
AWSコンソールでのサービス有効化
AWSアカウントをお持ちでない場合は公式サイトから作成してください。既存ユーザーであれば、以下手順を行います。
- AWS Management Consoleにログイン
- 左側メニューの「Services」から「Amplify」を選択
- 「Get started」をクリックし、サービス有効化を完了
注意: Amplifyはアカウント作成時に自動で有効になる場合もありますが、公式ドキュメントで確認してください。
Amplify CLIのインストール確認
CLIを使用する際にはバージョン管理が重要です。最新版を導入するために以下のコマンドを実行します。
|
1 2 |
npm install -g @aws-amplify/cli |
インストール後、以下でバージョン確認を行います。
|
1 2 |
amplify --version |
FlutterプロジェクトのWeb対応設定方法
FlutterアプリはデフォルトではWebプラットフォームに対応していないため、特別な設定が必要です。
pubspec.yamlの変更点
pubspec.yamlファイルに以下の内容を追加します。
|
1 2 3 4 |
dependencies: flutter: sdk: flutter |
また、Flutter 3.10以降ではWeb対応がデフォルトで可能ですが、以下の場合には手動設定が必要です。
| バージョン | Web対応状態 | 備考 |
|---|---|---|
| Flutter 3.9以前 | 手動必要 | --platforms webオプション必須 |
| Flutter 3.10以降 | 自動有効 | --platforms指定は推奨されない |
build web実行時の注意事項
Flutter Webのビルドは以下のように実行します。
|
1 2 3 |
flutter create --platforms web my_flutter_web_app cd my_flutter_web_app |
よくあるミスとして、--platformsオプションを忘れるとWeb向けにビルドされずエラーになることがあります。
Amplify CLIによるデプロイフロー
Amplify CLIを使用したプロジェクト初期化とホスティング設定のステップを解説します。
amplify initでのプロジェクト初期化
CLIでプロジェクトを作成する際、以下のコマンドを実行してください。
|
1 2 |
amplify init |
出現する質問に対して以下のように回答します。
- Amplify CLIが利用するプロジェクト名:
my_flutter_web_app - AWSプロファイルを選択: 新しいプロファイルを作成するか、既存のものを選択
amplify add hostingのオプション選択
ホスティング環境を設定するには以下のコマンドを使用します。
|
1 2 |
amplify add hosting |
質問に応じて以下のように回答してください。
- Hosting type:
S3 and CloudFrontを選択 - Existing web application: ビルド済みの
build/web/ディレクトリを指定
HTTPS設定とドメインマッピング
実際の運用ではHTTPS化が必須です。AWS Certificate Manager（ACM）での証明書申請からドメインマッピングまで手順を確認します。
AWS Certificate Managerでの証明書申請手順
- AWS Management Console → 「Certificate Manager (ACM)」へアクセス
- 「Request a certificate」をクリック
- Domain name: ご用意のドメイン（例:
example.com）を入力 - 「Validation method」で「DNS validation」または「Email validation」を選択
落とし穴に注意: ドメイン所有権確認が完了していない場合は証明書申請が失敗します。以下ケースに対応する必要があります。
| 検証方法 | 必要手順 | 対応例 |
|---|---|---|
| DNS validation | CNAMEレコード追加 | AWSの指示に従ってDNS設定 |
| Email validation | メール認証 | 管理者メールアドレスで確認 |
DNS設定時のよくあるエラー
- CNAMEレコードがない場合：CloudFrontのドメインをホスト名として指定しないとエラーになります。
- TTL設定ミス：変更後のDNS反映が遅くなることがあります。TTLは30分以下に設定することを推奨します。
エラーログ確認手法
デプロイ後も問題が発生する可能性があるため、エラーの見つけ方と対処法を解説します。
CloudWatchログの検索方法
CloudWatchでアプリケーションの実行ログを確認するには以下を行います。
- AWS Management Console → 「CloudWatch」へアクセス
- ロググループを選択し、「Filter」機能を使用して特定のキーワード（例:
404）を検索
例:
ERROR: 404 Not Foundというログが表示された場合、ルート設定やリダイレクト設定に不備がある可能性があります。
ブラウザコンソールでのデバッグポイント
ブラウザでアプリケーションを開いた際のJavaScriptエラーは以下の手順で確認できます。
- F12キーで開発者ツールを開く
- 「Console」タブを選択
- エラーメッセージをクリックし、スタックトレースを確認
要点まとめ
Flutter WebアプリのAWS Amplifyデプロイには以下のポイントが重要です。
- アカウント設定とCLI導入は基本ステップとして重要です。
- FlutterプロジェクトのWeb対応には
pubspec.yamlとflutter create --platforms webが不可欠です。 - Amplify CLIによるデプロイフローを正しく理解することが成功の鍵です。
- HTTPS設定では証明書申請とDNS設定に注意が必要です。
- ログ確認はトラブルシューティングにおいて必須です。
実際にデプロイして動作確認を行い、環境構築時の課題を共有してください。
補足: 本記事ではAWS Amplifyの公式ドキュメント（https://docs.amplify.aws/）を参照し、最新情報を反映しています。