Firebase(Web編): Firebaseプロジェクトの作成

Firebase

はじめに


こんにちは。
今回は、Firebaseプロジェクトの作成手順のメモです。


ステップとしてはざっくり↓のような感じ。osはmacです。

  • Firebase consoleでFirebaseプロジェクトを作成
  • ローカルのセットアップ


Firebase consoleでFirebaseプロジェクトを作成

Firebase consoleにアクセスすると、↓のようなページが表示されます。
ここで、プロジェクトを追加をクリック。


すると、ウィンドウが現れプロジェクト名を設定します。ここでは、サンプルとしてFirebaseWebSapmleとします。チェックボックスをチェックし、プロジェクトを作成をクリック。


ローカルのセットアップ

Firebase console側の作業は終わったので、続いてローカルのセットアップです。↓の流れでやっていきます。

  1. CLI (Firebase command line interface) のインストール
  2. Googleアカウントにログイン
  3. 初期化
  4. リモートとローカルのプロジェクトを紐づける

必要なソフトのインストールにnpmが必要なので、ない人は入れてください。Node.jsのインストールは↓をご参考に！

https://morelia.tokyo/%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89/mac-nodejs-install/

1. CLI (Firebase command line interface) のインストール

ターミナルで↓コマンドを実行。

$ npm -g install firebase-tools

インストールできたか確認するため、バージョン確認。バージョンが返ってくれば成功です。

$ firebase --version
6.3.1


2. Googleアカウントにログイン

Googleアカウントとローカルのプロジェクトとを紐づけるために↓コマンドを実行します。

$ firebase login

成功しました。


3. 初期化

任意のディレクトリに移動して初期化します。今回は、FirebaseWebSampleという名前でディレクトリ作りました。

$ mkdir FirebaseWebSample
$ cd FirebaseWebSample
$ firebase init

↓のように聞かれますが、今回はHostingを選択。


     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/ユーザ名/FirebaseWebSapmle

? Which Firebase CLI features do you want to setup 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

すると↓のように聞かれますが、[create a new project]を選択。

=== Project Setup

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.

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


4. リモートとローカルのプロジェクトを紐づける

最後に、先ほどFirebase consoleで作成したプロジェクトFirebaseWebSampleとローカルを紐づけます。↓のコマンドを実行すると、Firebase consoleで作成したプロジェクトが表示されるので、それを選択します。

$ firebase use --add

もし作成したプロジェクトが表示されなければ、プロジェクトIDを指定して実行。プロジェクトIDは↓のように、プロジェクトの設定から確認できます。

$ firebase use --add プロジェクトID

最後に起動確認。

$ firebase serve

=== Serving from '/Users/ユーザ名/FirebaseWebSample'
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000

localhost:500にアクセスして↓画面が表示されれば成功！