メインコンテンツまでスキップ

Firebase

Webアプリを公開する​

Firebaseを使って自分の作ったWebアプリを公開する（つまりURLリンクをつける）方法

(ここではReactを使ったWebアプリを想定しています)

  1. こちらにアクセスして「使ってみる」をクリック

    top page

  2. 「Firebaseプロジェクトを使ってみる」をクリック

    try

  3. project名を決め、Google Cloud組織にnae-lab.orgを指定して「続行」をクリック

    project name

  4. 必要なければGoogleアナリティクスは有効にせずに「プロジェクトを作成」をクリック

    make project

  5. リダイレクト先のページで「ウェブ」をクリック

    account page

  6. アプリのニックネームを決めて「アプリを登録」をクリック

    nickname

  7. ターミナルアプリでプロジェクトのルートディレクトリに移動する(以降は全てこの場所でのコマンド操作)

  8. 以下を順に実行

    npm install firebase
    sudo npm install -g firebase-tools
    firebase login

    • 以下のように聞かれるがどっちでも良い（僕はYesにしました）

      i Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you. ? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?(Y/n)

    yarn build
    firebase init

    • 色々選択肢が出るが、「Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys」だけを選択して次へ

    • 「Use an existing project 」を選択して次へ

    • 以下のようなものが出るので該当するものを選択して次へ

      ? Select a default Firebase project for this directory:

      naelab-opendialoguechatbot (naelab-opendialogue-chatbot)

    • 「? What do you want to use as your public directory?」と聞かれるので「dist」と入力

    • 「? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)」と聞かれる

      • Webページの情報の更新の仕方を聞かれている
      • Reactの場合はYesにする

    • 「? Set up automatic builds and deploys with GitHub? (y/N)」と聞かれるのでNoと答える

    • 「? File dist/index.html already exists. Overwrite? (y/N)」と聞かれるので絶対にNoと答える！！！

      • そうしないとせっかくdistにあるプロジェクトのindex.htmlが書き換えられてしまう（らしい）
      • Reactに必要なが消えてしまうので注意
    firebase deploy

補足：ソースコードの変更を反映させるにはもう一度yarn buildしてからfirebase deployすれば良いらしいです

参考：https://zenn.dev/conecone/articles/058755b87fec41

Google Cloudのnae-lab.orgに参加する（必須ではない）​

  • firebaseを使うために必須ではないが，作ったプロジェクトは先ほど設定した通り，nae-lab.orgという組織（organization）の下に配置されます。
  • nae-lab.orgの組織に関する権限が必要になったときは，矢作に連絡してください

有料プランを使う​

  • Storageなど，有料にしないと使えない機能があります。有効にするときは，下記の手順で有料に設定します。
  • Google Cloudの課金について詳しくはソフトウェアページに書いてあります
  1. 苗村先生の許可を得る（通常のpurchaseと同じ）
    • 予算執行の許可を得ることになりますから，物品購入についてと同様の内容（金額，期間，予算，など）を伝えた上で相談しましょう。
  2. Firebaseのコンソールから，プラン変更の設定をする。中山予算で良い場合は請求先アカウントを「24JP023761-TKJ」にする。他の予算の場合は要相談（金額に応じて，別の請求先アカウントをクラウドエースにお願いして開いてもらうか，立替払いで済ませるかを検討する）
    • 「24JP023761-TKJ」の変更操作をできるのは矢作だけなので，頼んで繋げてもらう．