Firebaseでデプロイしよう！

# 00. 初めに
　本記事は、Firebaseでアプリをデプロイする手順をまとめたものです。
自己学習の一環でアプリを作ったのですが、折角なのでデプロイすることに。その際にFirebaseを利用したので、手順を備忘録にしてみました。

　Firebase使ったことないけど、気になっている、使ってみたい . . . そんなあなたのお役に立てれば幸いです。
そもそもFirebaseとは何か、という説明のほかの記事[^1]に譲り、ここでは手順のみを紹介したいと思います。

尚、適切でない表現や誤字・脱字などありましたら、ご指摘いただけると嬉しいです。

# 01. ツールをインストールしよう
以下の環境で期待通り動作することを確認しています。(2019/11現在)

　OS : Windows10 Home
　Node : v11.13.0
　npm : v6.11.3

Nodeのインストールは[こちらから](https://nodejs.org/ja/download/)(Nodeを入れる段階でnpmも付いてきます)。

# 02. ディレクトリを用意しよう
用意するファイル：
　・index.html(デプロイしたいhtmlファイル)
　・その他

　ファイルはお好みで色々用意してOKですが、とりあえずindex.htmlだけあれば大丈夫です。
適当なところに「public」というディレクトリを作ったら、その中にindex.htmlを入れます。publicと同じ場所にもう一つ、好きな名前でディレクトリを作って、そこにpublicを放り込みます(ここでは、deployと名付けておきます)。

それが終わったら、インストールしたnpmを早速使っていきましょう！コマンドプロンプトを起動して、作成したディレクトリまで移動してから、`npm init -y`と打ち込みます。

```shell
~/Desktop/deploy > npm init -y
Wrote to C:\Users\username\Desktop\deploy\package.json:

{
  "name": "deploy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```
以上の説明までで、ディレクトリ構造は ↓ みたいな感じになればOKです！★が付いているファイルが必須のものです(package.jsonは、上記のコマンドを入力すると作成されます)。

```
deploy/
     ┣━ package.json ★
     ┗━ public/ ┳ index.html ★
                ┠ styles.css
                ┗ others/
```


# 03. Firebaseのプロジェクトを作ろう
お次は、[Firebaseの公式サイト](https://firebase.google.com/?hl=ja)からプロジェクトの作成を行います。
コンソールへ移動をクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/490771db-f846-a419-c8ed-b2607d62e8f9.png)

↓ プロジェクトを追加を選択して、新規プロジェクトを作成してきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/eeaefb5d-b737-7f5c-d61a-6c7f0cd3c14f.png)

↓ プロジェクト名を入力します。今回は、「my-first-deploy」と名付けました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/08871227-6b90-59d7-90a4-adf10d6a6950.png)

↓ 「続行」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/55538a5e-320c-0e09-4206-5caa57c96ad5.png)

↓ 「Default Account For firebase」を選択して、「プロジェクトを作成」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/cd528414-41e3-a4a4-29e9-e046675b3270.png)

↓ の画面が出れば、無事プロジェクトを作成できてます！ひとまず「続行」を押して下さい。リダイレクト後の画面にまた戻ってくるので、開いたままにしておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/1afc0de8-586d-4659-4fb0-a8a454358bc6.png)


# 04. パッケージをインストールしよう
　以下の作業は、先ほど作成したディレクトリの中で行いましょう。
まずは、プロジェクトでFirebaseを扱うためのパッケージをインストールします。

```shell
~/Desktop/deploy > npm install --save firebase
```
特に拘りが無い場合は、`--save`オプションを付けてローカルインストールして下さい。ただし、npmのバージョンが 5.0.0以上なら`--save`は不要です[^2]。

お次は、`firebase-tools`をインストールします(こちらはグローバルインストールしないと上手くインストールできなかったので、`-g`オプションを付けました)。

```shell
~/Desktop/deploy > npm install -g firebase-tools
```
必要なパッケージが入れ終わったら、ログイン（Firebaseの起動？）をします。
プライバシーポリシーに則って、匿名で情報を収集していいか聞かれていますね、多分。yesでもnoでもどちらでも大丈夫なので、お好きな方で！


```shell
~/Desktop/deploy > firebase login
i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? (Y/n)
```

↓ 入力すると、おもむろにブラウザが立ち上がってGoogleアカウントへのアクセスの要求をされます。
Firebaseのプロジェクトを作るGoogleアカウントを選択します。
![firebase_auth01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/657cc04c-bab9-e691-d3bf-827049112bf6.png)

↓ 「許可」をクリック。
![firebase_auth02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/601a2378-cf66-c825-8753-565df9a878d6.png)

↓ 下記の画面が出れば、ログイン成功！この画面は閉じてもらって大丈夫です。
![firebase_auth03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/a6d087b9-94f8-c867-f245-1c8adc733f21.png)


コンソールにも、下記のような`Success!`の文言が出ているかと思います！

```shell
Visit this URL on this device to log in:
https://accounts.google.com/(中略)
Waiting for authentication...

+  Success! Logged in as ***@gmail.com
```

# 05. プロジェクトを初期化しよう
　ではコンソールに戻って、プロジェクトをFirebaseプロジェクトとして、初期化しましょう！
コンソールに`firebase init`と打つと、「FIREBASE」というイカした（死語）AAと、my-react-app内でFirebaseプロジェクトを初期化していいか聞かれます。（勿論yesで！）

```shell
~/Desktop/deploy > firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\Users\username\Desktop\deploy

? Are you ready to proceed? (Y/n)
```
今回は、デプロイだけを目的にしているので、Hostingを選びます。
矢印キーでカーソルを移動させて、スペースキーで「Hosting」を選択して、Enter!

```shell
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
 ( ) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules
```

↓ 続いて、対象のFirebaseのサイト側で作成したプロジェクトを選択します。既存のプロジェクトを使うので「Use an existing project」を選択。

```shell
=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project
```
↓ 先ほど作成した「my-first-deploy」を選んで下さい。(プロジェクト名の後に付いている文字列は無視して大丈夫です)

```shell
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: (Use arrow keys)
> my-first-deploy-5732d (my-first-deploy)
  sample-project01-9cf12 (sample-project01)
  sample-project02 (sample-project02)
  sample-project03-96663 (sample-project03)
(Move up and down to reveal more choices)

```

↓ デプロイするディレクトリを選択します。デフォルトのpublicディレクトリを使用するので、そのままEnter。

```shell
=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public)
```
↓ SPA[^3]として設定するかを選択できます[^4]。何かしらフレームワークを使っていれば別ですが、基本はNoでいいと思います。

```shell
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
```
↓ 既に存在しているindex.htmlを上書きするか選択できます。当然Noです。上書き、ダメ、ゼッタイ。

```shell
+  Wrote public/404.html
? File public/index.html already exists. Overwrite? (y/N)
i  Skipping write of public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

+  Firebase initialization complete!
```

最終的にディレクトリの中身は、こんな感じになっていると思います。
先ほどと比べて追加されたのは、●の付いた4~5コのファイルやディレクトリですね。
(.で始まるファイルは隠しファイルなので、設定によっては見えないようになっているかもしれません。)

```
deploy/
     ┣━ package.json
     ┣━ package-lock.json ● (無い場合もあります)
     ┣━ firebase.json ●
     ┣━ public/ ┳ index.html
     ┣          ┠ styles.css
     ┣          ┗ others/
     ┣━ node_modules/ ● ━ ...
     ┣━ .firebase ●
     ┗━ .firebase ●
     ┗━ .gitignore ●
```



# 06. デプロイしよう
いよいよ作業も大詰めです！先ほどログインをしたサイトに戻りましょう。
↓ Project Overviewを選択して `</>`のマークをクリック
![firebase_hosting01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/97b201da-1d49-d760-bd7e-f2fc0c6e863b.png)


↓ 今回作ったFirebaseプロジェクトに登録するアプリの名前を入力します。イイ感じの名前をつけてみましょう！
　入力がおわったら、「アプリを登録」をクリック。

![firebase_hosting02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/17e1f0d9-6938-519d-4ba5-cbf2fc7a4905.png)


↓ 表示されたJavaScriptのコードをコピーして、 `public/index.html`の`</body>`の直前に貼り付け、「コンソールに進む」を選択。

![firebase_hosting03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/ac40c02a-ab88-44df-23ee-675bb0f7be11.png)


それでは最後に、下記コマンドでアプリをデプロイしましょう！！

```shell
~/Desktop/deploy > firebase deploy
$ firebase deploy

=== Deploying to 'my-first-deploy-5732d'...

i  deploying hosting
i  hosting[my-first-deploy-5732d]: beginning deploy...
i  hosting[my-first-deploy-5732d]: found 15 files in public
+  hosting[my-first-deploy-5732d]: file upload complete
i  hosting[my-first-deploy-5732d]: finalizing version...
+  hosting[my-first-deploy-5732d]: version finalized
i  hosting[my-first-deploy-5732d]: releasing new version...
+  hosting[my-first-deploy-5732d]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/*****/overview
Hosting URL: https://*****.firebaseapp.com
```
Deploy complete! が表示されれば、成功です！
早速 Hosting URL からデプロイしたサイトを見てみましょう！


また、サイトはプロジェクトからも確認できます。「Hosting」を選択して表示されるURLからもアクセス可能です。
![スライド6-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314204/11b2d27a-d108-56a4-e7f1-12f315503c70.png)





# 07. デプロイを取り消してみよう
　公開したアプリを放置するのはオススメできません。何かしら作業を続けるのでなければ、一旦デプロイを取り消しましょう[^5]。
取り消しはサクッとできるので、面倒くさがらず、下記のコマンドを実行してみましょう！

```shell
~/Desktop/deploy > firebase hosting:disable
? Are you sure you want to disable Firebase Hosting?
  This will immediately make your site inaccessible! (Y/n) Yes
+  Hosting has been disabled for my-first-deploy. Deploy a new version to re-enable.
```
↑ Firebase Hostingを使えなくして良いか聞かれます。`y`を入力すると、デプロイは取り消されますが、暫くは見ることが出来るようです。仮に取り消しても、もう一度

```shell
~/Desktop/deploy > firebase deploy
```
とやれば、再びデプロイできます！ほんと便利！！


# 08. もっとFirebaseを使ってみよう
　Firebaseにはもっと様々な機能があります。今回はホスティングという機能を使ってデプロイしましたが、通知やログインなどのバックエンドの処理をサポートする機能が満載です。詳しくは参考に載せた記事をご覧下さい。

最後までお読みいただき、ありがとうございました。


# 参考
この記事を書くにあたり、下記の内容を参考にしました。
投稿者の方にこの場を借りて感謝申し上げます。
[^1]: [Firebaseの始め方](https://qiita.com/kohashi/items/43ea22f61ade45972881)
[^2]: [npm install時に「--save」オプションはいらない](https://qiita.com/havveFn/items/c5beda8572aa8c1e6be6)
[^3]: [SPA(Single Page Application)の基本](https://qiita.com/takanorip/items/82f0c70ebc81e9246c7a)
[^4]: [firebase init 時に聞かれる「Configure as a single-page app (rewrite all urls to /index.html)?」は選択によって何がどう変わるのか](https://qiita.com/megane42/items/96356a88d67fcc1499ee)
[^5]: [Firebaseでデプロイしたサイトを削除する方法](https://qiita.com/koyo-miyamura/items/be874197f8995b579e01)