FirebaseでWebアプリをデプロイする方法

こんにちはYoheiKoです。今日はGoogleが開発・運営するFirebase上で、Webアプリ又はWebサイトをデプロイする方法をご紹介します。FirebaseはGoogle Cloud project上で動くWebサーバ(大部分が無料)で、リアルタイムデータベース(Could FireStore)、認証機能(Firebase Authentication)、決済機能(Stripe)等のFirebaseアプリも備えていて非常に便利です。Firebaseのようなサービスは、BaaS(Backend-as-a-Service)と呼ばれることもあります。

FirebaseはもともとGoogleとは資本関係のないFirebase Inc.という会社が2011年に開発したものでしたが、2014年にGoogleが同社を買収してGoogleのサービスとなりました。

以下、HTM、CSS、JS、その他フロントエンドのJS付属パッケージ一式(React.js、Material UI、Chart.jsなど)で構成されるプロジェクトが、ローカルでは既に完成しているとして、具体的なデプロイの方法解説します(今回はFirebaseアプリは使いませんが、使う場合もデプロイの過程は同じです)。

↓応援クリックよろしくお願いします↓

にほんブログ村 IT技術ブログ プログラム・プログラマーへ

必要な環境又は事前準備

  • Node.js(npmコマンドを使うため)
  • デプロイするWebサイト又はWebアプリがローカルで完成済み

Firebaseのサイト上での初期設定

まずはFirebase上での設定を行います。gmailアカウントを作成し、Firebaseのホームページにアクセス、続いて、中央の「Get started」ではなく、右上の「Go to console」をクリックします。



gmailでのログインを求められるので、ログインします。


次に、プロジェクトの名称を半角英数字で入力し、下段の「続行」をクリックします。




次の画面もそのまま「続行」をクリックします。Webアプリやサイトの解析に欠かせないGoogleアナリティクスは、有効のままいきましょう。




Firebase側の最後の設定です。Googleアナリティクスのアカウントがある人は、同アカウントを選択し、持ってない人はここでアカウントを作った後、右下の「プロジェクトを作成」をクリックします。



「プロジェクトを作成」をクリックの後、プロジェクト作成中の画面に遷移しますがそのまま放っておいて、ローカルPC(プロジェクト)のターミナルに戻ります。Webサイト又はWebアプリをデプロイするだけであれば、プロジェクト作成が完了後にウィンドウを閉じても問題ありません。
他方Firebaseのユーザー認証やデータベース機能をWebアプリに実装する場合には、この段階ですぐにデプロイすることはないと思いますので、後述「Firebaseプロジェクト内でのアプリの登録方法」に進んでください。




Firebaseにおけるプロジェクトとは

Firebaseにおけるプロジェクトはアプリの上位概念で、具体的なアプリはプロジェクトの内側に作成(登録)します。デプロイするだけならアプリの登録は不要ですが、前述のFirebase内のデータベース(Could FireStore)、認証機能(Firebase Authentication)等を使用するにはプロジェクトを作成するだけではなく、アプリの登録を要します。この両者の関係はややわかりにくいのですが、Firebaseでのプロジェクト作成はGoogle Cloud Project上で場所を確保しているだけであり、Firebaseに固有の機能を使うには別途Firebase上での設定を要すると考えるとわかりやすいかもしれません(下記、イメージ図)。Firebaseでのアプリの登録方法は一番最後にご紹介します。

A Firebase project is the top-level entity for Firebase. In a project, you create Firebase apps by registering your iOS, Android, or web apps. After you register your apps with Firebase, you can add the Firebase SDKs for any number of Firebase products, like Analytics, Cloud Firestore, Performance Monitoring, or Remote Config.

Firebase公式ドキュメント:Firebase >Docs > Guides

ローカルPC側の初期設定

Firebaseのサイト上でプロジェクトの設定を終えたら、ローカル環境において、FirebaseのCLI(コマンドラインインターフェイス)をグローバルにインストールします(”-g”の部分がグローバルへのインストールを意味します)。ターミナルを立ち上げ、次の2行を実行します。1行目は”-g”なしでアプリを立ち上げる都度インストール、2行目はグローバルにインストールします。

npm install firebase
npm install -g firebase-tools

続いて、ターミナルからFirebaseにログインします(2回目以降の更新の場合はここから始めます)。

firebase login



次のような画面がブラウザに立上がればログイン成功です(ログイン済みの場合は表示されません)。



「Allow Firebase to collect CLI usage and error reporting information?」と聞かれるので、「Yes」とします。ここでは「No」と拒否としても先に進めそうな気がしますが、差し障りないと思いますので「Yes」としましょう。



Webアプリを作成しているディレクトリーにいることを改めて「ls」で確認し、「firebase init」と打ち、ローカルプロジェクト側でFirebaseの環境を整えます。

firebase init

下記のように大文字で「FIREBASE」と表示されていれば、ここまでは順調です。続いて、「Are you ready to proceed(Y/n)」と問われるので、キーボードで「y」を押します。ここで「n」を押すと止まります。




矢印キーで上下に移動できるので、Hostingにカーソルを合わせて、スペースで選択、括弧内に※印が表示されていることを確認し、Enterを押します。



Project Setup

続いての選択画面で、FireBase側でのプロジェクトの設定をします。今回は初めの手順で既にFireBaseでプロジュクトを作っているので、「Use an existing project」を選択し、Enterを押します。





次に、FireBase上で「Select a default Firebase project for this directory」と表示されるので、先ほどFirebase上で作成したプロジェクトを矢印キーで選択し、Enterを押します。



Hosting Setup



続いて「What do you want to use as a public directory?」と聞かれます。ここでは後述ビルド実行時にbuildフォルダに全てが集約されるので「build」と入力します。




「Configure as a single-page app(rewrite all urls to /index.html)」?と聞かれるので、SPA(Single Page Application)なら「y」、そうでないなら「N」と入力して、Enterを押します。Single Page Applicationとは、HTMLファイルがindex.htmlだけで構成されるWebアプリです。例えば、以前の記事でご紹介した私のブラックジャックはSPAです。



「Set up automatic builds and deploy with GitHub?」の部分はNoを選択します。ここでYesを選択するとGitHubの連携が可能となりますが、追加の設定を要します。



もしGitHubとの連携をした場合は、次のような画像が現れます。





次に「Set up the workflow to run a build script before every deploy?」と聞かれれば、「y」を、続いて「What script should be run before every deploy?」と聞かれればそのままEnterを押してください。また、「Set up automatic deployment to your site’s live channel when a PR is merged」ともし聞かれなければ、「N」を押します。GitHub連携の部分でNoを選択した場合は以上3つの質問は聞かれないと思いますので、そのまま進んで大丈夫です。



初期設定完了

ここまで来ると、「firebase initialization complete!」 と表示されます。この段階ではFirebase側の準備が整い、ローカル環境とFireBaseの接続も保たれています。続いていよいよWebアプリをデプロイのために、ローカル側でデプロイのためのビルドフォルダを作成します。「npm run build」と入力します。このコマンドにより、ローカルのプロジェクトでインストールされるも使わなかったライブラリーなど不要なものが全て整理されます。


npm run build


下記画面の下から2行目のように「The build folder is ready to be deployed」と表示されれば、無事にWebアプリをデプロイするためのbuildフォルダが完成しています。



また、プロジェクトフォルダ内にも実際にbuildという名のフォルダが作成されていることも確認できます。


buildフォルダが出来たら、いよいよデプロイです。「firebase deploy」と入力します。

デプロイ完了


下記下段のようにHosting URLが表示されればWebアプリのFirebase上でのデプロイ成功です。表示されているURLがWebアプリのデプロイされているURLですので、そのままCtrl + クリックとしてもいいですし、コピーしてブラウザ上で確認しても大丈夫です。



2回目以降の更新

以上が初回のデプロイの方法ですが、2回目のデプロイ(更新)の方法もご紹介します(3行)。まずターミナルからFirebaseにログインします。ログイン方法は先ほどと同様です。

firebase login

続いて、ビルドを実施します。

npm run build

ターミナルで「The build folder is ready to be deployed」と表示されたことを確認した後、次のコードでデプロイします。

firebase deploy

Firebaseプロジェクト内でのアプリの登録方法

以上でデプロイは可能ですが、最後にプロジェクト内でFirebaseアプリを登録する方法をご紹介します。Firebaseにおけるプロジェクトとアプリの違いは前述の通りです。Firebaseのホームページに戻り、右上のGo to Consoleを押すと先ほど作成したプロジェクトが表示される画面に移りますので、同プロジェクトの部分をクリックします。



続いて、左上のプロジェクトの概要の右側に歯車アイコンをクリックし、「プロジェクトを設定」をクリックします。



プロジェクトの設定という画面が開くので、下段マイアプリの中にあるコードアイコンをクリックします。



続くアプリの登録画面では、アプリ名を入力、「Firebase Hosting」も「設定します」にチェックし、「アプリを登録」をクリックします。



次の部分でscriptタグを張るよう要請されますが、ここではこの工程をスキップして「次へ」を押します(後からできます)。



次の画面ではCLIをインストールするよう求めれますが、この記事の冒頭でご紹介した通りで済んでいますので、ここでも何もせずに「次へ」をクリックします。



続く画面ではローカル環境でfirebaseのプロジェクトを構築する方法が簡単に書いてありますが、この工程は前述の通り詳しく解説をいたしましたので、「コンソールに進む」をクリックします。



アプリが無事に立ち上がりましたので、構成とある部分をクリックして、apiKeyなどの情報の書かれたJavaScriptのオブジェクトをコピーします。この構成情報(configuration)はFirebaseの機能をフロントエンドから使用するときに必要ですので、ローカル側のアプリを作成している階層にfirebase.jsというファイルを作成します。

下記コード例では1行目でfirebaseをインストール、3行目以降で構成オブジェクトを作成の後、firebase.initializeAppでfirebaseオブジェクト作成しています(フロントエンドReactとバックエンドfirebaseがこの行で接続します)。続く行ではよく使うデータベースのfirestoreと、認証のauthのオブジェクトを作成していますが、実際にそれらアプリを使うにはFirebaseサイト内での追加の設定が必要です(後日ご紹介します)。なお下記コード例のfirebaseConfigオブジェクト内の値は架空の値です。

firebase.js

import firebase from “firebase”;

const firebaseConfig = {
apiKey: “adfasfavnaAJFDKCnjkasjlkASJLFNKSA”,
authDomain: “myapp-d92bc.firebaseapp.com”,
projectId: “myapp-d92bc”,
storageBucket: “myapp-d92bc.appspot.com”,
messagingSenderId: “15645156456156”,
appId: “1:15645156456156:web:1516532e652c5459f5f6b44”,
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();

export { auth };
export default db;



以上でFirebaseのプロジェクト内でのアプリの登録作業(初動)が完了となります。データベースのfirestoreや、認証のauthの具体的な使用方法は別の機会に記事を書きたいと思います。今日も最後まで読んで頂きありがとうございました。

下記のyoutubeでは動画でデプロイの方法を解説しています。
宜しければこちらもご覧になってみてください。