くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

CircleCIでFirebaseへ自動デプロイ(Hosting+Funcsions)

Nuxt.jsでアプリをSSRなアプリを作っているけど、
Gitでmasterにpushしたら、CircleCIで自動でデプロイしてほしいので、いろいろ調べたときの備忘録

Hostingだけの設定はあるけど、HostingとCloud Functionsを同時にする記事がなかったので、結構ハマった。。

ディレクトリ構成

ディレクトリ構成はこんな感じ

  • srcDirも変更しているし、
  • functionsのディレクトリにも、package.jsonがある
.
├── 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"

ハマったポイント

  1. run: cd functionsで移動してたけど、次のステップでは無効になっていて、functionsでnpm installできていないかった
  2. キャッシュのパスをhostingのほうしか指定していなくて、リストアがおかしい感じになってた
  3. .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"

以上!!

参考にしたサイト様