Firebase Hostingに静的サイトをデプロイする手順のメモ

# 概要

この記事はFirebase Hostingを使用して静的サイトをデプロイする手順を確認したメモです。
記事の前半はシンプルなデモサイト(index.htmlファイル1つだけ)をデプロイする手順、後半はVue.jsアプリケーションのひな型をデプロイする手順になります。
Hostingを利用するにはFirebaseにプロジェクトを作成する必要がありますが、プロジェクトの作成手順は省略し作成済みの前提で進めます。

**環境**

* Windows 10 Professional
* Node.js 6.11.5
* Firabase CLI 3.18.4

**参考**

* [Firebase Hosting] (https://firebase.google.com/docs/hosting/)

# Hostingを利用するための事前準備

## firebase-toolsのインストール

プロジェクトの初期化やデプロイに使用するfirebase-toolsというコマンドラインツールをインストールします。

```text
> npm install firebase-tools --global
```

バージョンの確認

```text
> firebase -V
3.18.4
```

## 認証

Googleアカウントで認証します。途中でブラウザが立ち上がり認証画面が表示されるので認証するGoogleアカウントを選択（または入力）します。

```text
> firebase login
```

# デモサイトをデプロイする

デモサイトを作成しデプロイするまでの一連の操作を確認しました。

## プロジェクトディレクトリの作成と初期化

プロジェクトのディレクトリを作成し、

```text
> mkdir hosting-memo
> cd hosting-memo
```

`init hosting`コマンドでディレクトリを初期化します。途中でいくつか選択肢がありますがこの後で補足します。

```text
> firebase init hosting

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

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

  D:\dev\firebase-workspace\hosting-demo

? Are you ready to proceed? Yes

=== 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.

? Select a default Firebase project for this directory: project********* (project*********)

=== 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
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
+  Wrote public/index.html

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

+  Firebase initialization complete!

```

**選択肢について**

作成するプロジェクトディレクトリをFirebaseのプロジェクトに関連付けます。
この例では、既存のFirebaseプロジェクトを選択肢から選んでいます。なお、ここで関連付けなくても後からfirebase useコマンドで設定することもできます。

```text
? Select a default Firebase project for this directory:
  [don't setup a default project]
> project********* (project*********)
  [create a new project]
```

index.htmlファイルが存在する公開するディレクトリを指定します。ここではデフォルトのpublicをそのまま利用しました。指定したディレクトリにindex.htmlファイルが存在しない場合は、自動的にデモ用のファイルが生成されます。

```text
? What do you want to use as your public directory? (public)
```

## プロジェクトディレクトリの構成

初期化直後のディレクトリは下記のようになっています。publicディレクトリのindex.htmlファイルがデプロイの対象になります。

```text
/hosting-memo
  |
  +--- /public
  |      |
  |      +--- index.html
  |
  +--- .firebaserc
  |
  +--- firebase.json
```

**firebase.json**

```text
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```

## ローカルでテスト

プロジェクトディレクトリで`serve`コマンドを実行すると、ローカルサーバーが起動し、ローカル上でアプリケーションの動作確認ができます。

```text
> firebase serve

=== Serving from 'D:\dev\firebase-workspace\hosting-demo'...

i  hosting: Serving hosting files from: public
+  hosting: Local server: http://localhost:5000

// ...アクセスログが出力されます

```

## デプロイ

プロジェクトディレクトリで`deploy`コマンドを実行してデプロイします。

```text
> firebase deploy

=== Deploying to 'project********'...

i  deploying hosting
i  hosting: preparing public directory for upload...
+  hosting: 1 files uploaded successfully

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/project********/overview
Hosting URL: https://project********.firebaseapp.com
```

コンソールに表示されているHosting URLにアクセスします。下図のページは`init hosting`で自動的に生成されたデモページです。

![Welcome to Firebase Hosting.png](https://qiita-image-store.s3.amazonaws.com/0/22772/e4db1aa7-c881-1a72-21be-6f6fe1233a5d.png)

Hostingダッシュボードでデプロイされたこと（履歴）が確認できます。

![project 20180501 – Hosting – Firebase console (5).png](https://qiita-image-store.s3.amazonaws.com/0/22772/23b4a6ec-d712-b945-2532-7a7c30486dc9.png)

## サイトを停止させる

デプロイしたサイトを停止するには`hosting:disable`コマンドを実行します。（2018/05現在、ダッシュボード上では出来ないようです。）

```text
> firebase hosting:disable
? Are you sure you want to disable Firebase Hosting?
  This will immediately make your site inaccessible! Yes
+  Hosting has been disabled for project********. Deploy a new version to re-enable.
```

停止後にアクセスするとNot Foundが表示されます。

![Site Not Found.png](https://qiita-image-store.s3.amazonaws.com/0/22772/8fdfec09-e46b-668c-8d15-92a22d62b020.png)

Hostingダッシュボードでも停止していること（履歴）が確認できます。

![project 20180501 – Hosting – Firebase console (6).png](https://qiita-image-store.s3.amazonaws.com/0/22772/64580ecf-aefa-fea6-5cdb-04feb46018ff.png)

# Vue.jsアプリケーションをデプロイする

vue-cliで生成したVue.jsアプリケーションのひな型をデプロイします。

```text
> vue init webpack hosting-vue-demo
```

## ビルド

distディレクトリにビルド結果が出力されます。これらのファイルがデプロイするときにhostingにアップロードされます。

```text
> npm run build
```

```text
/hosting-vue-demo
  |
  +--- /dist
         |
         +--- /static
         |      |
         |      +--- /css
         |      |      |
         |      |      +--- app.cca059254702f9ed953b7df749673cf4.css
         |      |      +--- app.cca059254702f9ed953b7df749673cf4.css.map
         |      |
         |      +--- /js
         |             |
         |             +--- app.f16ac5c624284d30f5af.js
         |             +--- app.f16ac5c624284d30f5af.js.map
         |             +--- manifest.2ae2e69a05c33dfc65f8.js
         |             +--- manifest.2ae2e69a05c33dfc65f8.js.map
         |             +--- vendor.7fed9fa7b7ba482410b7.js
         |             +--- vendor.7fed9fa7b7ba482410b7.js.map
         |
         +--- index.html
```

## ディレクトリを初期化

`init hosting`コマンドでVue.jsアプリケーションのプロジェクトディレクトリを初期化します。

```text
> firebase init hosting

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

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

  D:\dev\firebase-workspace\hosting-vue-demo

? Are you ready to proceed? Yes

=== 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.

? Select a default Firebase project for this directory: project********* (project*********)

=== 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? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? No
i  Skipping write of dist/index.html

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

+  Firebase initialization complete!
```

**選択肢について**

公開するディレクトリを`dist`にするようにします。

```text
? What do you want to use as your public directory? dist
```

index.htmlファイルを上書きしないようにします。

```
? File dist/index.html already exists. Overwrite? No
i  Skipping write of dist/index.html
```

## ローカルでテスト

ビルドしてdistディレクトリに出力したファイルでテストします。

```text
> firebase serve

=== Serving from 'D:\dev\firebase-workspace\hosting-vue-demo'...

i  hosting: Serving hosting files from: dist
+  hosting: Local server: http://localhost:5000
```

## デプロイ

ローカルサーバーで動作確認して問題がなければ`deploy`コマンドでhostingへデプロイします。

```text
> firebase deploy

=== Deploying to 'project*********'...

i  deploying hosting
i  hosting: preparing dist directory for upload...
+  hosting: 9 files uploaded successfully

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/project*********/overview
Hosting URL: https://project*********.firebaseapp.com
```

コンソールに出力されたHosting URLにアクセスして確認します。

![hosting vue demo.png](https://qiita-image-store.s3.amazonaws.com/0/22772/f51863c9-1523-04fa-c9c2-f86e6d113162.png)