Hosting
vue.js
Firebase
quasar-framework

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

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

終わりに

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

それではー