Nuxt.js x Firebase x SSRをワンコマンドでビルド

経緯

現在個人で作っているNuxt.js x Firebase x SPAのサイトをSSR対応する際に
ちょうどよく、Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する
の記事が掲載。記事どおりの対応で成功。感謝。

この記事はそのうえでbuild & deployを
yarn run releaseのみで対応できたのでメモがわりに。

ご指摘あればよろしくお願いします。

todo

1. package.json作成

project rootのターミナルにて

# package.jsonの作成
$ yarn init

# npm追加
$ yarn add cpx mkdirp npm-run-all rimraf

2. package.jsonにscript等追記

{
  ....,
  "private": true,
  "scripts": {
    "release:install:src": "cd src && yarn install && cd ../",
    "release:install:functions": "cd functions && yarn install && cd ../",
    "release:build": "cd src && yarn run build && cd ../",
    "release:clean": "rimraf ./public/*",
    "release:copy:build": "cpx \"./functions/nuxt/dist/**\" ./public/assets",
    "release:copy:static": "cpx \"./src/static/**\" ./public",
    "release:deploy": "firebase deploy",
    "release": "npm-run-all -s release:build release:clean release:copy:build release:copy:static release:deploy"
  },
  "engines": {
    "node": "6.11.5",
    "npm": ">= 3.10.10"
  },
  "dependencies": {
    "cpx": "^1.5.0",
    "mkdirp": "^0.5.1",
    "npm-run-all": "^4.1.2",
    "rimraf": "^2.6.2"
  }
}

一応enginesも追記。firebase Functionに合わせとく。

3. 完成 & 実行

この状態で

$ yarn run release

で正しくdeployされるはずです。イエーイ。

雑感

• cd src && yarn install && cd ../頭悪そう。shellもっと使えるようになりたい
• releseコマンド内長い
• yarn workspaceとかlernaで綺麗に実現できるのか？今やるには学習コスト高い。
• SSR表示まで重い。チューニングいる。