Firebaseを使ってプロジェクトを作成

「Firebase」を使うことで、とても簡単に自分が作成したWebアプリをネット上に公開することができます。

”つくって遊ぼう！”で作成するWebアプリも基本的にはこの「Firebase」を使用して作成していきます。

使い方は、ドットインストールにとても簡潔に分かりやすく整理されていますので、そちらの動画を利用して使い方を覚えていきましょう。

Firebaseでウェブサイトを公開してみよう

ただし本note執筆時点では、該当コンテンツはプレミアム会員でしか閲覧できないので、簡単にだけ使い方を整理しておきます。
とはいえ、ドットインストールは学習コンテンツとしてとても優秀ですので、これを機にプレミアム会員になることをお勧めします。

手順の概要を先に説明すると

1. Firebaseのコンソールよりプロジェクトの立ち上げ
2. ローカルでWebアプリケーションの開発
3. firebaseにログイン
4. FirebaseプロジェクトとWebアプリケーションの連携
5. Firebaseへデプロイ

といった流れになります。

1. Firebaseのコンソールよりプロジェクトの立ち上げ

Firebaseにログインして、コンソールへ移動。画面に従ってプロジェクトを作成します。今回は「TestProject」というプロジェクト名で作成しました。

2. ローカルでWebアプリケーションの開発

Mac での開発を想定して説明しますが、Windowsでもほぼ同様の手順でできます。
まずはターミナル(最初からインストールされています)を起動し、次のコマンドを入力してください

$ cd
$ mkdir TestProject
$ cd TestProject
$ mkdir public

今回は「TestProject」という名前でプロジェクトを作成しています。上記コマンドで、TestProjectというディレクトリと、その中にpublicというディレクトリが作成されますので、publicの中にアプリケーションを作成していきます。

これらのディレクトリは、Macのユーザー名ディレクトリ上に作成されますので、お使いのエディタで開き、開発を進めていきましょう。

今回はデモですので、簡単に以下のコマンドでファイルを作成します

$ echo '<h1>Hello world</h1>' > public/index.html

3. firebaseにログイン

Firebaseを利用するには、firebaseコマンドが使える必要があります。以下の手順でfirebaseコマンドを使えるようにしていきましょう

まずはNode.jsをインストールします。

$ npm -v

と入力してバージョンが表示されればOKです。次に

$ sudo npm install -g firebase-tools

でfirebaseコマンドをインストールします。こちらも

$ firebase --version

でバージョンが表示されればOKです。そうしたら

$ firebase login

でfirebaseにログインしましょう。

4. FirebaseプロジェクトとWebアプリケーションの連携

まずはターミナルで以下のコマンドを入力します

$ firebase list

そうすると、以下のようなものが表示されるので、Project IDをコピーします

次に以下のコマンドを入力すると、ローカルのプロジェクトディレクトリとFirebaseのプロジェクトが連携されます

$ firebase init --project=[プロジェクトID]

アプリケーションによって使いたいサービスは様々ですが、今回はHostingだけスペースボタンでチェックし、Returnボタンを押します。以降の質問は特に何も入力せずReturnでOKです

5. Firebaseへデプロイ

以上で準備完了です。以下のコマンドでネットへの公開が完了します。

$ fireabase deploy

ファイルを編集した後も、上記コマンドを入力すれば、ネット上のファイルも更新されます。

上記コマンド入力時「Hosting URL: 」というhttps://から始まるURLが表示されますので、コピーしてブラウザで開いてみましょう。

このように、自分が作成したサイトが表示されていれば成功です。

以降、また別のWebアプリを作るためにfirebaseの使い方を整理しておくと

1. firebaseのコンソールでプロジェクトを作成
2. ローカル環境にプロジェクトディレクトリとpublicディレクトリを作成し、publicディレクトリ上にアプリを構築
3. $ firebase list でプロジェクトを表示し、IDをコピー
4. $ firebase init --project=[プロジェクトID]でfirebaseプロジェクトと連携
5. $ firebase deployでデプロイ

といった感じです。

ぜひ使い方をマスターして、色々なアプリケーションを作成していきましょう！

参考サイト:
- ドットインストール
- 【mac】firebaseインストールのすべて
- Firebase