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

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

終わりに

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

それではー