Help us understand the problem. What is going on with this article?

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

More than 3 years have 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も悪くないぞ(๑˃̵ᴗ˂̵)و

gupuru
decentralized application engineer.
https://gupuru.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away