ちょっとしたWebサイトをサーバーを用意せずに立ち上げたいという時があります。
イベントを告知するサイトであったり開発中のサイトをスマートフォンから見たい時とか、サーバーを新たに用意するのは面倒だなぁと感じる時、Firebaseを使うと便利にサイトを公開することが出来ます。
httpsに無料で対応するのでProgressive WebApps対応サイトも作れちゃいます。
2016年9月3日時点では1 GBまでのファイル容量に対応し10 GBダウンロードされるまで無料です。
ここでは静的なHTMLをFirebaseで公開してhttpsでアクセスするまでの方法を紹介します。
必要なもの
Firebaseを使うにはGoogleアカウントが必要です。Mac(おそらくLinuxやWindowsでも出来ると思いますが今回は説明を割愛します。)
Node.jsのインストール
Node.jsにアクセスしてv4.5.0 LTSをダウンロード
nhode-v4.5.0.pkgをダブルクリックしてインストールを継続
途中管理者権限のパスワードを聞かれるので入力する。
Firebaseのインストール
ターミナルを開いて以下を実行$ sudo npm install -g firebase-tools
Firebaseのプロジェクトを作成する
Webブラウザを開いてFirebaseのサイトを開いてSee our web new site をクリック
GET STARTED FOR FREEをクリック
新規プロジェクトを作成をクリック
プロジェクト名に任意の名前を入れて
国/地域に日本を選択して「プロジェクトを作成」をクリック
作業フォルダの作成
静的なファイルを配置するための作業フォルダを作ります。今回はドキュメントにfirebase/demoというフォルダを作成してみます。
ターミナルに戻り次のコマンド実行する。
$ mkdir -p ~/Documents/firebase/demo
$ cd ~/Documents/firebase/demo
Firebaseにログインする
Firebase toolはブラウザとアカウント情報を連携することが出来ます。ターミナルで以下のコマンドを実行します
firebase login
ブラウザが立ち上がってアカウント情報が求められた場合は先ほどFirebaseのプロジェクトを作ったGoogleアカウントでログインしアカウント連携を許可する。
ローカルの初期設定を行う
ターミナルに戻りfirebase init
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にチェックが入っている状態とする。
What Firebase project do you want to associate as default?
が表示されたら先ほどブラウザで作成したFirebaseのプロジェクトを選択してEnterを入力する。
What do you want to use as your public directory?と表示されたら(public)となっているのを確認してEnter。
Configure as a single-page appと表示されたらNと入力してEnter。
Firebase initialization complete!
と表示されたら準備完了。
書類フォルダに作ったfirebase/demoフォルダを開くと中には
firebase.json(firebaseに関する情報が入っている)
npm-debug.log
とpublicフォルダが入っています。
publicフォルダ内に入っているファイルがWebホスティングされて公開されます。
サイトを公開する
ページを公開したい時や新しい内容に変えたい時にはターミナルで書類フォルダのfirebase/demoフォルダにいることを確認して$ cd ~/Documents/firebase/demo
次のコマンドを実行します。
$ firebase deploy
もし、次のエラーが表示されたらログイン状態が外れているので
Error: Command requires authentication, please run firebase login
次のコマンドを実行して再度Firebaseにログインしてからfirebase deployを行ってください
$ firebase login
デプロイに成功すると
Hosting Site:の後にサイトのアドレスが表示されるので、そこにアクセスしてみましょう。
無事にindex.htmlが表示されたら成功です。
HTTPSサイトというとGithub Pagesを使うことも出来ます。そちらについては他にまとめている人がいるのでぜひそちらも参考にしてみてください。
http://liginc.co.jp/web/html-css/html/96453