Edited at

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

More than 1 year has passed since last update.


はじめに

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 みたいな環境を簡単に構築できますね。

それではー