Flutter+Firebaseでウェブサイトを作るときメモ（デプロイターゲット

2023年12月17日 15:29

※個人メモです。

えー、最近ですね、GooglPlayさんからアプリのアップデートを要求されておりまして、ぼちぼちやっておるのですが、
「ついでにテスト環境作ったろ（遅」
と、思い立ってしまい、FirebaseのHosting周りで沼にはまった（誤用
わたしのメモ書きであります。

まぁ、何を描くかっていうと、
デプロイターゲットについてですね。

FireBaseにありますドキュメントはこちらです。
ふむふむ・・・

・・・(´・ω・`)ふむ。

ま、かみ砕いた私のメモ書いていきますね。
まずは
デプロイターゲット
デプロイ（FirebaseのHostingという、ウェブサイトを掲載できる所にウェブサイトのデータをアップする作業）するときの、必要情報をまとめたやつ。
です。
まず、FirebaseのHostingですが、まぁ、ここでウェブページを公開できますよ！くらいの認識でよいです。

ちなみに、こんな風に

FirebaseにあるHostingが一つで、Flutterの一つのプロジェクトからしかデプロイしないよってときは特にデプロイターゲットを指定しなくてもいける気がします。（Hostingの作業の中で自動的に作成されたものだけで実装ができたはず、、、記憶が古い）

さっきの例をパターン１としまして、パターン２を見ていきます。

パターン２

FirebaseのHostingに複数のウェブサイトがあり、それらに対して一つのFlutterプロジェクトからそれぞれのウェブサイトにデプロイするパターン。
この時指定が必要なのは
・デプロイするHostingのWebサイト（サイトID）
・デプロイするデータがFlutterプロジェクトのどこにあるのか
です。
では、えーっとコマンドを使うんです。
Firebase-toolsは入れておいてくだしあ。
で、デプロイターゲットを作成する方法コマンドはこんな感じ、

firebase target:apply hosting target_name website_a

このコマンド上「target_name」の部分は、好きな名前でよいです。自身が認識しやすい文字を入れましょう。mainとか、testとか、自分がわかればなんでもよし。
今回はwebaとwebbにします。
てことで、こんな感じ、

firebase target:apply hosting weba website_a
firebaes target:apply hosting webb website_b

これで、hostingのwebsite_aに対する設定の名前を「weba」、
hostingのwebsite_bに対する設定の名前を「webb」とすることができました。

なお、website_aや、website_bと記述しているエリアについてはちゃんとしたサイトIDを入れる必要があります。
サイトＩＤを確認する方法は

firebase hosting:sites:list

これで確認できます。
次に「デプロイするデータがFlutterプロジェクトのどこにあるか」の指定ですが、こちらはコマンドではなく、Flutterプロジェクトの中に作成されているfirebase.jsonファイル内を更新する必要があるようです。
以下一部抜粋

  "hosting": [{
    "target": "weba",
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
    {
      "target": "webb",
      "public": "public",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ]
    }
]

えーっと、、すでに更新しちゃったから最初がどうなってるか忘れちゃった(´・ω・`)
こちら、jsonファイルなので、複数のターゲットがあるときは配列形式で記述します。

"hosting":[
 {webaの内容},
 {webbの内容}
]

こんな感じで増やすんやで。
中身ですが、Flutter上の何処の内容をデプロイするかという情報は
「public」に記述します。
どういう風に記述するかは未調査です！ごめんね！！！！

で、デプロイ方法ですがコマンドはこちら。

firebase deploy

ただ、こちらですね、このまま実行するとデプロイできるものはすべてしてしまいます。
パターン２の時にこのコマンドを実行するとwebsite_a,website_bいずれも更新されてしまいます。
片方だけ、デプロイしたい（例：website_aだけデプロイしたい）ときは

firebase deploy --hosing:weba

こういう風にターゲット名を指定することで、一部だけデプロイすることが可能になります。
ではつぎぃー

パターン３

複数のFirebaseのHosting内ウェブサイトに同一内容をデプロイするときの指定方法。

こちらで必要な情報は
・・・・あ、これターゲット指定しなくてもいいやつですわ。
これはですね、、、

firebase use

こちらのコマンドを打ちますと、Firebaseのどのプロジェクトに向いているのかがわかります。
それを確認してデプロイすりゃいいです。
FirebaseプロジェクトとFlutterプロジェクトの接続はひとつずつしかできないので、「ちゃんとそこは確認してデプロイできるよね」という圧を感じますね。
あ、ちなみにTarget指定した後にデプロイしようとすると
「こっちのターゲットデプロイできないぞ」って注意されます。
なので、ターゲットを指定した場合は、

firebase deploy --hosing:weba

こういう風に実行しましょう。
じゃ、次

パターン４

複数のFlutterプロジェクトを一つのFirebaseプロジェクトのHosting内にある別々のウェブページへデプロイするときのやつです。
ターゲット指定はFlutterプロジェクトごとに指定する必要があるので、コマンドを打つ場所に注意しましょう。
プロジェクトファイルのあるディレクトリ上で実行しないといけませんよ。
コマンドを打つ時のここ、、（たぶんこんなかんじ

PS C:\Users\userName\StudioProjects\flutter_project_x>

これで、どのプロジェクトのデプロイターゲットを指定しているかを認識させるので、こちらを間違えないように、、
で、ここからコマンドを打つとすれば、

PS C:\Users\userName\StudioProjects\flutter_project_x> firebase target:apply hosting fprojectx website_a

こんな感じかな？で、FlutterProjcet_Yからは、、

PS C:\Users\userName\StudioProjects\flutter_project_y> firebase target:apply hosting fprojecty website_b

こんな感じですかね。
あ、ちなみに「Flutterプロジェクトからひとつずつだからいらないじゃん」と思うかもしれませんが、「Hostingにある、ウェブサイトのどちらにデプロイするか」は記述しないと、初期に作成されるウェブサイトへ自動的にデプロイされるので、おそらくどちらか片方（初期に自動作成されるもの以外）は指定必須と思われます。
ちなみにデプロイのコマンドは
うーん、、これくらいかしら、、

firebase deploy

これだけで大丈夫なはず、、。。
あ、あとhostingの指定だけを説明しましたが、これ以外にもFirebaseのRealtimeDatabaseとCloudStrageの指定も実施することができます。
（わたし、無料枠でしかやっていなく、複数DBを持たせることができないので困ってない、、、）
こんな感じで、

一つのプロジェクト内に複数のウェブサイトや、複数のRealtimeDatabaseや、複数のCloudStrageを保有することができるので、
それらのどちらを見るのかというのを指定するのでしょう。

こんなかんじかな？
個人的にはこれくらいのメモで大体行けそうです。

ではでは。

この記事が気に入ったらサポートをしてみませんか？