t4traw.net

Google Firebaseに入門してみた[0]

Google Firebaseに入門してみた[0]

糖質制限時の食材を調べるapp『carbdb』というAppを開発することにしました。で、令和になったことだし（便利だなこれｗ）今までと違う環境をためそうという事でGoogleのFirebaseに入門してみる事にしました。

ひとまず今回はHello world的なのをCIでデプロイするまで

この記事でやっていること

  • FirebaseコンソールでApp作成
  • ターミナルでfirebaseのcliツールのインストール
  • デプロイ
  • CircleCIでの自動デプロイ

ここで書いていないこと

  • Firebase自体に関しての詳しい情報
  • Github, Firebase, CircleCIの詳しい使い方など
  • Javascriptについてのことなど

とりあえず FirebaseでAppを作成

Firebaseのサイトに行き、アプリケーションの作成をします。

地域を日本にし、Cloud Firestoreはasia-northeast1で良いかな？で、プロジェクトを作成。

無事できたっぽいです。

cliツールのインストール

ターミナルに移動し、firebase-toolsをインストールします。

$ npm install firebase-tools

インストールしたら、PATHの確認も含めてfirebase --versionでバージョンを確認しておきましょう。記事を書いている時点で6.9.0でした。

そしたら次はログインです。

$ firebase login

? Allow Firebase to collect anonymous CLI usage and error reporting information? No

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=（以下略）

Waiting for authentication...

ブラウザが開くので、ログインして権限をあげます。

ターミナルに

✔  Success! Logged in as YOUR_MAIL@example.com

と表示されてたら成功です。

アプリケーション作成

とりあえず最初のinitをします。

$ firebase init

すると、「どれ使う予定？」みたいな質問をされるので、必要なものをSpaceで選択し、Enterでinitします。

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features
, then Enter to confirm your choices.
❯◯ 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

そしたらプロジェクトを選択する画面になりますので、さきほど作成したアプリケーションを選択します。

? Select a default Firebase project for this directory:
  [don't setup a default project]
❯ carbdbapp (carbdb)
  [create a new project]

その後いろいろ聞かれるので、プロジェクトにあった内容を答えましょう。といっても今回は入門なので、基本はデフォルト=Enterとyesで大丈夫です。

✔  Firebase initialization complete!

と表示されたら成功です。

とりあえず起動してみる

initが終わったので、とりあえずサーバーをたてて確認してみます。

$ firebase serve

こんな感じの画面が表示されたら成功です。

デプロイしてみる

とりあえずデプロイしてみます。

$ firebase deploy

=== Deploying to 'carbdbapp'...

i  deploying database, storage, firestore, functions, hosting
Running command: npm --prefix "$RESOURCE_DIR" run lint

> functions@ lint /Users/t4traw/.ghq/github.com/t4traw/carbdb/functions
> eslint .

✔  functions: Finished running predeploy script.
i  database: checking rules syntax...
✔  database: rules syntax for database carbdbapp is valid
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
i  firestore: reading indexes from firestore.indexes.json...
✔  firestore: rules file firestore.rules compiled successfully
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...

Error: HTTP Error: 400, Project 'carbdbapp' is not a Cloud Firestore enabled project.

ん？おこられましたね。「not a Cloud Firestore enabled project.」と言われているので、Firebaseのコンソールに移動し、メニューの中のDatabaseに行きます。

とりあえずテストモードでデータベースを有効にしてみます。

機能が増えているとまた同じエラーが発生すると思うので、「有効になってないよ？」というエラーが出たら、コンソールから有効化してください。

もう一度deployコマンドを実行してみると、

✔  Deploy complete!

Please note that it can take up to 30 seconds for your updated functions to propagate.
Project Console: https://console.firebase.google.com/project/carbdbapp/overview
Hosting URL: https://carbdbapp.firebaseapp.com

今回はうまくいったようです。表示されているurlにアクセスすると、さきほどのindex.htmlが表示されています。

CirecleCIで自動的にデプロイできるようにしておく

手動でデプロイとか面倒すぎるので、GitHubのmasterにcommitがあったら自動ビルド＆デプロイするようにしておきます。

CIでデプロイする用のTOKENを取得する必要があるので、まずはそれを取得します。

$ firebase login:ci

すると、ブラウザが起動してログイン画面が表示されるので、許可してあげます。

ターミナルに戻るとトークンが表示されていました。

Waiting for authentication...

✔  Success! Use this token to login on a CI server:

※ここにデプロイ用のトークンが表示されています

Example: firebase deploy --token "$FIREBASE_TOKEN"

表示されているトークンをCircleCIの環境変数に設定します。

そしたらpackage.jsonのscriptsの中に、

  "scripts": {
    "deploy": "npx firebase deploy --only hosting --token \"$FIREBASE_TOKEN\""
  },

といった感じでdeployコマンドを書き足し、.circleci/config.ymlを

version: 2.0

jobs:
  deploy:
    docker:
      - image: /images/circleci/node:11.14
    steps:
      - checkout
      - run:
          name: install dependencies
          command: npm i
      - run:
          name: deploy to Firebase Hosting
          command: npm run deploy

workflows:
  version: 2
  deploy:
    jobs:
      - deploy:
          filters:
            branches:
              only: master

こんな感じで作成します。

で、pushしてみると、

無事deployできたみたいです。

わからなかったこと

ひとまず自動deployまで行けました。あとはAppをガシガシ書いていく感じになります。

わからない事がいくつかあって、cliというかCircleCIでデプロイするとき、--only hostingというオプションをつけているのでうすが、デプロイする項目は、

  • Database
  • Firestore
  • Functions
  • Hosting
  • Storage

の5項目あるはず。hostingだけでいいのかなぁと。

というのも、CircleCIで単純にnpm i firebase-toolsしてfirebase deployしようとすると、eslintでエラーになる。「ん？」と思ってちょっとググったらhostingだけdeployしていたんですよね。

でもよくよく考えたら、databaseに関する3つはNoSQLやKVSだからガシガシmigrationファイルをかく必要もなく、functionを頻繁に書くならそれもdeployに追加すれば良いのか。

というわけで、Firebase入門の第1歩でした。またApp作っていく時の覚書をポストしたいと思います。

それでは。