Vue.js によるアプリを Firebase で Hosting する最短の道

# はじめに

Firebase のホスティング、ほんとありがたいです。開発時とか小さなサービスなら実質無料でいけちゃう感じです。

というわけで、vue-cli の webpack テンプレートで作った Vue.js によるアプリを Firebase で Hosting する最短の道をみてみます。

# 準備

- Node.js と npm をインストールしてください。
https://nodejs.org/en/
この記事は、8.10.0 LTS で検証しています。

- vue-cli をインストールしてください。

```
$ npm i vue-cli -g
```

- Firebase のプロジェクトを用意してください。

- Firebase CLI をインストールしてください。

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

- Firebase のアカウントと紐付けてください。

```
$ firebase login
```

# Vue アプリを作成する

```
vue init webpack ＜フォルダ名＞
```

いくつか選択肢が出て答えを求められます。下のように答えたとして話をすすめます。

```
? Project name 適当
? Project description A Vue.js project
? Author 内緒 <内緒>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
```

### ビルド

デプロイできる形にビルドします。

Vue のテンプレートがデプロイ用のセッティングを自動で作ってくれているので、それを利用します。

```
$ cd ＜フォルダ名＞
$ npm run build
```

この状態で＜フォルダ名＞の下は以下のようになります。dist という名前のフォルダにデプロイするべきものが入ります。

```
.
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── dist
│   ├── 404.html
│   ├── index.html
│   └── static
│       ├── css
│       │   ├── app.30790115300ab27614ce176899523b62.css
│       │   └── app.30790115300ab27614ce176899523b62.css.map
│       └── js
│           ├── app.b22ce679862c47a75225.js
│           ├── app.b22ce679862c47a75225.js.map
│           ├── manifest.2ae2e69a05c33dfc65f8.js
│           ├── manifest.2ae2e69a05c33dfc65f8.js.map
│           ├── vendor.7fed9fa7b7ba482410b7.js
│           └── vendor.7fed9fa7b7ba482410b7.js.map
├── firebase.json
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── router
│       └── index.js
└── static
```

# Firebase の初期化

hosting ができるように初期化します。

```
$ firebase init hosting

     🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

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

  ＜フォルダ名＞


=== 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: ＜Firebase のプロジェクト名＞ (＜Firebase のプロジェクト名＞)

=== 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)? No
✔  Wrote dist/404.html
? 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!
```

このとき重要なのは

```
? What do you want to use as your public directory? dist
```
と聞かれたとき、デフォルトの public じゃなく、dist フォルダを指定することです。

firebase.json という名前のファイルが以下のような内容で作られます。

```
firebase.json
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
```

# デプロイ

コマンド一発です。

```
$ firebase deploy

=== Deploying to '＜Firebase のプロジェクト名＞'...

i  deploying hosting
i  hosting: preparing dist directory for upload...
✔  hosting: 10 files uploaded successfully

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/＜Firebase のプロジェクト名＞/overview
Hosting URL: https://＜Firebase のプロジェクト名＞.firebaseapp.com
```

以下のアドレスでホストされます。
https://＜Firebase のプロジェクト名＞.firebaseapp.com

![SU1.png](https://qiita-image-store.s3.amazonaws.com/0/73493/a59e6726-569a-6f24-e7b1-d4697aa46d1e.png)

# Quasar でやってみる

Quasar も中身は vue なので、やり方はほぼ同じです。

- Quasar のアプリを作成します。

```
$ quasar init ＜フォルダ名＞
```

- ビルド

```
$ cd ＜フォルダ名＞
$ quasar build
```

- Firebase の初期化

```
$ firebase init hosting

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

- デプロイ

```
firebase deploy
```
![SU2.png](https://qiita-image-store.s3.amazonaws.com/0/73493/9c493ed0-d312-b35e-5a49-71c3fda47ec8.png)

# 終わりに

[Node.js によるアプリを Firebase で Hosting する最短の道](https://qiita.com/Satachito/items/c175645644af759cc71c)で、Node.js による API を Firebase.functions を使って実現する方法を紹介しましたが、これとあわせれば、フロントもバックエンドも JS みたいな環境を簡単に構築できますね。

それではー