読者です 読者をやめる 読者になる 読者になる

dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

follow us in feedly

Firebaseでアプリをホスティングする(Hosting Service)

先日 Firebase のチュートリアルをやってみた。

このときはまだ、Firebase はリアルタイムアプリケーションデータベース(すなわち DBaaS )としか認識してなかったんだけど、ホスティングサービスもやっていたということに後から気づいた。

Hosting Quickstart - Firebase

このサービス使えば作成したアプリの運用も全部 Firebase でできる...!

ということで、せっかくなのでクイックスタートを試してみた。
なお、Firebase のアカウント作成&アプリケーション登録の手順は上記記事を参照。

ホスティングまでの手順

CLI のインストール(Setup the firebase command line tool)

まずはローカルから firebase にデプロイするために必要な CLI をインストール。
インストールには npm を使う。

$ npm install -g firebase-tools

アプリのセットアップ(Initialize your app)

アプリを作成したいディレクトリで、以下のコマンドを実行する。

$ firebase init

すると Email, Password を聞かれるので、Firebase のアカウント情報を入力する。

$ firebase init
Please sign into your Firebase account to continue...
Email: **********@*******
Password:

無事ログインできると Firebase のアプリケーション一覧が表示されるので、
ホスティングに利用するアプリケーションを1つ選ぶ。

----------------------------------------------------
Your Firebase Apps ************@*********
----------------------------------------------------
my-firebase-app
----------------------------------------------------
Enter the name of the Firebase app you would like to use for hosting
Firebase app: my-firebase-app

Site URL にアプリの公開 URL が表示される。
この後、ディレクトリ内でアプリのトップページすなわち index.html を置く場所を指定する。

たとえば、public/index.html というように public ディレクトリ下に配置したい場合は public を入力する。

----------------------------------------------------
Site URL: https://my-firebase-app.firebaseapp.com
----------------------------------------------------
Enter the name of your app's public directory.
(usually where you store your index.html file)
Public Directory: (current directory) public

これでセットアップは完了し、ディレクトリに firebase.json というファイルが作成される。

Initializing app into current directory...
Writing firebase.json settings file...
Successfully initialized app
To deploy: firebase deploy
firebase.json
{
  "firebase": "my-firebase-app",
  "public": "public",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

デプロイする

デプロイはアプリのルートディレクトリで以下のコマンドを実行する。

$ firebase deploy
Preparing to deploy Public Directory...
progress: 100%
Successfully deployed
Site URL: https://my-firebase-app.firebaseapp.com, or use firebase open
Hosting Dashboard: https://firebase.com/account then view the hosting section of your app

ブラウザで http://my-firebase-app.firebaseapp.com にアクセスするか、ターミナルで

$ firebase open

とするとアプリがデプロイされ、稼働しているのを確認できる。

かんたん!

TODO

現時点で気になることいくつか。

  • カスタムドメインの設定方法
  • Free Plan の制限
  • セキュリティに対する考え方
    • xxx.firebaseapp.com という URL からデータベースの URL (xxx.firebaseio.com) が簡単にわかるんじゃ?
    • xxx.firebaseio.com っていう URL がばれると勝手にデータベースに書き込まれたりするんじゃ?
    • そうでなくともあてずっぽうで xxx の部分が見つかったら(特に制限しない限り)第三者に利用されちゃうんじゃ?
    • → というわけで、なんらかのユーザー認証が前提になってる?

サンプルアプリとか

https://www.firebase.com/docs/web/examples.html

このあたりにサンプルアプリがいくつかある。
また、これはどこから見つけたかわかんないけどリアルタイムの Chat アプリ。

https://github.com/firebase/cloud-chat

f:id:dackdive:20150423004510p:plain

こんなのも簡単にホスティングして試すことができますね。


(追記)

ホスティングサービスは割と最近始まったサービスみたい。
(記事は 2014 年 5 月)

データベースバックエンドのFirebaseがアプリケーションのホスティングもメニューに加える | TechCrunch Japan