HTML
Web
Firebase

Firebase Hosting でWebサイトを公開する方法

More than 1 year has passed since last update.

AWS, さくら, ConoHa, GitHub Pages などWebサイトを公開する方法はいろいろありますが...

Firebaseでもできるので、そのやり方を書きます(•̀ᴗ•́)و

FirebaseでWebサイトを公開する方法にFirebase Hostingを使います。

Firebase Hostingのお値段は、こんな感じです。

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

スクリーンショット 2016-09-04 16.53.08.png


Firebaseの設定

公開の前にFirebaseの設定がいるので、その辺を先にやります(・ω・)b


①Firebase CLIのインストール

npm install -g firebase-tools

※Firebase CLIのコマンドの詳細はこちらを参考にしてください。


②ログイン

firebase login

ブラウザが開き、こんな画面が表示されるはずなので、お好きなアカウントでログインしてください。

スクリーンショット 2016-09-04 11.45.37.png

ログインが成功すると、こんな画面が表示されます。

スクリーンショット 2016-09-04 11.46.02.png

ちなみに、ログアウトはこちらです。

firebase logout


③プロジェクト作成

Firebaseのページの右上あたりにコンソールへ移動というボタンがあるので、クリックしてください。

スクリーンショット 2016-09-04 17.00.50.png

Firebaseのconsole画面が表示できたら、新規プロジェクト作成をクリックして、プロジェクトを作成します。

スクリーンショット 2016-09-04 14.28.13.png

プロジェクト名と国を入力します。

スクリーンショット 2016-09-04 14.28.45.png

最後にプロジェクトを作成を押します。

プロジェクト画面が表示されたら、作成完了です。

これで、下準備は完了です。次から、Webサイト公開ですd(⌒ー⌒)


Webサイト公開

すでにhtmlなどのファイルを作っている場合は、そのファイルがあるディレクトリに移動してください。

これから新規で作られる方は、どこでもいいので、空のディレクトリを作ってください。

※空のディレクトリの場合のときは、以下の設定が完了すると自動でサンプルのindex.htmlが作成されます。


①初期化

Firebaseで公開する前に、いくつかファイルを作る必要があるので、その設定をします。

firebase init

initすると、こんな画面が表示されます。

スクリーンショット 2016-09-04 14.34.28.png

ここから、いくつか質問が表示されるので、それに従って設定をしていきます。


②Hosting設定

はじめに、Database、Hosting どっちの設定にする?って聞いてくるので、Hostingを選択します。

スクリーンショット 2016-09-04 13.51.20.png


③プロジェクト選択

次に、どのプロジェクトと紐付ける?って聞いてくるので、先ほど上で作ったプロジェクトを選びます。

スクリーンショット 2016-09-04 14.14.32.png

ちなみに、create a new projectを選ぶと、上のプロジェクト作成と同じ事がここでできます。

この辺は、お好きなように。


④Database Security Ruleの設定

次に、Realtime Database のSecurity Ruleについて聞いてきます。

Realtime Databaseを使わない場合は、Enterをおします。

スクリーンショット 2016-09-04 14.15.28.png


⑤公開ディレクトリ

あと、少しで設定は完了です。

次に、公開ディレクトリはどうする?って聞いてきます。

スクリーンショット 2016-09-04 14.16.10.png

デフォルトでは、publicになります。

publicでいいなら、そのままエンターを押しましょう。

この公開ディレクトリがFirebaseで公開されるディレクトリとなります。

なので、ここにindex.htmlなどのWebサイトに必要なファイルを入れていきます。

スクリーンショット 2016-09-04 17.19.33.png


⑥Single Page Application

最後に、Single Page Applicationの設定をする?って聞いてきます。

スクリーンショット 2016-09-04 14.58.46.png

こちらは、デフォルトはNoになっています。

Single Page Applicationにするならy、しないなら、Nを入力します。Single Page Applicationって、何??という人は、Nにしましょう(笑)


⑦初期化完了

すべてが完了すると、Firebase initialization complete!と表示されます。

スクリーンショット 2016-09-04 14.18.25.png


⑧公開

deployコマンドで公開します。

firebase deploy

成功すると、 Deploy complete!と表示されます。

スクリーンショット 2016-09-04 14.19.46.png


⑨確認

openで先ほど公開したサイトを確認できます。

firebase open

いろいろでてきますが、Hosting: Deployed Siteを選択します。

スクリーンショット 2016-09-04 14.20.38.png

ブラウザが立ち上がり、公開したwebサイトが表示されます( *• ̀ω•́ )b


開発環境と本番環境を分ける

開発環境と本番環境に分けて、開発することが多いと思います。

Firebaseを使えば、この辺の切り替えが簡単にできます。


①開発環境プロジェクト作成

開発環境用にもう一つプロジェクトを作成してください。

この操作は、webのFirebase console画面からやったほうが良いかもしれないです。


②環境の追加

プロジェクトの作成できたら、先ほどのwebページのディレクトリに移動してください。

そして、use --addを実行します。

firebase use --add

プロジェクトのリストが表示されるので、先ほど作った開発環境用プロジェクトを選びます。

スクリーンショット 2016-09-04 17.37.51.png

次に、環境の名前をつけます。これは、何でもいいです。今回は、developmentとしています。

スクリーンショット 2016-09-04 16.22.57.png

これで、設定は完了です(o^-・)b


③環境を切り替える

こんな感じにfirebase use 環境名で切り替えができます。

firebase use development

切り替え完了すると、こんな感じのやつが表示されます。

スクリーンショット 2016-09-04 17.46.19.png

あとは、普段通りに開発し、公開するときは、firebase deployでokです。

で、また環境を切り替えたかったらfirebase use 環境名です。

ちなみに、環境の設定ファイルは.firebasercです。名前などを忘れたら、ここをみて確認できます。

スクリーンショット 2016-09-04 17.49.59.png


CI連携

ここに書くと長くなりそうなので、こちらに書きました!

GitHubにpushされるとCIが動き、通ったらFirebase Hostingにdeployする流れを書いています。


カスタムドメインの設定

ここに書くと長くなりそうなので、こちらに書きました!


まとめ

さくっとWebサイトが公開できるし、値段もそれほど高くはないので、AWSもいいけど、Firebase Hostingも悪くないぞ(๑˃̵ᴗ˂̵)و