Nuxt.jsでアプリをSSRなアプリを作っているけど、
Gitでmasterにpushしたら、CircleCIで自動でデプロイしてほしいので、いろいろ調べたときの備忘録
Hostingだけの設定はあるけど、HostingとCloud Functionsを同時にする記事がなかったので、結構ハマった。。
ディレクトリ構成
ディレクトリ構成はこんな感じ
. ├── app ... NuxtのsrcDir │ ├── assets │ ├── components │ ├── layouts │ ├── middleware │ ├── pages │ ├── plugins │ ├── static │ └── store ├── functions ... Firebase FunctionのsrcDir │ ├── index.js │ └── package.json ├── nuxt.config.js └── package.json
CI用のトークンを取得しとく
CIなどでfirebaseコマンドを使う場合には、CI用のトークンを利用する必要がある。
なので、まずは、ログインして、トークンを払い出す
$ firebase login:ci
circleci/config.ymlの中身
Firebase HostingとCloud Funtionsを同時にfirebase deployする設定は、こんな感じ。
version: 2 jobs: build: # 自分の環境のNode.jsと同じバージョンのDockerイメージを使う docker: - image: circleci/node:11.9.0 # 対象のブランチはmasterのみ branches: only: - master working_directory: ~/repo # 環境変数の設定。WebUI上でも設定できるけど、YMLでもできる。 environment: FIREBASE_PROJECT: <firebaseのプロジェクトID> FIREBASE_TOKEN: <firebase login:ciで払い出したトークン> # ここからが処理の始まり steps: # リポジトリをチェックアウトする - checkout ##################################################### ### BUILD ##################################################### # キャッシュのリストア処理。node_modulesを毎回installするのは重いので、キャッシュしとく - restore_cache: keys: - v1-dependencies-{{ checksum "package.json" }}-{{ checksum "functions/package.json" }} # fallback to using the latest cache if no exact match is found - v1-dependencies- # packageのインストール - run: npm install # functionsのほうもnpm installする - run: cd funcsions && npm install # デプロイのときにfirebaseコマンドが使えるようにinstall - run: npm install -D firebase-tools # キャッシュの保存処理。funstionsにもあるので、pathsに両方記載する - save_cache: paths: - node_modules - functions/node_modules key: v1-dependencies-{{ checksum "package.json" }}-{{ checksum "functions/package.json" }} # いざ、ビルド - run: npm run build ##################################################### ### DEPLOY ##################################################### # インストールしたfirebase-toolsは、node_modules/.bin/firebaseにあるので、それを使う # .firebasercにaliasを利用している場合は、firebase useする - run: node_modules/.bin/firebase use release --project "$FIREBASE_PJ" --token "$FIREBASE_TOKEN" - run: node_modules/.bin/firebase deploy --project "$FIREBASE_PJ" --token "$FIREBASE_TOKEN"
ハマったポイント
run: cd functionsで移動してたけど、次のステップでは無効になっていて、functionsでnpm installできていないかった- キャッシュのパスをhostingのほうしか指定していなくて、リストアがおかしい感じになってた
.firebasercでaliasを使ってたのに、firebase useを使ってなかった
以下のような感じにしていたけど、なかなかうまくいかず。。 ハマったポイント満載だった。。
だめな例。ハマる例。
steps: - checkout ##################################################### ### BUILD for Hosting ##################################################### # キャッシュのリストア処理 - restore_cache: keys: - v1-dependencies-{{ checksum "package.json" }} - v1-dependencies- - run: npm install - run: cd funcsions && npm install - run: npm install -D firebase-tools # キャッシュの保存処理 - save_cache: paths: - node_modules key: v1-dependencies-{{ checksum "package.json" }} # いざ、ビルド - run: npm run build ##################################################### ### BUILD for Function ##################################################### # functions配下に移動 ・・・ ⇐ この時点では、「~/repo/functions」移動した - run: cd functions # キャッシュのリストア処理 ・・・ ⇐ この時点では、「~/repo」に戻ってる!! - restore_cache: keys: - v1-dependencies-{{ checksum "package.json" }} - v1-dependencies- - run: npm install - run: npm install -D firebase-tools # キャッシュの保存処理 # !! cdが戻っているので、pathsは「~/repo/node_modules」だけ!! # !! さらに、keyがHostingの方と同じにっているので、キャッシュも意味なし!! - save_cache: paths: - node_modules key: v1-dependencies-{{ checksum "package.json" }} # デプロイのために、元の場所にcdした(つもりになってた。。) - run: cd ../ ##################################################### ### DEPLOY ##################################################### - run: node_modules/.bin/firebase deploy --project "$FIREBASE_PJ" --token "$FIREBASE_TOKEN"
以上！！
