Flutterでアプリ開発 (Netflix風) その５

2024年10月10日2024年10月18日

1. Hostingの実装

Hostingの実装

Hostingってなんぞや

■□■□ プロンプト ■□■□

Hostingを実装したいと思います。現行のソースにFirebase Hostingの実装サンプルをいただきたいです

Firebase Hostingを既存のFlutterプロジェクトに実装するには、以下の手順を踏む必要があります。現行のソースコードに大きな変更を加える必要はありませんが、いくつかの設定ファイルを追加し、コマンドを実行する必要があります。

1,まず、Firebase CLIをインストールしていない場合は、以下のコマンドでインストールします：

npm install -g firebase-tools

2,Firebase CLIにログインします：

firebase login

3,プロジェクトのルートディレクトリで以下のコマンドを実行し、Firebaseプロジェクトを初期化します：

firebase init hosting

初期化プロセス中に以下の質問に答えます：
- Firebaseプロジェクトを選択します。
- 公開ディレクトリとして build/web を指定します。
- シングルページアプリケーションとして設定するかどうかを尋ねられたら、Yes と答えます。
初期化が完了すると、プロジェクトのルートに firebase.json と .firebaserc ファイルが作成されます。
firebase.json ファイルを以下のように編集します：

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

コマンド実施！結構時間かかる。。！　３分ほど待ちました

$ firebase login
Firebase CLI v13.22.0 is incompatible with Node.js v16.14.2 Please upgrade Node.js to version >=18.0.0 || >=20.0.0

2個目のコマンド打とうとすると nvmのバージョン古いからできない、言われました　>> nvm 18系へ変更

firebase init hosting

What do you want to use as your public directory?

「公開ディレクトリとして何を使用しますか？」

これは、Firebase が公開するための静的ファイル（HTML、CSS、JavaScript、画像など）が格納されているディレクトリを指します。以下のように回答することをお勧めします：

build/web

Configure as a single-page app (rewrite all urls to /index.html)?

この質問は、Firebase Hostingの設定時に表示され、

シングルページアプリケーション（SPA）としてサイトを構成するかどうかを尋ねています。

意味:
“シングルページアプリケーションとして構成しますか？（全てのURLを /index.html にリライトします）"

推奨:

Flutterウェブアプリやその他のSPA（React, Vue.jsなど）を使用している場合は Yes を選択します。

複数のHTMLページを持つ従来型のウェブサイトの場合は No を選択します。

Flutter webアプリケーションの場合は、通常 Yes を選択することをお勧めします。これにより、アプリのルーティングが正しく機能し、ページの更新時やディープリンクでの問題を回避できます。

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

complete!　と出たので問題なしです！
続いてデプロイしていきます

$ firebase deploy

=== Deploying to '************'...

i  deploying hosting
i  hosting[************]: beginning deploy...
i  hosting[************]: found 2 files in build/web
✔  hosting[************]: file upload complete
i  hosting[************]: finalizing version...
✔  hosting[************]: version finalized
i  hosting[************]: releasing new version...
✔  hosting[************]: release complete

✔  Deploy complete!

無事達成したのでhostした状態で起動