![Google Firebaseに入門してみた[0]](/images/firebase.png)
Google Firebaseに入門してみた[0]
糖質制限時の食材を調べるapp『carbdb』というAppを開発することにしました。で、令和になったことだし(便利だなこれw)今までと違う環境をためそうという事で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作っていく時の覚書をポストしたいと思います。
それでは。