firebaseを始めよう

掲載日：2019/07/07

概要

firebaseの導入についてまとめました。
このページではfirebaseへの登録方法について紹介します。
以降では、windows環境での例を紹介します。
コマンドプロンプトを使用しますが、PowerShellでもかまいません。

1. firebaseとは

firebaseは「Googleが提供しているWebアプリケーションのバックエンドサービス」です。
firebaseがデータベースや認証などのバックエンドの処理を提供してくれるので、
Webアプリケーション作成時に内容やデザインに集中することができます。

2. Node.jsのインストール

「いや、俺はfirebaseをインストールしたいんだ！」
その気持ちはいったん抑えて、Node.jsをインストールしましょう。
これは、Firebaseの各種コマンドを実行する際に必要となります。
コマンドプロンプトを開いて

npm

と入力して、Node.jsのパスが出てくればNode.jsはインストール済です。
そうでない場合は、下記のサイトからインストールしてください。

インストールの際に特に特別な選択は必要ないはずです。
ちなみに、OSは、各自のPCに合ったものを選んでください。
OSのbitの確認方法は、Windowsマークを右クリック->システムです。

3. Googleアカウントの作成

「一体、いつになったらfirebaseを始められるんだ？」
その気持ちはもう少し抑えて、Googleアカウントを作ります。
これは、現在のfirebaseがGoogleから提供されているためです。
既にアカウントをお持ちの方は、それを使っても良いと思います。

無い方は、下記のサイトからアカウントの作成を行ってください。

4. Firebaseのインストール

ようやくFirebaseのインストールです。

4-1. サイトへアクセス

下記サイトにアクセスすると、Firebaseのwelcomeサイトにつながるので、
プロジェクトを追加を選択してください。

4-2. 必要項目の入力

色々入力する画面がでてくるので、とりあえず下記を入力し、プロジェクトを作成してください。
プロジェクト名：任意のプロジェクト名
アナリティクスの地域：日本
下の方のチェックボタン：確認してチェック

4-3. ホスティング

前項までが無事に完了していればプロジェクトが作成できているので、
FirebaseツールをPCにインストールします。
このことをホスティング(Hosting)と言います。
右側に出てくるメニューから開発->Hostingを選んでください。
設定を進めていくと

npm install -g firebase-tools

というコマンドが出てきます。
これがでてきたら、コマンドプロンプトを開いてこのコマンドを実行してください。
インストールが開始されます。

環境によっては少し時間がかかりますが、最後にfirebaseのバージョンがでてくればインストール完了です。
ネットの状況によっては失敗することもありますが、
その場合は、時間をおいてもう一度4-3.を繰り返してみてください。

ちなみに、npmコマンドが認識されない場合には、2.のNode.jsをインストールしてください。

4-4. Login設定

作成したプロジェクト用の作業フォルダを作成します。
適当な場所にフォルダを作成し、その場所でコマンドプロンプトを立ち上げてください。
この時、作業フォルダ名は、プロジェクト名と同じにしない方が良いです。
理由はあとでわかります。
作成したフォルダ内で、Shiftを押しながら右クリックすると、その場所でコマンドプロンプトを立ち上げることができます。

その状態で

firebase login

を実行してください。
英語で何か聞かれます。
意味は「匿名の情報収集をしていいか？」ということです。
良ければ、"y"を。良くなければ"n"を入力してください。

すると、ブラウザにアカウント選択画面が表示されます。
ユーザーを選択したのち、確認文を読んで、許可を押してください。

すると、コマンドプロンプトにSuccess!的な文がでてきて設定完了です。
3. が終わっていないと、ユーザーが出てこないので、気を付けてください。

4-5. 初期設定

4-4. が終わったままの状態で、引き続き、コマンドプロンプトで設定を行っていきます。

firebase init

と入力してください。
続行していいか聞かれるので、"y"と答えたのち、機能についての選択肢が出てきます。
とりあえずは、"Hosting"と書かれている行の横までカーソルを移動させ、スペースキーで選択して実行してください。

次に、連携するプロジェクトを聞かれるので、4-2. で作成したプロジェクトを選びます。

次にデプロイ対象のフォルダを聞かれるので、任意の名前の入力します。
ここでプロジェクト名と同じ名前を入力しておくとわかりやすいと思います。

最後に、アクセスをindex.html経由にするかどうかと聞かれるので、"y"か"n"で答えます。
色々試す場合には、"n"にしておいた方がわかりやすいと思います。

5. デプロイ

最後に、作ったプロジェクトをデプロイする方法を紹介します。
先ほどもすこしでてきた"デプロイ"という言葉。
これは、「使えるようにする」みたいな感じで考えておいてください。

4-5. で行った初期設定時に、welcomeページが作成されていますので、
デプロイコマンドを実行するだけでデプロイすることができます。

4-5. のコマンドプロンプトの続きに

firebase deploy

と入力してください。

今までの設定がうまくいっていれば、Complete!と表示されます。

この時表示される"Hosting URL"にアクセスすればwelcomeページを表示することができます。
スマフォで見ても表示されると思うので、確認してみてください。