Firebase入門

###目次
　・Firebase Hostingの特徴
　・環境構築
　・デプロイの方法
##Firebase　Hostingの特徴
 Firebase Hosting にデプロイするメリットは以下の通りです。
　・デプロイが簡単
　・GitHub のプライベートリポジトリでファイルを管理可能
　・表示速度が速い
Firebase Hosting はコマンドを実行するだけで簡単にデプロイできます。さらに Netlify や GitHub Pages に比べて、表示速度が速いです。表示速度はユーザーにとって大事な要素となるため、表示速度の速さは Firebase Hosting の強みとなっています。

一方で以下のようなデメリットがあります。

・他のサービスと連携し、簡単に自動デプロイする仕組みが Firebase にない
・GitHub のリポジトリとの連携が、初期搭載されていない
Netlify や GitHub Pages と比べ、Firebase Hosting には自動デプロイの機能が初期搭載されていません。今までより難易度は上がりますが、GitHub Actions などの連携ツールを使うことで、自動デプロイの環境を構築できます。

##環境構築
####新規プロジェクトの作成
[Firebase](https://firebase.google.com/?hl=ja)にアクセスし、LP公開用の新規プロジェクトを作成
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/3478d578-9067-11c6-6bbf-86805dd2d7e1.png)
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/190b3eba-c4c7-5276-ffd1-40b1481b28e9.png)
プロジェクト名を入力
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/7d9472b3-2cd6-e543-b677-13804a0396f5.png)
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/3df67e8c-b818-0346-7e8b-a75a3579f5e7.png)
以下のようなコンソール画面が表示されます。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/cb0b8643-ace8-69ca-c825-b9ebcf77aecd.png)
デフォルト設定がアメリカになっているので、日本（東京）に設定します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/51fd7452-e7f0-3604-2510-47667554a470.png)
asia-northeast1に変更します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/7fb7bbe3-4a65-53b6-0e0d-467f2dcf973c.png)
コマンドラインで Firebase が操作できるように、yarn コマンドで firebase tools をインストールします。

以下のコマンドをターミナルで実行してください。

```
yarn global add firebase-tools
```
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/33830d7e-7f5d-0c3e-0383-fe0f476e7f9d.png)
Firebase へのアクセスを許可してください。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/cc4a440c-0642-1cdb-6fe8-467647fe60c5.png)
下のような画面がブラウザに表示されれば成功です。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/0be2e16e-4d7f-b31f-33ba-5a5fc9f1f0d5.png)
Firebase のアカウントをターミナル上で紐付けることができました。次は作業フォルダと 先ほど作成した Firebase のプロジェクトを紐付けます。

まずは、以下のコマンドを実行してください。

```
firebase init
```
上下の矢印キーで動かし、Hosting をスペースキーで選択して Enter キーを押しましょう。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/96d6c3ab-de10-7e9b-bb1f-aff91bf9ec63.png)
 *Use an existing project* を選んで Enter キーを押してください。
 作成したプロジェクトを選択し、Enter キーを押しましょう。
 FIrebase Hosting の設定に関する質問が出てきます。全て Enter キーを押して解答しましょう。
 最後に Firebase initialization complete! と表示されれば成功です。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/613cd538-2f85-9543-946c-3ba602d5259b.png)
以下のようなフォルダやファイルが作成されます。
![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/d7f3fab8-d7ec-ec7b-6e9e-545a13f1b172.png)
public フォルダと firebase.json です。public フォルダが Firebase Hosting にデプロイするフォルダになります。

firebase.json は Firebase Hosting などの設定をするファイルです。今回はこのままで構いません。

今から Firebase Hosting にデプロイします。

まず public フォルダ内のファイルを全て削除し、デプロイしたいファイルを全て public フォルダに移動します。
下のコマンドをターミナルで実行するだけで、簡単に Firebase Hosting にデプロイできます。

```
firebase deploy --only hosting
```
発行される URL ~~~~.firebaseapp.com をブラウザで開き、デプロイしたファイルが公開されれば成功です。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/ebe2c214-1391-4bfd-9075-67e8963f7bfa.png)
Firebase Hosting へのデプロイは完了です。Firebase のコンソール画面でも、デプロイの状況が確認できます。