【レンタルサーバー不要】WEBアプリをFirebaseで開発・公開した話
今回はFirebaseでWEBアプリの開発と公開を行ったので、その話を書いていきたいと思います。
Firebaseは、制限こそあるものの無料で利用できるので、WEBアプリの開発をやりたいけどお金をかけたくないという方にはおすすめです。
私はさくらインターネットのVPSやレンタルサーバーを使って、WEBアプリの公開をしていますが、維持するためにお金がかかります。
用途に合わせて、有料のレンタルサーバーなどを利用するか、無料の物を使うかを選べるといいですよね。
この記事がその役に立てたらいいと思います。
Firebaseを使うメリット
認証機能やプッシュ通知を簡単に実装できる
普通に開発すると、慣れていない場合にかなり時間が必要になる「認証機能」や「プッシュ通知」ですが、Firebaseにはそれらの機能が用意されており簡単に実装できます。
実際にFirebaseの認証機能を実装した例を以下の記事で紹介しています。
www.sky-limit-future.com
実装はとても簡単でした。これを利用しない手はないですね。
そのうちプッシュ通知に関しても実装してご紹介したいと思います。
バックエンドに割く時間を減らせる
サーバ管理・保守は面倒ですが、Firebaseを使えばそれらが不要となり、開発に集中できます。
個人開発を始めようという方(私含め)にとっては、サーバー管理などは難しくて、勉強しようにも学習コストが高いですよね。
レンタルサーバーならまだしも、VPSなどはサーバーの設定なども自分でやらないとダメですし。
まずは開発に集中したい場合はFirebaseを使うのがいいですね。
リアルタイムデータベース
FirebaseのFirebase Realtime Databaseではリアルタイムでのデータ保存・同期が可能です。
無料プランでは同時接続数が100とかなり少ないので、作りたいサービスによっては無料プランは厳しいかもしれないですが。
Firebaseを使った開発
ここからは実際の開発方法をご紹介します。
Googleアカウントでログイン
以下のページから準備を開始します。
firebase.google.com
画面右上にある「コンソールへ移動」をクリックします。
すでにGoogleアカウントでログインしている場合はそのまま使えますが、未ログインの場合はログインの要求があります。
ログインすると、コンソールに移動します。
プロジェクトを追加
上記画面から「プロジェクトの追加」をクリックしましょう。
するとプロジェクト名などの記入ダイアログが表示されます。
「Firebase 向け Google アナリティクスのデータ共有にデフォルトの設定を使用する」にはデフォルトでチェックがついていますが、外す理由が特になければそのままにしておきましょう。
プロジェクト名、プロジェクトIDなどを記入し、また同意チェックボックスにもチェックをいれて「プロジェクトを作成」をクリックします。
これでプロジェクトの作成が完了です。
開発アプリを選択
FirebaseではiOS、Android、Webのアプリを作成可能です。
作成したプロジェクトの画面に行くと、画面上部にアプリを選択する箇所があります。
今回はWEBアプリに関する説明なので、一番右のマークをクリックします。
すると、自分のアプリのhtmlにscriptタブを埋め込むように記載があります。
プロジェクトごとに内容が異なりますのでご注意ください。
また、以下のように埋め込み箇所についても言及がありますので確認してください。
HTML の一番下、他のスクリプトタグの前に、以下のスニペットをコピーして貼り付けてください。
ここで気が付いたかもしれませんが、すでに開発したソースコードがある前提で記載されていますね。
なので、この時点で何も手を付けていない方は、とりあえず骨格だけでも作ってしまいましょう。
そして、index.htmlなどに指定されたscriptタグを埋め込みます。
例えば、Nuxt.jsなどにfirebaseを導入する際には、yarnを使って
yarn add firebase --save
などのような導入も可能です。
ここまででFirebaseの機能を自身の開発アプリに実装できるようになりました。
今回は、認証機能などの実装方法には触れません。
実装方法などについてはドキュメントを参照してください。先ほどもリンク貼りましたが、認証機能については
こちらで紹介もしていますので、興味があればご覧ください。
Hosting設定
ここからは作成しているローカル開発環境でコマンドを使って作業していきます。
まず画面左側にあるメニューの「Hosting」をクリックします。
「使ってみる」を押すとnpmを使って、firebaseコマンドラインツールのインストールを促されます。
$ npm install -g firebase-tools
コマンドを実行したら、「次へ」で進むと以下のような画面になります。
Googleへのログイン、プロジェクトの開始、デプロイのコマンドが用意されています。
ログインコマンドで問題があった場合
私は、ログインの段階で問題があって
$ firebase login
のコマンドを実行すると以下のエラーが表示されました。
- bash: firebase: command not found
こちらはnpmのPATHが原因となっていました。
こちらのサイトを参考にさせていただきました。
グローバルディレクトリの確認
$ npm bin -g
Firebaseコマンドの実施前に
$ export PATH=$PATH:`npm bin -g`
とすることで正しく動くようになりました。
成功するとブラウザ上でログイン画面が立ち上がり、Googleログインを促されます。
続いて
$ firebase init
実行すると、Hostingやその他の選択肢が表示されます。
今回はHostingに設定しましょう。進めるとプロジェクトの選択を促されるので、該当プロジェクトを選びましょう。
Select a default Firebase project for this directory
該当プロジェクトが表示されない場合
私はプロジェクトを作成した直後にinitを実行しても、そのプロジェクトが選択肢に表示されませんでした。
なので、一旦プロジェクトを指定せずに先に進めました。
同じ状況になった方は
[don't setup a default project]
を選択しましょう。まだ質問は続きますが後述します。
全ての質問に答えると、該当ディレクトリ配下にpublicディレクトリが作成されるのでそこに移動します。
その中で、そのプロジェクトと関連付けるかを設定するコマンドを実行します
$ firebase use --add xxxxxx
「xxxxxx」にはプロジェクトIDが入ります。
成功すれば
Now using project xxxxxx
と表示されます。
続き
続いての質問は何も考えずに進めました。
publicディレクトリを使いたいかどうか
What do you want to use as your public directory?
SPAかどうか
Configure as a single-page app (rewrite all urls to /index.html)?
これで、該当ディレクトリにpublicディレクトリが、その中にindex.htmlなどが作成されます。
作成されたpublicディレクトリに移動してローカルでホスティングを実施します。
$ firebase serve
にアクセスすると、セットアップ完了の画面が表示されます。
これは最初に用意されたindex.htmlの内容が表示されているだけなので、ここの内容を書き換えるか、public配下にご自分のアプリケーションを配置しましょう。
再配置してから
にアクセスして、動けばOKです。
デプロイ
最後にデプロイします。
$ firebase deploy
デプロイに成功すると「 Deploy complete!」と表示されます。
Firebaseプロジェクト内のホスティング画面に行くと以下のようにドメイン、リリース履歴などが表示されています。
実際にサイトにアクセスして思い通りの動きであれば完了ですね。
最後に
ここまででFirebaseでの開発手順をご説明しました。
かなり簡単に世の中に公開できるので、これから開発を始めたいなと思っている方にはおすすめです。
無料ですし！！
以上です。
