The sky is the limit

Vue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。

【レンタルサーバー不要】WEBアプリをFirebaseで開発・公開した話

【レンタルサーバー不要】WEBアプリをFirebaseで開発・公開した話

f:id:duo-taro100:20160218004611p:plain


今回はFirebaseでWEBアプリの開発と公開を行ったので、その話を書いていきたいと思います。
Firebaseは、制限こそあるものの無料で利用できるので、WEBアプリの開発をやりたいけどお金をかけたくないという方にはおすすめです。
私はさくらインターネットのVPSやレンタルサーバーを使って、WEBアプリの公開をしていますが、維持するためにお金がかかります。
用途に合わせて、有料のレンタルサーバーなどを利用するか、無料の物を使うかを選べるといいですよね。
この記事がその役に立てたらいいと思います。

Firebaseを使うメリット

認証機能やプッシュ通知を簡単に実装できる

普通に開発すると、慣れていない場合にかなり時間が必要になる「認証機能」や「プッシュ通知」ですが、Firebaseにはそれらの機能が用意されており簡単に実装できます。

実際にFirebaseの認証機能を実装した例を以下の記事で紹介しています。
www.sky-limit-future.com

実装はとても簡単でした。これを利用しない手はないですね。
そのうちプッシュ通知に関しても実装してご紹介したいと思います。

バックエンドに割く時間を減らせる

サーバ管理・保守は面倒ですが、Firebaseを使えばそれらが不要となり、開発に集中できます。
個人開発を始めようという方(私含め)にとっては、サーバー管理などは難しくて、勉強しようにも学習コストが高いですよね。
レンタルサーバーならまだしも、VPSなどはサーバーの設定なども自分でやらないとダメですし。
まずは開発に集中したい場合はFirebaseを使うのがいいですね。

リアルタイムデータベース

FirebaseのFirebase Realtime Databaseではリアルタイムでのデータ保存・同期が可能です。

firebase.google.com

無料プランでは同時接続数が100とかなり少ないので、作りたいサービスによっては無料プランは厳しいかもしれないですが。

Firebaseを使った開発

ここからは実際の開発方法をご紹介します。

Googleアカウントでログイン

以下のページから準備を開始します。
firebase.google.com

firebase開発の始め方
https://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の機能を自身の開発アプリに実装できるようになりました。
今回は、認証機能などの実装方法には触れません。
実装方法などについてはドキュメントを参照してください。先ほどもリンク貼りましたが、認証機能については

www.sky-limit-future.com

こちらで紹介もしていますので、興味があればご覧ください。

Hosting設定

ここからは作成しているローカル開発環境でコマンドを使って作業していきます。
まず画面左側にあるメニューの「Hosting」をクリックします。

Hosting設定
Hosting設定

「使ってみる」を押すとnpmを使って、firebaseコマンドラインツールのインストールを促されます。

コマンドラインツールのインストール
コマンドラインツールのインストール

$ npm install -g firebase-tools

コマンドを実行したら、「次へ」で進むと以下のような画面になります。

ログイン
ログイン

Googleへのログイン、プロジェクトの開始、デプロイのコマンドが用意されています。

ログインコマンドで問題があった場合

私は、ログインの段階で問題があって

$ firebase login

のコマンドを実行すると以下のエラーが表示されました。

  • bash: firebase: command not found

こちらはnpmのPATHが原因となっていました。

qiita.com


こちらのサイトを参考にさせていただきました。
グローバルディレクトリの確認

$ 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

http://localhost:5000/

にアクセスすると、セットアップ完了の画面が表示されます。

ローカルでホスティング
ローカルでホスティング

これは最初に用意されたindex.htmlの内容が表示されているだけなので、ここの内容を書き換えるか、public配下にご自分のアプリケーションを配置しましょう。
再配置してから

http://localhost:5000/

にアクセスして、動けばOKです。

デプロイ

最後にデプロイします。

$ firebase deploy

デプロイに成功すると「 Deploy complete!」と表示されます。
Firebaseプロジェクト内のホスティング画面に行くと以下のようにドメイン、リリース履歴などが表示されています。

ホスティング画面
ホスティング画面

実際にサイトにアクセスして思い通りの動きであれば完了ですね。

最後に

ここまででFirebaseでの開発手順をご説明しました。
かなり簡単に世の中に公開できるので、これから開発を始めたいなと思っている方にはおすすめです。
無料ですし!!
以上です。