Firebase with Windows

無料で認証やらデータベースやらが揃ったサイトが作れるが、放置したりまた弄りだしたり。 デザインこそ一から作らないとだが、そこさえどうにかすれば認証だのリアルタイムデータ表示だの、そういう楽しそうなサイトを作る受け皿を、目の前に準備してくれるというね。 デザインもプログラミングも中途半端な自分が、そういうので遊んでどうすんの、って気はしますけど、趣味だからしょうがない。

インストール

  1. Node.jsをここからダウンロードして、インストール

  2. （WindowsメニューのNode.jsではなく）Node.js command promptがあるので、開く

  3. インストールされているか確認 
    $ node --version
$ npm --version
  4. インストール 
    $ npm install -g firebase-tools
  5. Firebaseのコンソールより、プロジェクトを作成

カスタムドメイン設定

  1. プロジェクトを選んで開発→Hosting→ドメインを接続 Cloud Flare Hosting default
  2. ドメインの追加 Cloud Flare Hosting default
  3. DNSに指定された値をAレコードに追加 Cloud Flare Hosting dns setting
  4. 既存のサイトから移行する場合は、詳細設定で提示されるTXTレコードを追加1 Cloud Flare Hosting dns setting
  5. 設定待ち Cloud Flare Hosting dns setting
  6. DNS確認待ち? Cloud Flare Hosting dns setting
  7. 完了 Cloud Flare Hosting dns setting

CloudFlareを使っている場合

DNS onlyにしておくこと。 CloudFlareな記事も参照。
Cloud Flare Orange
DNS and HTTP proxy(CDN)（オレンジ色の雲アイコン）ではなく、
Cloud Flare Gray DNS only（グレーの雲アイコン）にするべし。
（説明画像は過去にTumblrの記事にて使っていたやつ）

作成

  1. Git Bashでloginしようとすると、エラーが出る 
    $ firebase login
Error: Cannot run login in non-interactive mode. See login:ci to generate a token for use in non-interactive environments.
  2. Git Bashでfirebase loginするを参照にする
    コマンドを実行するとGoogleさんから認証画面が出てくる
    認証後に Success! が出てくる 
    $ firebase login --interactive
? Allow Firebase to collect anonymous CLI usage and error reporting information
? Yes
Visit this URL on any device to log in:
（略）
Waiting for authentication...
+  Success! Logged in as my@mail.address

    Firebase CLI login success

  3. プロジェクトの確認 
    $ firebase list
┌─────────────┬───────────────────────┬─────────────┐
│ Name        │ Project ID / Instance │ Permissions │
├─────────────┼───────────────────────┼─────────────┤
│ projectname │ project-id            │ Owner       │
└─────────────┴───────────────────────┴─────────────┘
  4. 初期化 
    $ firebase init
  5. 作成先を聞かれたり
  6. 5択の中から上下キーで選び、まずSpaceキーで選択
  7. Hosting: Configure deploy Firebase Hosting sitesを選択

  8. Enterキーで決定

  9. publicフォルダを聞かれるので、そのままenter
  10. いろいろ作成されてる 
    firebase
 ├─ public
 |   ├─ 404.html 
 |   └─ index.html
 ├─ .firebaserc
 └─ firebase.json
  11. http://localhost:5000/で確認 
    $ firebase serve

  12. できた
    Firebase init site

  13. そのままアップしてみる 
    $ firebase deploy

とりあえず器だけはできた…
さっそく無駄に背景やらファビコンやらを仕掛け済み。 Firebase hosting setup complete

複数のプロジェクトを切り替える

  1. 開発環境と切り替えながら使う
  2. 開発用プロジェクトを作成
  3. 切り替えて使えるように設定を追加 
    $ firebase use --add
  4. 一覧が出るので、選択
  5. ショートカット的な名前に
  6. 元のプロジェクトも同じように–addで名前を付けておく
  7. 確認 
    $ firebase list
┌─────────────┬───────────────────────┬─────────────┐
│ Name        │ Project ID / Instance │ Permissions │
├─────────────┼───────────────────────┼─────────────┤
│ projectname │ project-id            │ Owner       │
├─────────────┼───────────────────────┼─────────────┤
│ subproject  │ sub-project-id        │ Owner       │
└─────────────┴───────────────────────┴─────────────┘
  8. 切り替えて使える 
    $ firebase use <付けておいた名前>
  9. そのあとに立ち上げたり、サーバへ放り込んだり

  1. クイックセットアップでうまくいかないときにも。 ↩

Leave a Comment