Firabase Hostingでスタティックなwebページをデプロイする

WEBページを確認するテストサーバを立てるのが手間だったので、
Firabase Hostingでデプロイするやり方のメモ。

#Firebaseのプロジェクトを作成する
[Firebase](https://firebase.google.com/?hl=ja)
<img width="1259" alt="スクリーンショット 2019-10-31 13.49.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/a915cfc3-2770-5652-a5ac-61d87c3cecfb.png">

`使ってみる`>`プロジェクトを追加`から新しくプロジェクトを作成する

#Firebaseのプロジェクトの設定
[Firebase コンソール](https://console.firebase.google.com/u/0/)を開いて
`開発`>`Hosting`を選択して「始める」をクリック
<img width="1007" alt="スクリーンショット 2019-10-31 13.52.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/5c72e265-65bd-1d1a-378a-9cb462ddb362.png">

<img width="1085" alt="スクリーンショット 2019-10-31 13.56.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/078c7f96-4fe5-5503-c574-c1c198422af9.png">
`次へ`を押す

<img width="1087" alt="スクリーンショット 2019-10-31 13.56.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/42d2a057-4572-b67e-01ba-c4865906a6d3.png">
`次へ`を押す

<img width="1088" alt="スクリーンショット 2019-10-31 13.56.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/04219ec7-bc6a-8dc0-7ebf-5a0a6652d8f6.png">
`コンソールに進む`を押す

コンソール画面
<img width="1006" alt="スクリーンショット 2019-10-31 14.18.38のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/85039662-7812-851f-aaed-0c728cebf189.png">


ドメインのところにあるURLをクリックすると次のような画面が表示される
※Firebase Hostingに何もデプロイさていないため
<img width="778" alt="スクリーンショット 2019-10-31 14.23.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/66084b94-214a-c2ee-9d9f-9af860ed2504.png">

#作業ディレクトリとFirebaseプロジェクトを紐付ける
紐付けるために任意の作業ディレクトリを作成

```console
$ mkdir my-firebase-project
```

作業ディレクトリに移動して次のコマンドを実行

```console
$ cd my-firebase-project
$ firebase init
```

次の画面になるので、十字キーで`Hosting`に合わせ、スペースボタンを押してONにしたらEnterを押す
<img width="570" alt="スクリーンショット 2019-10-31 14.47.20のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/bce2fd20-55c9-4c3a-9e80-d63b05a36b63.png">

`? Please select an option:`と聞いてくるので、`Use an existing project`を選択し、Enterを押す
<img width="567" alt="スクリーンショット 2019-10-31 14.51.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/6f62e0ee-3dbe-3402-3865-5004de7d111a.png">

`? Select a default Firebase project for this directory`と聞いてくるので、対象のfirebaseプロジェクトを選択しEnterを押す
<img width="566" alt="スクリーンショット 2019-10-31 14.54.22のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/4904f0a9-19b8-7ca4-fce5-f41293258403.png">

`? What do you want to use as your public directory?`と聞いてきたら、今回はデフォルトの`public`ディレクトリを指定するため、そのままEnterを押す
※Firebase Hostingでデプロイするディレクトリをどれにするか聞かれてる

`? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)`と聞かれたら`N`と入力してEnterを押す
<img width="569" alt="スクリーンショット 2019-10-31 15.00.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/cd00e3d3-e170-001f-d225-628590d7bcc9.png">

`Firebase initialization complete!`と表示されたらOK
<img width="571" alt="スクリーンショット 2019-10-31 15.02.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/301b59b8-8dc8-de53-a1df-9c38330d7b45.png">


#ディレクトリを確認
my-firebase-projectのディレクトリをエディタで開いてディレクトリを確認する
自動でpublicの中にindex.htmlと404.htmlが生成されます。
<img width="235" alt="スクリーンショット 2019-10-31 15.05.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/0702df62-8597-3d78-5f9f-2d7b9d3cf630.png">
公開用ファイルは`public`の中に配置させる。

#ローカルサーバで実行
`firebase serve`コマンドを使って、ローカルでテストができる

```console
$ firebase serve
```

コマンド実行すると次のようになるので、`http://localhost:5000`にアクセスしてみる
<img width="570" alt="スクリーンショット 2019-10-31 15.11.38のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/64ad91cc-996d-101f-cc17-aa7c94d312dc.png">

index.htmlが表示されていればOK
これを使ってFirebase Hostingサーバにデプロイする前に動作確認をしたりできる
<img width="683" alt="スクリーンショット 2019-10-31 15.14.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/9da591d9-6f9a-e277-fa6f-8427dbcf670c.png">

#デプロイする
`public`ディレクトリに移動して、Firebase Hostingにデプロイする

```console
$ cd public
$ firebase deploy
```

以下のようになればデプロイ完了
<img width="569" alt="スクリーンショット 2019-10-31 15.18.17のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/8b9aec78-86c0-9b0e-e901-8876bf1b0774.png">
Hosting URLにアクセスしてみる


#WEBページを確認
ローカルで確認した時と同じ画面が表示されていればOK
<img width="683" alt="スクリーンショット 2019-10-31 15.14.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/9da591d9-6f9a-e277-fa6f-8427dbcf670c.png">



以上です。
Basic認証のやり方も調べないと、、、


##参考記事
https://www.topgate.co.jp/firebase04-firebase-hosting-deploy-website