まえがき
最近、ReactやRailsを学んでいると Firebase を目にしませんか？
Firebase とは、バックエンド機能提供サービスです。
私は、フロントエンド や グラフィック を専門に業務しているのですが、バックエンドへの理解を深めたいと思い、紐付け方法を忘却録として記録します。
Firebaseの設定(ブラウザ上)
Firebase で設定を行います。
プロジェクトの作成
任意のプロジェクト名を設定してください。
各種設定
プロジェクトの設定後、GogleAnalyticsの設定を行います。任意のアカウントを設定してプロジェクト作成を完了させてください。
ロケーションの設定
top画面から設定へ進み、ロケーションの設定を行ってください。
↓の画像で 未選択 になっている箇所です。
日本であれば asia-northeast1 を選択してください。
この設定は、作成後に編集できないので注意してください。
アプリの作成
先の設定画面から、画像の(Here)の部分をクリックしてください。
私は、webアプリケーションを作成したいのでこのマークを選択します。
クリック後、アプリ名と詳細の設定を行うので、任意の名前を入力してください。
この後、難しい内容の設定を行いますが、そのまま進めてください。
以上で、アプリの作成が完了されます。
データーベースの作成
FirebaseのTOPページから、データーベースの設定へお進みください。
データベースの作成から、設定を行ってください。
本番環境で設定してください。
課金制(Blaze/従量制)への設定
作成しただけでは、Sparkの設定になっています。
このままでは、デプロイ する際にエラーが発生してしまいます。
以前までは、これで問題なかったのですが(Blaze/従量制へ移行したため発生するそうです。
TOP画面で、従量制への変更が行えるので実行してください。
金額は、個人で使うのなら発生はしません。
(※場合より、金額が発生するかもしれません。個人で確かめてください)
以上で、ブラウザでの準備が完了しました。
Firebaseの設定(コマンド)
作業環境では、事前にローカル環境にFirebaseをダウンロードしています。
Firebaseのインストール
以下のコマンドを、実行環境のディレクトリで入力してください。
npm install --save firebase
Firebaseへのログイン
Firebaseを設定したいディレクトリに移動してください。
firebase login
ログインアカウントの変更がある場合は、↓のログアウトを行ってください。
firebase logout
Firebaseをinitする
init を行うことにより、Firebaseと接続することができます。
firebase init
Firebaseのinit後の操作
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. (Press <space> to select, <a> t
o toggle all, <i> to invert selection)
❯◯ 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
◯ Emulators: Set up local emulators for Firebase features
使用するサービスを選択してください。
実行プロジェクトの選択
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
ブラウザでの登録で プロジェクトを作成 しました。
そのプロジェクトを使うので、一番上を選択してください。
実行プロジェクトの実行
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.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: (Use arrow keys)
❯ 登録されたプロジェクト (登録されたプロジェクト)
❯ 登録されたプロジェクト (登録されたプロジェクト) で間違いなければ エンター を押してください。
Firebaseルール設定について
? What file should be used for Firestore Rules? firestore.rules
Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.
こだわりがなければ、エンターを押してください。
Firestoreインデックス設定について
? What file should be used for Firestore indexes? (firestore.indexes.json)
こだわりがなければ、エンターを押してください。
Cloud Functionsの記述設定
? What language would you like to use to write Cloud Functions? (Use arrow keys)
❯ JavaScript
TypeScript
JavaScript か TypeScript を選んでください。
Firestoreインデックス設定について
? What file should be used for Firestore indexes? (firestore.indexes.json)
こだわりがなければ、エンターを押してください。
ビルド先の生成フォルダ設定
? What do you want to use as your public directory? (public)
デフォルトは public ですが、変更をしたい際は入力してください。(例/build)
シングルページアプリケーションとして設定するか？
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
デフォルトは no です。もしも、シングルページアプリケーションで作成する際は y を押して エンター してください。
以上で完了しました。
Firebaseと紐付ける(init)
Firebaseと紐づけるために、initを行います。
firebase init
おまけ
ビルドをする
npm run build
デプロイする
firebase deploy
あとがき
以上が"Firebaseを紐づける方法"でした。
最近、Firebaseを使用する機会が増えたので理解を深めたいと思います。
ここまで、ご覧いただきありがとうございました。
参考リンク
日本一わかりやすいReact入門【実践編】#2...サクッと環境構築しよう
Cloud Firestore の課金について
本当に、ありがとうございました。
Myリンク
また、Twitter・Portfolio のリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。