なんとなくFirebaseを使ってみようと思い立った話
Firebase、名前だけは知っていたんですけど急に触ってみたくなったので触ってみました。
適当にやったことをメモしていきます。
ちなみに、前回の投稿から時間が空いているのは夏の暑さに負けていたからです……。
Node.jsを入れておく
Firebaseの管理にはコマンドラインツールを入れる必要があるんですけど、そのためにNode.jsが必要です。
私は偶然導入済みだったので今日は何もしていません。
昔何かしようとした痕跡を見ながら土日にしたことを書く - denimuの開発日誌
Firebaseのサイトにアクセスしてプロジェクトを作る
ちなみに、下記を見ながら作業。
Firebaseの始め方 - Qiita
プロジェクトを追加するを選んで名前を入力。
プロジェクトIDが自動でつけられますが、自分で編集もできます。
後から変更はできないそうなので自分でつけたほうがいいかもしれません。
Google アナリティクスは有効のまま次へ
Google アナリティクスの構成でアカウント作ってない人は作成。
私は既存のものをそのまま使いました。
プロジェクトを作成を押すとプロジェクトが作成されます。
しばらくすると準備ができましたと表示されるので次へ
プロジェクトのページが表示されます。
ホスティングを設定する
npmを使用してFirebaseのコマンドラインツールをインストール
インストールのコマンドはFirebaseに表示されます。親切。
依存関係の警告が出てきますが特に問題ないようです。
ubuntuでnpm install コマンドを実行すると npm WARN optional SKIPPING OPTIONAL DEPENDENCY npm WARN enoent SKIPP - フォーラム - N予備校
ログインしようとするとWindowsの場合、セキュリティの警告が出てきました。許可します。
初期化をする前にFirebaseのアプリ用のルートディレクトリに移動しておきます。
したみたいなのが出てくるのでHostingを選択。
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confi rm 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
ウェブアプリへの Firebase の追加
プロジェクトのページからウェブアプリへの Firebase の追加を選択
参考にしたページでは記載されていませんがこの時点でHostingの設定ができます。
FirebaseのSDKの追加でスクリプトが表示されるので、index.htmlに追加します。
CLIのインストールが表示されますがインストール済みなので飛ばします。
デプロイの手順が表示されます。
loginとinitは終わってるのでdeployです。
画面に表示されているURLでページが表示されます。
サンプルアプリケーションを動かす
ここまできて色々と参考にしているページとの差異に気づいて別ページを探す。
【第3回】サンプルアプリケーションを動かそう!【はじめてみよう Firebase】 | 株式会社トップゲート
(現時点ではこっちのページの第1回から順にやったほうがいい気がする。)
雰囲気はつかめたのでこの辺で終わりにしておく。
雑感
こんな簡単にWebアプリの動く環境が作れるのはいいですね。
そして、参考にするページはちゃんとメンテされているページをみないとダメというのが改めて実感しましたね……。
最終更新が2019年だけど2019年の編集は初め⇒始めの変換だけだったとか罠すぎる。