こんにちは、Jeannieです。
私は趣味でVue.jsを使ったWebアプリケーションの作成に取り組んでいますが、認証機能やデータ操作など、Webアプリケーションに必要な機能をお手軽なサービスとして提供してくれるFirebaseは非常に便利です。
Vue.jsとの親和性も高く、手軽に本格的なVue.jsのWebアプリケーションを作成できます。
本記事では、そんなFirebaseを利用するためのプロジェクト作成手順をまとめました。
前提
Firebaseを利用したWebアプリケーションを作る場合、さまざまな情報をデータベースに保存することがほとんどだと思います。
なので、Firestoreのデータベース機能である「Cloud Firestore」まで作成することを前提とします。
Firebaseプロジェクトを作る
手順① Firebaseのサイトにアクセス
まずは、Firebaseのサイトにアクセスします。
▼ Firebaseサイト
https://firebase.google.com/
手順② 「コンソールへ移動」をクリック
サイトにアクセスしたら、画面右上の「コンソールへ移動」をクリックします。
※ログインしていない場合は、Googleアカウントでログインしてください。
手順③ 「プロジェクトを追加」をクリック
コンソールへ移動できたら、「プロジェクトを追加」をクリックして、プロジェクトの作成を開始します。
手順④ プロジェクト名をつける
プロジェクト名を適当に入力して「続行」をクリックします。
手順⑤ 「続行」をクリック
ここの画面は特に何もせず、「続行」をクリックします。
※Googleアナリティクスを有効にしておくことで、様々な分析ができますのでチェックはつけておいた方が良いです。
手順⑥ Googleアナリティクスアカウントを選択
前の手順でGoogleアナリティクスを有効にしていますので、Googleアナリティクスアカウントを選択して「プロジェクトを作成」をクリックします。
※アカウントがない場合は作成する必要があります。
手順⑦ プロジェクトの作成完了
しばらく待つとプロジェクトの作成が完了します。
この画面になったらそのまま「続行」をクリックします。
Cloud Firestoreを作る
手順① データベースの作成を開始
コンソール画面左側の「Cloud Firestore」から「データベースの作成」をクリックします。
手順② モードを選択
ここでは、データベースのモードを選択します。
本番環境モードとテストモードが選択可能ですが、セキュリティの観点から本番環境モードを選択して「次へ」をクリックします。
※テストモードでも良いですが、アクセス可能な範囲が広がるので少しリスクが高くなります。
手順③ ロケーションを選択
データベースのロケーション(配置する場所)を選択します。
日本に配置したいことがほとんどだと思いますので、基本的には「asia-northeast1」を選択して「有効にする」をクリックします。
asia-northeast1が東京、asia-northeast2が関西とのことです。
アクセスする見込みユーザがどこに住んでいるかによって決めればOKです。
※ただし、ここは一度決めると変更できませんので慎重に決めるようにしましょう。
手順④ データベースの作成完了
以下のような画面が表示されれば、データベースの作成が完了です。
まとめ
これでFirebaseの基本的な機能を利用するためのプロジェクト作成が完了しました。
このように、ブラウザ上からポチポチ操作していくだけで簡単にFirestoreプロジェクトが作成できます。
Webアプリケーションを作っていく際は、今回作ったFirebaseプロジェクトとWebアプリケーションを連携することで、アプリケーション ⇔ Firebase のやり取りを行っていきます。
この辺りはまた別の記事でご紹介していく予定です。
コメント