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

AWS, さくら, ConoHa, GitHub Pages などWebサイトを公開する方法はいろいろありますが...
**[Firebase](https://firebase.google.com/)でもできるので、そのやり方を書きます(•̀ᴗ•́)و** 

FirebaseでWebサイトを公開する方法に[Firebase Hosting](https://firebase.google.com/docs/hosting/)を使います。

Firebase Hostingのお値段は、こんな感じです。
https://firebase.google.com/pricing/
![スクリーンショット 2016-09-04 16.53.08.png](https://qiita-image-store.s3.amazonaws.com/0/53996/f8f297e8-5e8c-1c89-4356-40a102fafbba.png)

# Firebaseの設定

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

## ①Firebase CLIのインストール

```
npm install -g firebase-tools
```

※Firebase CLIのコマンドの詳細は[こちら](https://firebase.google.com/docs/cli/)を参考にしてください。

## ②ログイン

```
firebase login
```

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

![スクリーンショット 2016-09-04 11.45.37.png](https://qiita-image-store.s3.amazonaws.com/0/53996/9dc417b7-ed83-e7c5-d770-d9176693f446.png)

ログインが成功すると、こんな画面が表示されます。
![スクリーンショット 2016-09-04 11.46.02.png](https://qiita-image-store.s3.amazonaws.com/0/53996/23fe10a9-aaf8-ede7-041b-2f2cb672f37e.png)

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

```
firebase logout
```

## ③プロジェクト作成

[Firebase](https://firebase.google.com/)のページの右上あたりに`コンソールへ移動`というボタンがあるので、クリックしてください。

![スクリーンショット 2016-09-04 17.00.50.png](https://qiita-image-store.s3.amazonaws.com/0/53996/11f59b5e-e8da-6e61-92c3-8c9982b07a6b.png)

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

![スクリーンショット 2016-09-04 14.28.13.png](https://qiita-image-store.s3.amazonaws.com/0/53996/3c9c0f57-39cc-78ed-bbbe-f210b343a0e3.png)

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

![スクリーンショット 2016-09-04 14.28.45.png](https://qiita-image-store.s3.amazonaws.com/0/53996/2629f39c-d853-cb05-49de-2c84cf7780ad.png)

最後に`プロジェクトを作成`を押します。
プロジェクト画面が表示されたら、作成完了です。

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

# Webサイト公開

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

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

## ①初期化

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

```
firebase init
```

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

![スクリーンショット 2016-09-04 14.34.28.png](https://qiita-image-store.s3.amazonaws.com/0/53996/1a44de51-3746-4599-3c06-a9568c3330c7.png)

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

## ②Hosting設定

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

![スクリーンショット 2016-09-04 13.51.20.png](https://qiita-image-store.s3.amazonaws.com/0/53996/59412e74-91dc-ce3e-8ec2-9ca051dd7018.png)

## ③プロジェクト選択

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

![スクリーンショット 2016-09-04 14.14.32.png](https://qiita-image-store.s3.amazonaws.com/0/53996/a9473a97-bbb9-2382-281a-1813bff273ff.png)

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

## ④Database Security Ruleの設定
次に、[Realtime Database](https://firebase.google.com/docs/database/) のSecurity Ruleについて聞いてきます。
Realtime Databaseを**使わない場合は、Enterをおします。**

![スクリーンショット 2016-09-04 14.15.28.png](https://qiita-image-store.s3.amazonaws.com/0/53996/c399c851-4e4e-ebef-9ab4-067462c720a4.png)

## ⑤公開ディレクトリ

あと、少しで設定は完了です。
次に、公開ディレクトリはどうする？って聞いてきます。

![スクリーンショット 2016-09-04 14.16.10.png](https://qiita-image-store.s3.amazonaws.com/0/53996/19b457f8-92df-791f-2c23-1c8249f96193.png)

デフォルトでは、`public`になります。
`public`でいいなら、そのままエンターを押しましょう。

この公開ディレクトリがFirebaseで公開されるディレクトリとなります。
なので、ここにindex.htmlなどのWebサイトに必要なファイルを入れていきます。
![スクリーンショット 2016-09-04 17.19.33.png](https://qiita-image-store.s3.amazonaws.com/0/53996/b4e5b8cf-64a0-c977-8e07-21813e697ea6.png)

## ⑥Single Page Application

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

![スクリーンショット 2016-09-04 14.58.46.png](https://qiita-image-store.s3.amazonaws.com/0/53996/03a808c2-08cf-8782-a1d4-b4e5beca843e.png)

こちらは、デフォルトはNoになっています。
Single Page Applicationにするなら`y`、しないなら、`N`を入力します。Single Page Applicationって、何？？という人は、`N`にしましょう（笑）

## ⑦初期化完了
すべてが完了すると、`Firebase initialization complete!`と表示されます。

![スクリーンショット 2016-09-04 14.18.25.png](https://qiita-image-store.s3.amazonaws.com/0/53996/69c65f4a-0513-3be2-9ba6-0275f51fcc1d.png)

## ⑧公開

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

````
firebase deploy
```

成功すると、 `Deploy complete!`と表示されます。
![スクリーンショット 2016-09-04 14.19.46.png](https://qiita-image-store.s3.amazonaws.com/0/53996/6fed4873-796a-d5b6-41af-43708f31449d.png)

## ⑨確認

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

```
firebase open
```

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

![スクリーンショット 2016-09-04 14.20.38.png](https://qiita-image-store.s3.amazonaws.com/0/53996/e05cdcf2-ea52-a3bf-4098-7b0ad2072694.png)

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

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

開発環境と本番環境に分けて、開発することが多いと思います。
Firebaseを使えば、この辺の切り替えが簡単にできます。

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

開発環境用にもう一つプロジェクトを作成してください。
この操作は、webのFirebase console画面からやったほうが良いかもしれないです。

## ②環境の追加

プロジェクトの作成できたら、先ほどのwebページのディレクトリに移動してください。
そして、`use --add`を実行します。

```
firebase use --add
```

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

![スクリーンショット 2016-09-04 17.37.51.png](https://qiita-image-store.s3.amazonaws.com/0/53996/a9524bf1-14e6-ee06-c33b-fc55d9559ddf.png)

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

![スクリーンショット 2016-09-04 16.22.57.png](https://qiita-image-store.s3.amazonaws.com/0/53996/49d4c1a5-f08f-cb5c-160e-18ed0910af4d.png)

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

## ③環境を切り替える

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

```
firebase use development
```

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

![スクリーンショット 2016-09-04 17.46.19.png](https://qiita-image-store.s3.amazonaws.com/0/53996/b3b02703-5d00-3a56-bd92-a5a5114b4be9.png)

あとは、普段通りに開発し、公開するときは、`firebase deploy`でokです。
で、また環境を切り替えたかったら`firebase use　環境名`です。

ちなみに、環境の設定ファイルは`.firebaserc `です。名前などを忘れたら、ここをみて確認できます。
![スクリーンショット 2016-09-04 17.49.59.png](https://qiita-image-store.s3.amazonaws.com/0/53996/a21be5bd-9380-3e63-86f8-f4ffcae94844.png)

# CI連携

ここに書くと長くなりそうなので、[こちら](http://qiita.com/gupuru/items/5f1b0f6256d3f6ea17ab)に書きました！
GitHubにpushされるとCIが動き、通ったらFirebase Hostingにdeployする流れを書いています。

# カスタムドメインの設定

ここに書くと長くなりそうなので、[こちら](http://qiita.com/gupuru/items/dc453a15147e2e2a3578)に書きました！

# まとめ

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