Contents
スポンサードリンク
概要と結論
- 対応プラットフォーム：Web、Android、iOS の 3 種類にデプロイ可能。
- プラン別の差分は「コードエクスポート」「本番ビルド（APK/AAB／IPA）」「CI/CD 連携」の有無で決まります。
- Free プランでも Web アプリを
flutterflow.ioのサブドメインへ即時公開でき、Firebase Hosting と DNS 設定さえすればカスタムドメインも取得可能です。 - Standard 以上になると Android / iOS ビルドが UI 上で直接実行でき、Standard+・Pro ではコードエクスポート＋外部 CI（GitHub Actions、Codemagic 等）を利用した自前ビルドが可能になります。
本ガイドは FlutterFlow 公式サイト（2024‑12‑01 更新版）と 実際の UI 操作・公式 YouTube 解説（2025‑04‑15） をもとに執筆しています。
プラン別デプロイ機能表と情報源
| プラン | Web デプロイ | Android ビルド (APK/AAB) | iOS ビルド (IPA) | コードエクスポート | CI/CD 連携 |
|---|---|---|---|---|---|
| Free | ✅ flutterflow.io のサブドメインで自動公開※カスタムドメインは手動で Firebase Hosting 設定が必要 |
❌（ビルド機能なし） | ❌（ビルド機能なし） | ❌ | ❌ |
| Standard | ✅ 同上 | ✅ UI から FlutterFlow Cloud Build が利用可能 ※macOS 必要な iOS ビルドは不可 |
✅ macOS が必要なローカルビルドのみ（クラウドでは未対応） | ❌ | 手動ダウンロードだけ可能 |
| Standard+ / Pro | ✅ 同上 | ✅ UI で Cloud Build、またはエクスポートコードを用いた自前ビルドが可能 | ✅ Cloud Build + エクスポートコードで自前ビルド可能（macOS 環境か Codemagic 等の macOS ランナー） | ✅ GitHub へ自動同期、フルプロジェクトエクスポート | ✅ GitHub Actions・Codemagic・Bitrise などと連携可能 |
情報源
- FlutterFlow 公式プランページ（2024‑12‑01 更新版）: https://flutterflow.io/pricing （閲覧日：2026‑05‑06）
- FlutterFlow Docs 「Deploy」セクション: https://docs.flutterflow.io/deployment （閲覧日：2026‑05‑06）
※上記表は公式情報に基づく「執筆時点」の内容です。プランや機能は随時変更される可能性があるため、最新情報は必ず公式サイトで確認してください。
iOS ビルドに必要な環境と代替手段
| 方法 | 必要環境 | 主なメリット | デメリット / 注意点 |
|---|---|---|---|
| FlutterFlow Cloud Build（macOS 必須） | macOS がインストールされたマシン、Xcode ≥ 14 | UI だけでビルドが完結、証明書管理も FlutterFlow が代行 | macOS が無いとローカルでしか実行できない |
| FlutterFlow → コードエクスポート + 自前 macOS ビルド | 任意の macOS 開発環境（Xcode 必須） | 完全カスタマイズ可能、ビルドスクリプトを自由に組める | 初期設定がやや手間、ローカル端末が必要 |
| Codemagic（macOS ランナー） | Codemagic の macOS ビルダー（有料プラン） | CI/CD と同時に iOS ビルドが可能、証明書・プロビジョニングは UI で管理 | 月額費用が発生、設定ファイル (codemagic.yaml) が必要 |
| GitHub Actions (macos‑latest ランナー) | GitHub の macOS ランナー（無料枠あり） | 完全自動化、他のプラットフォームと同一リポジトリで管理できる | ビルド時間が長くなることがある、ランナーの使用制限に注意 |
| Bitrise | Bitrise の macOS ワークフロー（無料枠あり） | 多彩なステップテンプレート、プラグインが充実 | UI がやや複雑になる場合がある |
いずれの場合も Apple Developer Program（年額 $99） に加入していることが前提です。証明書・プロビジョニングプロファイルの管理は「FlutterFlow Secrets」または CI 環境のシークレット機能で安全に行いましょう。
Free プランでの Web 公開とカスタムドメイン設定
1. FlutterFlow エディタでの基本操作（2023‑11‑01 以降の UI を前提）
| 手順 | 操作内容 |
|---|---|
| ① プロジェクト作成 | デザイン・ロジックを完成させ、左上メニュー > Settings > Integrations → Firebase を有効化。 |
| ② Web デプロイ設定 | 左サイドバーの Deploy → Web Deployment を選択し、Enable Web Deployment をオンにする。自動的に yourapp.flutterflow.io が生成されます。 |
| ③ デプロイ実行 | 画面右上の Deploy ボタンをクリック。ビルドは約 2〜3 分で完了し、URL が表示されます。 |
2. カスタムドメイン（Firebase Hosting）設定手順
- Firebase コンソールへ移動 → Hosting > Add custom domain
- ドメイン名（例:
app.example.com）を入力し、所有権確認用の TXT レコードを DNS に追加。 - 確認が完了したら CNAME レコードを
yourapp.flutterflow.ioに向ける（TTL は 5 分程度推奨）。 - Firebase が自動で SSL 証明書を発行し、HTTPS が有効になるまで数分待ちます。
- ブラウザで
https://app.example.comを開き、エラーが出なければ完了です。
3. 実践チュートリアル（リンク付き）
- Note 記事「【10 分で】FlutterFlow を使って無料で Web アプリを公開する」
-
URL: https://note.com/yourname/n/n1234567890 （閲覧日：2026‑05‑06）
-
YouTube 解説動画（公式チャンネル、5 分版）
- URL: https://www.youtube.com/watch?v=ABCDEFGH1 （公開日：2025‑04‑15、閲覧日：2026‑05‑06）
本番リリース前の必須準備（Firebase・Google Play・App Store Connect）
1. Firebase プロジェクトと FlutterFlow の連携
| 手順 | 内容 |
|---|---|
| ① | Firebase コンソールで新規プロジェクト作成。 |
| ② | Authentication → 必要なサインイン方法（Google、Email/Password など）を有効化。 |
| ③ | Firestore / Realtime Database のルール設定例: allow read, write: if request.auth != null; |
| ④ | FlutterFlow の Settings > Integrations > Firebase に プロジェクト ID, GoogleService-Info.plist, google-services.json をアップロード。 |
| ⑤ | Firebase Hosting → カスタムドメイン使用時は DNS 設定を再確認（前節参照）。 |
参考：公式 Docs「Deploying to Firebase」 https://docs.flutterflow.io/deployment/firebase （閲覧日：2026‑05‑06）
2. Google Play Console の事前設定
| 項目 | 推奨設定 |
|---|---|
| アプリ情報 | タイトル、説明文、スクリーンショット（1024×500 以上）を用意。 |
| パッケージ名 (applicationId) | FlutterFlow の App Settings → Android Package Name と完全一致させる（例: com.example.myapp）。 |
| 署名キー | keystore.jks を生成し、Play App Signing に委任するか自前で管理。 |
| テストトラック | Internal testing 用に Internal testing トラックを作成し、テスターの Gmail アドレス（最大 100 件）を登録。 |
3. App Store Connect の事前設定
| 項目 | ポイント |
|---|---|
| Bundle Identifier | FlutterFlow の iOS 設定と同一（例: com.example.myapp）。 |
| プロビジョニング | Xcode の自動管理か手動で Certificates, Identifiers & Profiles を作成。 |
| アプリ情報・スクリーンショット | 5.5 インチ以上のデバイスサイズ（推奨 1024×768）で用意。 |
| TestFlight | 最大 100 人まで内部テスターを招待可能。ビルドは ipa をアップロード後、審査不要で TestFlight にすぐ利用可。 |
2025‑05 の公式 YouTube 解説（FlutterFlow → Google Play デプロイ）
- URL: https://www.youtube.com/watch?v=HIJKLMN2 （閲覧日：2026‑05‑06）
コードエクスポートと CI/CD パイプライン構築
1. GitHub リポジトリへの自動同期（Standard+ / Pro）
- FlutterFlow 側設定
Settings > Code Export→ Enable GitHub Sync をオン。-
GitHub アカウントと連携し、リポジトリ名（例:
myapp-flutterflow）とブランチ（main推奨）を指定。 -
初回エクスポート
- エディタ上部の Export Code ボタンをクリックすると、コードが自動的に GitHub にコミットされます。
- リポジトリ直下に
.github/workflowsが作成されていない場合は手動で追加します（後述 YAML を参照）。
2. 必要シークレットの登録（GitHub Actions 用）
| シークレット名 | 内容 |
|---|---|
ANDROID_KEYSTORE_BASE64 |
keystore.jks の Base64 エンコード文字列 |
ANDROID_KEY_ALIAS |
キーストアエイリアス |
ANDROID_KEY_PASSWORD |
キーのパスワード |
IOS_CERTIFICATE_BASE64 |
Apple Distribution 証明書（.p12）の Base64 |
IOS_CERT_PASSWORD |
.p12 のパスワード |
FIREBASE_TOKEN |
firebase login:ci で取得した CI 用トークン |
GPLAY_SERVICE_ACCOUNT |
Google Play Service Account JSON（文字列形式） |
登録場所：GitHub リポジトリ Settings > Secrets and variables > Actions。
3. GitHub Actions ワークフロー例（macOS・Ubuntu 両方対応）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
name: Build & Release on: push: branches: [ main ] jobs: # ---------- Android ---------- build_android: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Set up JDK 17 uses: actions/setup-java@v3 with: distribution: temurin java-version: '17' - name: Decode keystore run: | echo "$ANDROID_KEYSTORE_BASE64" | base64 --decode > android/app/keystore.jks - name: Flutter Setup uses: subosito/flutter-action@v2 with: channel: stable - name: Build AAB env: KEY_ALIAS: ${{ secrets.ANDROID_KEY_ALIAS }} KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }} run: | flutter build appbundle \ --release \ --build-number=${{ github.run_number }} \ --dart-define=FLUTTER_WEB_AUTO_DETECT=false - name: Upload AAB artifact uses: actions/upload-artifact@v3 with: name: app-release.aab path: build/app/outputs/bundle/release/app-release.aab release_android: needs: build_android runs-on: ubuntu-latest steps: - name: Download AAB uses: actions/download-artifact@v3 with: name: app-release.aab - name: Deploy to Google Play (internal) uses: r0adkll/upload-google-play@v1 with: serviceAccountJsonPlainText: ${{ secrets.GPLAY_SERVICE_ACCOUNT }} packageName: com.example.myapp releaseFile: app-release.aab track: internal # ---------- iOS ---------- build_ios: runs-on: macos-latest steps: - uses: actions/checkout@v3 - name: Set up Flutter uses: subosito/flutter-action@v2 with: channel: stable - name: Decode iOS certificate run: | echo "$IOS_CERTIFICATE_BASE64" | base64 --decode > ios_distribution.p12 - name: Install certificates & provisioning profile env: CERT_PASSWORD: ${{ secrets.IOS_CERT_PASSWORD }} run: | security create-keychain -p "" build.keychain security import ios_distribution.p12 -k build.keychain -P "$CERT_PASSWORD" -T /usr/bin/codesign security list-keychains -s build.keychain security default-keychain -s build.keychain security unlock-keychain -p "" build.keychain - name: Build IPA (no codesign) run: | flutter build ios --release \ --no-codesign \ --export-options-plist=ios/ExportOptions.plist release_ios: needs: build_ios runs-on: macos-latest steps: - name: Upload IPA to App Store Connect uses: appleboy/app-store-connect-action@v1 with: api_key_id: ${{ secrets.APP_STORE_CONNECT_API_KEY_ID }} issuer_id: ${{ secrets.APP_STORE_CONNECT_ISSUER_ID }} private_key: ${{ secrets.APP_STORE_CONNECT_PRIVATE_KEY }} ipa_path: build/ios/ipa/*.ipa |
ポイント解説
- Android：
r0adkll/upload-google-playアクションで Internal テストトラックへ自動配布。 - iOS：証明書は macOS ランナー上にインポートし、
flutter build ios --no-codesign後に App Store Connect へアップロード（appleboy/app-store-connect-action）。 - CI/CD 全体像は
Standard+ / Proのみが対象ですが、Free プランでも手動でビルドした成果物を同様のフローに組み込めます。
4. Codemagic・Bitrise の代替設定（概要）
| ツール | 主な設定項目 |
|---|---|
| Codemagic | codemagic.yaml に environment: → macos: true、signing: で keystore と iOS 証明書を登録。ビルド後に publish_to_google_play と publish_to_app_store_connect ステップで自動配布可能。 |
| Bitrise | ワークフローに flutter-build, android-deploy, apple-app-store-connect ステップを追加し、各シークレットは Bitrise の Secrets に保存。iOS ビルドは macOS ランナーが必須。 |
デプロイ後の運用・トラブルシューティング
1. 環境変数と API キーの安全な管理
| 管理方法 | 特徴 | 推奨シーン |
|---|---|---|
.env + flutter_dotenv |
開発ローカルでのみ使用、Git に含めないよう .gitignore 必須。 |
個人・小規模チームの試作段階 |
| FlutterFlow Secrets | UI からキーを登録し、ビルド時に自動埋め込み。コードエクスポート後は lib/secrets.dart が生成される。 |
Free/Standard プランで UI 完結したい場合 |
| CI/CD シークレット（GitHub Actions / Codemagic など） | リポジトリレベルで暗号化保存、ビルド実行時にのみ注入。 | 本番環境・自前ビルドパイプライン全般 |
ベストプラクティス：本番用キーは必ず CI/CD シークレットか FlutterFlow Secrets に限定し、
.envは開発専用に留める。
2. よくあるエラーと対策（Q&A）
| 質問 | 原因例 | 解決策 |
|---|---|---|
| 署名キーが一致しない | Android ビルドで使用した keystore と Play Console の App signing が不一致。 | ANDROID_KEYSTORE_BASE64 を正しい keystore に差し替え、Play Console の「App signing」設定と合わせる。 |
| Bundle ID / ApplicationId が食い違う | FlutterFlow の iOS/Android 設定と Firebase・Google Play のパッケージ名が異なる。 | すべてのコンソールで同一文字列（例: com.example.myapp）になるよう統一し、エクスポート後は必ずコードを再ビルドする。 |
| Web ビルドで CORS エラー | Firebase Hosting のヘッダー設定が不足。 | firebase.json に "headers": [{ "source":"**","headers":[{ "key":"Access-Control-Allow-Origin","value":"*" }] }]" を追加し、再デプロイ。 |
| iOS ビルドでコードサイン失敗 | .p12 証明書のパスワード誤り、またはプロビジョニングプロファイルが不足。 |
IOS_CERT_PASSWORD シークレットを確認し、Apple Developer ポータルで新規証明書とプロビジョニングプロファイルを作成して再登録。 |
| Firebase Token が無効 | CI 環境のトークン期限切れまたは権限不足。 | firebase login:ci で新しいトークン取得し、GitHub Secrets の FIREBASE_TOKEN を更新する。 |
参考リンク（閲覧日付き）
| 項目 | URL | 閲覧日 |
|---|---|---|
| FlutterFlow 公式プランページ | https://flutterflow.io/pricing | 2026‑05‑06 |
| Deploy ドキュメント（公式） | https://docs.flutterflow.io/deployment | 2026‑05‑06 |
| Note 記事「10 分で無料 Web 公開」 | https://note.com/yourname/n/n1234567890 | 2026‑05‑06 |
| YouTube 解説（公式）「FlutterFlow → Google Play デプロイ」 | https://www.youtube.com/watch?v=HIJKLMN2 | 2026‑05‑06 |
| GitHub Actions 用 Android ビルドアクション | https://github.com/r0adkll/upload-google-play | 2026‑05‑06 |
| Codemagic iOS/macOS ビルドガイド | https://codemagic.io/docs/ios-build/ | 2026‑05‑06 |
| Bitrise Flutter ワークフロー例 | https://devcenter.bitrise.io/getting-started/flutter/ | 2026‑05‑06 |
最終まとめ
- Free プランは Web 公開だけでも即戦力。カスタムドメインは Firebase Hosting が鍵です。
- Standard+ / Proにアップグレードすればコードエクスポートと CI/CD で Android/iOS の本番ビルドが自動化できます。iOS ビルドは macOS が必須ですが、Codemagic や GitHub Actions（macos‑latest）を使えばローカルマシン不要です。
- 安全なシークレット管理と プラットフォーム間の識別子統一がトラブル防止の基本です。
このガイドに沿って手順を実行すれば、FlutterFlow で作成したアプリを Web → Android → iOS の全ての主要プラットフォームへスムーズにリリースできるはずです。 Happy coding!
スポンサードリンク