Firebase with Windows

無料で認証やらデータベースやらが揃ったサイトが作れる。 デザインこそ一から作らないとだが、そこさえどうにかすれば認証だのリアルタイムデータ表示だの、そういう楽しそうなサイトを作る受け皿を、目の前に準備してくれるというね。

Firebase価格表

インストール

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

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

  3. インストールされているか確認 
    $ node --version
$ npm --version
  4. インストール 
    $ npm install -g firebase-tools

ただし、以降は個人的な趣味によりGit Bashで作業。

プロジェクト

作成とか

Firebaseのコンソールより、プロジェクトを作成 Firebase Console

既にインストール済みですね Firebase Console Deploy

ログイン

ホスティング設定 Firebase Console Deploy

怒られた

$ firebase login

Error: Cannot run login in non-interactive mode. See login:ci to generate a token for use in non-interactive environments.

ヘルプを見てみる

$ firebase --help
Usage: firebase [options] [command]

Options:
  -V, --version                              output the version number
  -P, --project <alias_or_project_id>        the Firebase project to use for this command
  -j, --json                                 output JSON instead of text, also triggers non-interactive mode
  --token <token>                            supply an auth token for this command
  --non-interactive                          error out of the command instead of waiting for prompts
  --interactive                              force interactive shell treatment even when not detected
  --debug                                    print verbose debug output and keep a debug log file
  -h, --help                                 output usage information

Commands:
（略）
  login [options]                            log the CLI into Firebase
  login:ci [options]                         generate an access token for use in non-interactive environments
（略）

login:ciのヘルプも見てみる

$ firebase login:ci --help
Usage: login:ci [options]

generate an access token for use in non-interactive environments

Options:
  --no-localhost  copy and paste a code instead of starting a local server for authentication
  -h, --help      output usage information

こういうことか

$ firebase --interactive login:ci

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=（略）.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=5（略）&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication...

Googleさんが権限を要求してきた Firebase Hosting Domain

許可した

+  Success! Use this token to login on a CI server:
（略）
Example: firebase deploy --token "$FIREBASE_TOKEN"

確認

Git Bashで作業している場合、メニュー→Options→Text→LocaleとCharacter setを確認して、ja_JPとUTF-8になっているか確認しないとリストの枠線が「笏€笏€笏€」だらけになる

$ firebase list
┌─────────────┬───────────────────────┬─────────────┐
│ Name        │ Project ID / Instance │ Permissions │
├─────────────┼───────────────────────┼─────────────┤
│ projectname │ project-id            │ Owner       │
└─────────────┴───────────────────────┴─────────────┘

開始

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  （今いるディレクトリ）

? Are you ready to proceed? (Y/n)

作業を進めてみる

? Are you ready to proceed? (Y/n) y
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select)
>( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
 ( ) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules

Hosting: Configure deploy Firebase Hosting sitesを選択
…したいのだが、Git Bashだと矢印キーで選択できない
Git Bashでfirebase loginするを参照し、4を選択

=== Project SetupHosting sites

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project.

? Select a default Firebase project for this directory: (Use arrow keys)
> [don't setup a default project]
  （ブロジェクトがずらずらと）
  [create a new project]

さっきの要領で数字で選択
あとはディレクトリ名指定やトップページを上書きするかとか

? Select a default Firebase project for this directory: (Use arrow keys)
? Select a default Firebase project for this directory: プロジェクトID (プロジェクト名)
i  Using project プロジェクトID (プロジェクト名)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public) ディレクトリ名指定
? What do you want to use as your public directory?  ディレクトリ名
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
+  Wrote ディレクトリ名/index.html

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

+  Firebase initialization complete!

いろいろ作成されてる

firebase
 ├─ ディレクトリ名
 |   ├─ 404.html 
 |   └─ index.html
 ├─ .firebaserc
 └─ firebase.json

管理

切り替える

$ firebase use プロジェクトID
Now using project プロジェクトID

プロジェクトIDに対して名前をつける（プロジェクト名ではない）

$ firebase use --add プロジェクトID --alias 付けたい名前
Created alias 付けたい名前 for プロジェクトID.
Now using alias 元の名前 (プロジェクトID)

すると、プロジェクトIDではなく付けた名前で切り替えができる

$ firebase use 名前
Now using alias 名前 (プロジェクトID)

名前を全部消す

$ firebase use --clear
Cleared active project.

Project aliases for ディレクトリ:

  default (現在のプロジェクトID)

Run firebase use --add to define a new project alias.

見たい

ローカルで確認

$ firebase serve

=== Serving from 'ディレクトリ名'...

i  hosting: Serving hosting files from: プロジェクト名
+  hosting: Local server: http://localhost:5000

こういう風になってた Firebase init site

外から見えるように

deployしてみる

$ firebase deploy

=== Deploying to 'プロジェクトID'...

i  deploying hosting
i  hosting[プロジェクトID]: beginning deploy...
i  hosting[プロジェクトID]: found 1 files in プロジェクト名
i  hosting: uploading new files [0/1] (0%)
i  hosting: uploading new files [0/1] (0%)
+  hosting[プロジェクトID]: file upload complete
i  hosting[プロジェクトID]: finalizing version...
+  hosting[プロジェクトID]: version finalized
i  hosting[プロジェクトID]: releasing new version...
+  hosting[プロジェクトID]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/プロジェクトID/overview
Hosting URL: https://プロジェクトID.firebaseapp.com

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

カスタムドメイン設定

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

CloudFlareを使っている場合

認識されるまではDNS onlyにしておくこと。
認識されたあとはFullかFull(Strict)にしないと、無限リダイレクトループに。
CloudFlareな記事も参照。

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

コメントする

メールアドレスが公開されることはありません。次の印のある項目は必ず入力してください : *

Markdown を使用できます