<
コンテンツ
説明 バグレポート

Web アプリを構築してリリースする

コンテンツ

通常の開発サイクルでは、 を使用してアプリをテストしますflutter run -d chrome(たとえば) コマンドラインで。 これにより、デバッグアプリのバージョン。

このページは、リリースバージョン アプリの内容を説明し、次のトピックを取り上げます。

リリースに向けてアプリを構築する

を使用してデプロイメント用のアプリを構築します。flutter build web指図。 使用するレンダラーを選択することもできます を使用して--web-rendererオプション（参照Webレンダラー）。 これにより、アセットを含むアプリが生成されます。 ファイルを/build/webプロジェクトのディレクトリ。

単純なアプリのリリース ビルドには、 次の構造:

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
    packages
      cupertino_icons
        assets
          CupertinoIcons.ttf
    shaders
      ink_sparkle.frag
  canvaskit
    canvaskit.js
    canvaskit.wasm
    profiling
      canvaskit.js
      canvaskit.wasm
  favicon.png
  flutter.js
  flutter_service_worker.js
  index.html
  main.dart.js
  manifest.json
  version.json

Web サーバーを起動します (例:python -m http.server 8000、 または、dhttpdパッケージ）、 /build/web ディレクトリを開きます。案内するlocalhost:8000ブラウザで (Python SimpleHTTPServer の例を考えた場合) アプリのリリース バージョンを表示します。

Web への展開

アプリをデプロイする準備ができたら、 リリースバンドルをアップロードする Firebase、クラウド、または同様のサービスに接続します。 いくつかの可能性がありますが、 他にもたくさん:

  • Firebaseホスティング
  • GitHub ページ
  • Googleクラウドホスティング

Firebase Hosting へのデプロイ

Firebase CLI を使用して、Firebase で Flutter アプリを構築およびリリースできます。 ホスティング。

あなたが始める前に

始めるには、インストールまたはアップデートするFirebase CLI:

npm install -g firebase-tools

Firebaseを初期化する

  1. Web フレームワークのプレビューを有効にします。Firebase フレームワーク対応 CLI:

     firebase experiments:enable webframeworks

  2. 空のディレクトリまたは既存の Flutter プロジェクトで、初期化を実行します。 指図：

     firebase init hosting

  3. 答えyesWeb フレームワークを使用するかどうかを尋ねられた場合。

  4. 空のディレクトリにいる場合は、 Web フレームワークを選択するよう求められます。選ぶFlutter Web。

  5. ホスティング ソース ディレクトリを選択します。これは既存の Flutter アプリである可能性があります。

  6. ファイルをホストするリージョンを選択します。

  7. GitHub を使用して自動ビルドとデプロイを設定するかどうかを選択します。

  8. アプリを Firebase Hosting にデプロイします。

     firebase deploy

    このコマンドを実行すると、自動的に実行されますflutter build web --release、 そのため、別の手順でアプリを構築する必要はありません。

詳細については、公式サイトをご覧くださいFirebaseホスティングのドキュメント ウェブ上で羽ばたきます。

Web上の画像の扱い

Web は標準をサポートしていますImage画像を表示するウィジェット。 設計上、Web ブラウザはホスト コンピュータに損害を与えることなく信頼できないコードを実行します。 これにより、モバイルやデスクトップのプラットフォームと比べて、画像でできることが制限されます。

詳細については、を参照してください。Web上で画像を表示する。

Web レンダラーの選択

デフォルトでは、flutter buildとflutter runコマンド 使用autoWeb レンダラーの選択。この意味は アプリはモバイル ブラウザ上の HTML レンダラで実行され、 デスクトップブラウザ上の CanvasKit。この組み合わせがおすすめです 各プラットフォームの特性に合わせて最適化します。

詳細については、を参照してください。Webレンダラー。

縮小化

縮小化は次の場合に自動的に処理されます。 リリースビルドを作成します。

Web アプリのビルドの種類 コードは縮小されましたか? ツリーシェイクは行われましたか？
デバッグ いいえ いいえ
プロフィール いいえ はい
リリース はい はい

Flutter アプリを HTML ページに埋め込む

hostElement

Flutter 3.10で追加されました
Flutter Web アプリを埋め込むことができます Web ページの任意の HTML 要素、flutter.jsそしてそのhostElementエンジン初期化パラメータ。

Flutter Web にどの要素をレンダリングするかを指示するには、hostElementのパラメータinitializeEngine関数：

<html>
  <head>
    <!-- ... -->
    <script src="flutter.js" defer></script>
  </head>
  <body>

    <!-- Ensure your flutter target is present on the page... -->
    <div id="flutter_host">Loading...</div>

    <script>
      window.addEventListener("load", function (ev) {
        _flutter.loader.loadEntrypoint({
          onEntrypointLoaded: async function(engineInitializer) {
            let appRunner = await engineInitializer.initializeEngine({
              // Pass a reference to "div#flutter_host" into the Flutter engine.
              hostElement: document.querySelector("#flutter_host")
            });
            await appRunner.runApp();
          }
        });
      });
    </script>
  </body>
</html>

さらに詳しく知りたい場合は、こちらをご覧くださいWeb アプリの初期化のカスタマイズ。

インラインフレーム

Flutter Web アプリを埋め込むことができます。 他のコンテンツを埋め込む場合と同様に、 でiframeHTMLファイルのタグ。 次の例では、「URL」を置き換えます HTML ページの場所を置き換えます。

<iframe src="URL"></iframe>

PWAのサポート

リリース 1.20 の時点で、Web アプリ用の Flutter テンプレートにはサポートが含まれています インストール可能でオフライン対応の PWA アプリに必要なコア機能については、 Flutter ベースの PWA は、他の Web ベースと同じ方法でインストールできます。 PWA; Flutter アプリが PWA であることを示す設定は、によって提供されます。manifest.jsonによって制作されています。flutter createの中にwebディレクトリ。

PWA のサポートはまだ進行中です。 だからお願いフィードバックをください正しくないものを見つけた場合。