Web備忘録 プログラミングを中心に技術的な事柄を忘れないように書き残します。

CircleCI で Firebase Hosting, CloudFunctions をビルド&デプロイする方法

CircleCI で Firebase Hosting, CloudFunctions をビルド&デプロイする方法
目次

CircleCI に Firebase のデプロイしたい

Firebase(Hosting, CloudFunctions) へのデプロイを CircleCI を通じて行う方法をまとめます。

GitHub の master ブランチへプッシュが行われると自動的にビルドとデプロイを行えるようにします。

前提

本記事で紹介する手順では以下の環境を前提とします。

  • npm を使用
  • Firebase Hoting, CloudFunction を使用(Storage, Firestore も同じ方法で可能)
  • npm run build でビルドが実行される
  • master ブランチにプッシュされるとビルドしてデプロイする

また、ビルド、Firebase プロジェクトのデプロイまではローカルで完結できるところまで進めてください。

上のページにそれぞれデプロイまでの手順をまとめています。

CircleCI については上のページを参考にどうぞ。

準備

firebase-tools をローカルにインストール

$ npm install --save-dev firebase-tools

firebase-tools について、グローバルにインストールして使っていると思いますが CircleCI を使う場合は、ローカルにインストールしておかないといけません。そうしないと CircleCI の仮想環境で firebase コマンドが使えません。

Firebase デプロイ用のトークンを取得 & 設定

$ firebase login:ci

Visit this URL on any device to log in:
[認証用URL]

Waiting for authentication...

+  Success! Use this token to login on a CI server:

[ここにトークンが表示]

Example: firebase deploy --token "$FIREBASE_TOKEN"

firebase login:ci で CI用のトークンが取得できます。このトークンを Example にある通りデプロイコマンドに埋め込むか、CircleCI 上で環境変数として設定して参照するか、何らかの方法で渡してやる必要があります。

今回は直接デプロイコマンドに埋め込みます。

.circleci/config.yml の書き方

CircleCI の設定ファイルの書き方をまとめます。

version: 2
jobs:
  build_deploy_master:
    docker:
      - image: circleci/node:10.16.0-browsers
    steps:
      - checkout
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}-{{ checksum "functions/package.json" }}
            - v1-dependencies-
      - run:
          name: npm install
          command: npm i && cd functions && npm i
      - save_cache:
          paths:
            - node_modules
            - functions/node_modules
          key: v1-dependencies-{{ checksum "package.json" }}-{{ checksum "functions/package.json" }}
      - run:
          name: build Client and Functions
          command: npm run build
      - run:
          name: deploy to Firebase Hosting and Functions
          command: ./node_modules/.bin/firebase deploy --token "[ここに取得したトークンを入力]"

workflows:
  version: 2
  build_deploy_master:
    jobs:
      - build_deploy_master:
          filters:
            branches:
              only: master

環境は Node.js 10.16.0 にしています。functions の関係でバージョンを10にしないといけなかったのでこうしています。

その他詳しい説明は以下の通りです。

依存関係をキャッシュをリストア

依存関係のキャッシュ – CircleCI

CircleCI でデプロイするたびに依存関係をインストールすると処理時間が余計にかかります。CircleCI は処理時間に対して費用が掛かるので処理時間は短いほうがより良いです。

ということで CircleCI で依存関係をキャッシュするようにしましょう。

Firebase Cloud Functions を使う場合、例えば Hosting 用の依存関係と別に Functions 用の依存関係を別途インストールしなければなりません。この場合、両方の依存関係をまとめてキャッシュしなければなりません。

steps:
    - checkout
    - restore_cache:
        keys:
        - v1-dependencies-{{ checksum "package.json" }}-{{ checksum "functions/package.json" }}
        - v1-dependencies-

したがって上記のように、package.json, functions/package.json 両方のチェックサムをまとめてキーにします。

依存関係のインストールとキャッシュ

steps:
    - checkout
    # ...
    - run:
        name: npm install
        command: npm i && cd functions && npm i
    - save_cache:
        paths:
        - node_modules
        - functions/node_modules
        key: v1-dependencies-{{ checksum "package.json" }}-{{ checksum "functions/package.json" }}

npm install を実行しますが、functions 以下の依存関係もインストールを忘れないようにします。

インストール後はキャッシュします。キャッシュ時のキーはリストア時と当然同じものを使わないといけません。

ビルド

steps:
    - checkout
    # ...
    - run:
        name: build Client and Functions
        command: npm run build && cd functions && npm run build

ビルドもビルド用コマンドを実行します。Cloud Functions のビルドも忘れずに行います。

デプロイ

steps:
    - checkout
    # ...
    - run:
        name: deploy to Firebase Hosting and Functions
        command: ./node_modules/.bin/firebase deploy --token "[ここに取得したトークンを入力]"

デプロイは firebase deploy でOKですが、取得したトークンを渡してやる必要があります。これがないとログイン失敗でエラーになります。

また firebase コマンドは参照できないので、node_modules にあるローカルのツールを使用します。

これでデプロイまでうまくいくはずです。

あとは必要に応じてテストを挟むとよいかもしれません。

以上。

参考URL

Javascriptカテゴリの最新記事