【Node.js入門】FirebaseにNode.jsプロジェクトをホスティングする方法!

今回は、Node.jsで作られたプロジェクトをFirebaseにホスティングする方法について学習をしていきましょう!

「そもそもFirebaseって何?」
「Firebaseを使ってNode.jsプロジェクトをホスティングしたい」
「静的・動的なWebページをデプロイする方法を知りたい」

このような内容も含めて、本記事では以下のような構成で解説していきます!

【基礎】「Firebase」とは?
【基礎】「Firebase」の使い方
【実践】「Firebase」ホスティング
【実践】動的なNode.jsホスティング

この記事で、FIrebaseの使い方をしっかり学習してスキルアップを目指していきましょう!

「Firebase」とは?

「Firebase」は、Googleが提供するサーバー関連のバックエンドをクラウド上で管理することができるサービスです。

Firebaseを使うことで、サーバーの構築や管理を意識する必要がなくなりアプリケーションの開発に集中することができるので便利です。

Webサービスからスマホアプリまで幅広く利用可能で、ログイン認証やデータベースなどからホスティングやトラフィックの分析・解析まで多彩な機能が提供されているのが特徴です。

本記事では、ターミナルなどのコンソールからFirebaseを手軽に利用できるCLIツールを利用した活用方法について見ていきます!

「Firebase」の使い方

この章では、基本的なFirebaseの使い方について見ていきましょう!

主に、Firebaseプロジェクトの作り方からCLIツールの導入まで学んでいきます。

初めてのプロジェクトを作成する

それでは、まず最初にFirebaseの新規プロジェクトを作成するところから始めましょう!

以下のURLからFirebaseのダッシュボードにアクセスします。

<ダッシュボードURL>
https://console.firebase.google.com

新規プロジェクトを追加するため「+」アイコンをクリックします。

好きな「プロジェクト名」「日本」を選択して作成します。

プロジェクト画面が表示されたら準備は完了です。

まだ中身はありませんので、これからNode.jsプロジェクトを作成してホスティングしていきましょう!

firebase-toolsの導入方法

コンソールからFirebaseプロジェクトを管理するために専用のCLIツールをインストールしていきましょう!

npmから簡単にインストール可能です。

$ npm install -g firebase-tools

グローバル(-g)にインストールすることでfirebaseコマンドが利用できるようになります。

次に先ほど作成したFirebaseプロジェクトと連携するためにloginコマンドを実行します。

$ firebase login

URLが表示されるのでブラウザからアクセスして、自分のGoogleアカウントを選択して認証します。

これだけでFirebaseプロジェクトと自動的に連携ができるようになります。

あとは、適当なディレクトリを作成して作業用のフォルダ内に入っておきましょう。

$ mkdir myapp
$ cd myapp

Firebaseプロジェクトの初期設定

それではFirebaseプロジェクトの中身を作成していきましょう!

まずはすべて自動的に初期設定を行ってくれるinitコマンドを実行します。

$ firebase init

このコマンドを実行すると対話形式で設定を行えるようになります。

最初にFirebaseのどの機能を利用するかを聞かれます。

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.

○Database
○Firestore
○Functions
●Hosting
○Storage

今回はひとまずホスティングを試したいので「Hosting」だけを選択してエンターキーを押します。

Firebaseに作成したプロジェクトの一覧が表示されるので、先ほど作成したものを選択します。

? Select a default Firebase project for this directory

もし、作成したものが表示されていない場合はひとまず「create a new project」を選択してあとで次のコマンドからプロジェクトを選択してみてください。

$ firebase use --add

次に、ホスティングする時の公開用フォルダを設定するのですが、一般的にはそのまま何もせずにエンターキーを押します。

? What do you want to use as your public directory?

すると、デフォルトで「public」が選択されます。

最後にSPAの設定を聞かれますが、これもそのままエンターキーを押しましょう。

? Configure as a single-page app (rewrite all urls to /index.html)?

するとデフォルトで「No」が選択されます。

これで初期設定は完了です!

Firebaseホスティングの使い方

この章では、Firebaseのホスティング機能の使い方について見ていきましょう!

主に、Firebaseのローカルサーバーの起動方法とデプロイ方法について学んでいきます。

Firebaseのローカルサーバーを起動する方法

前章でFirebaseの初期設定が完了していれば、現在のディレクトリに次のようなファイルの構成が作られているはずです。

firebasejson
public
    - 404.html
    - index.html

このプロジェクトをブラウザで開くと、publicフォルダ内にあるindex.htmlが表示されるわけです。

そこで、Firebaseへホスティングする前にローカルサーバーを起動してどのような表示になるかを確認してみましょう!

サーバーの起動はserveコマンドを実行します。

$ firebase serve

デフォルトではhttp://localhost:5000にブラウザでアクセスすると次のような画面が表示されます!

サーバーを終了するには「Ctrl + c」を押しましょう。

deployコマンドによるNode.jsのホスティング

それでは、いよいよFirebaseのホスティング機能を使ってみましょう!

と言っても、ここまでの作業を完了していればやることは簡単です。

次のdeployコマンドを実行するだけです!

$ firebase deploy

これで「https://プロジェクト名.firebaseapp.com」のURLからブラウザでアクセスできるようになります。

また、Firebaseのプロジェクト画面にあるHostingメニューを見ると、しっかりとデプロイが実行されてファイルがアップロードされているのが分かります。

動的なNode.jsプログラムのデプロイ

この章では、動的なNode.jsプロジェクトをFirebaseで動かす方法について見ていきましょう!

主に、プロジェクトの初期設定から具体的な作成方法について学んでいきます。

動的プロジェクトの初期設定

まずは前章と同じように初期設定から始めていきましょう。

初期設定はinitコマンドを実行することで開始できます。

$ firebase init

Firebaseのどの機能を使うか聞かれるので、今回は「Functions」「Hosting」の2つを選択します。

○Database
○Firestore
●Functions
●Hosting
○Storage

この「Functions」というのが動的なNode.jsを実行できる機能となります。

次に、利用する言語を聞かれるので「JavaScript」を選択します。

? What language would you like to use to write Cloud Functions?
JavaScript
TypeScript

ESLintを利用するかどうかを聞かれますが、今回は使わないのでそのままエンターキーを押して「No」にしておきます。

? Do you want to use ESLint to catch probable bugs and enforce style?

関連するNodeモジュールをインストールするか聞かれるので「Yes」を選びます。

? Do you want to install dependencies with npm now?

公開用のフォルダ設定を聞かれますが、そのままエンターキーを押します。

? What do you want to use as your public directory?

すると、デフォルトで「public」が選択されます。

最後にSPAの設定を聞かれますが、これもそのままエンターキーを押しましょう。

? Configure as a single-page app (rewrite all urls to /index.html)?

これで準備は完了です!

(※上書き(overwrite)するかを聞かれた場合はすべてNoで構いません)

Functionsを利用したNode.jsプロジェクトの作成

初期設定が完了したら、現在のディレクトリ構成を見ておきましょう!

firebasejson
public
    - 404.html
    - index.html
functions
    - index.js
    - node_modules
    - package-lock.json
    - package.json

新しくfunctionsディレクトリが作成されており、その中にいくつかファイルが用意されているのが分かります。

そこで、「index.js」ファイルの中身を次のように編集してみましょう!

const functions = require('firebase-functions');

exports.helloWorld = functions.https.onRequest((request, response) => {
    response.send("Hello from Firebase!");
});

すでにデフォルトでコメントアウトされているので、コメントを解除するだけで上記のプログラムになるはずです。

この状態でサーバーを起動してみましょう!

$ firebase serve

ブラウザから「http://localhost:5001/プロジェクト名/us-central1/helloWorld」にアクセスするとNode.jsのプログラムが実行できます。
(※「us-central1」の部分は環境によって変わります)

今回の例だと画面に「Hello from Firebase!」と表示されます

もちろん、ホスティング機能を使ってこのプロジェクトをデプロイすることも可能です。

$ firebase deploy

あとは、index.jsのファイルを編集することで好きなモジュールを追加したり、外部APIを読み込んだりして動的なNode.jsプロジェクトを作成することができるわけです。

まとめ

今回は、Node.jsプロジェクトをFirebaseにホスティングする方法について学習しました!

最後に、もう一度ポイントをおさらいしておきましょう!

・firebase-toosを導入することでコンソールからプロジェクトを管理できる
・Hosting機能を使うと静的なWebコンテンツをホスティングできる
・Functions機能を使うと動的なNode.jsプロジェクトを扱える

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

「プログラミング、右も左もわからない…」という方にオススメ

cta_under_bnr

当プログラミングスクール「侍エンジニア」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニアは上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

詳細はこちら

書いた人

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー