HTML
mBaas
Firebase

FirebaseでWebサイトを無料でサクッと公開してみる

More than 1 year has passed since last update.

Parse終了の衝撃からはや4ヵ月。

みなさまいかがお過ごしでしょうか。

近年、mBaaSは急速に進化を続けています。

今回はGoogleのmBaaSであるFirebaseを使って、Webサイトをサクッと立ち上げてみましょう。


Googleアカウントを準備

FirebaseはGoogleアカウントがあれば無料で使えます。

事前にアカウントを取得し、ログインしておきましょう。


FirebaseでWebサイト用のプロジェクトを作っておく

https://console.firebase.google.com/

にアクセスし、新規プロジェクトを作成しましょう。

プロジェクト名と国を選択するだけでOKです。


Node.jsとnpmをインストールする

FirebaseでWebサイトをホスティングするためのツールは、npmでインストール可能です。

ってことで、先にNode.jsとnpmをインストールしましょう。

インストール手順はGoogle先生に聞けば沢山出てきます。

https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=node.js%20npm%20%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB


firebase-toolsのセットアップ

$ npm install -g firebase-tools

でインストールします。

インストールが終わったら、



$ firebase login



をするとブラウザで認証フォームが開きますので、ボタンを押せばログイン完了です。

流石Google、超カンタン。


プロジェクトの初期化とデプロイ

好きなディレクトリに入って、

$ firebase init

します。

DatabaseかHostingか聞かれるので、Hostingを選択。

? What Firebase CLI features do you want to setup for this folder? 

◉ Database: Deploy Firebase Realtime Database Rules
❯◉ Hosting: Configure and deploy Firebase Hosting sites

設定jsonとかpublicディレクトリとかはそのままでOKなので、Enter押下。

すべてのリクエストをindex.html経由にする設定にするかどうか聞かれるので、これもEnter押下。(デフォルトはNo)

どのプロジェクトを使うか聞かれるので、さっき作ったプロジェクトを選択

? What Firebase project do you want to associate as default? (Use arrow keys)

[don't setup a default project]
❯ test-project (project-000000000000000)
[create a new project]

これでディレクトリ直下に設定jsonとpublicディレクトリが生成されるので、あとはpublic/index.htmlをいじってデプロイします。

$ firebase deploy

ほい、これでもうサイトが公開されましたよ。


サイトを見てみる

Firebaseの管理画面からプロジェクトを選択後、左メニューからHostingを選択します。

URLが勝手に割り振られてるので、アクセスしてみましょう!

firebase_ss.png


料金について

2016年5月時点では、ファイルサイズ1GB、ファイル転送10GBまで無料です。

小規模なサイトならぜーんぜん問題なく使えちゃいますね。

https://firebase.google.com/pricing/