CircleCIとcontentfulの連携

最終更新 : 2021-02-08

タイトル通り、CircleCIとcontentfulを連携させた話です。

Q.そもそもなんでそんなことしたの？

A. JAMStackで作るためです。
というより、ホスティングをnetlifyじゃなくてfirebaseでやりたかったからですわ。

Q.CircleCIってなんぞや？

A. CI/CDツール。
CI/CDは、日本語でいうと「継続的インテグレーションと継続的デプロイ」。いや、わからん。
とりあえず、netlifyでやってるビルド（nuxtのnpm run generate）とデプロイ（firebaseのfirebase deploy）を何らかイベントをトリガーとして自動でやってくれるサービス。
今回、このトリガーはGithubへのpushとcontentfulでのデータの更新。

Q. で、どうやるの？

A. 作業ディレクトリに「.circleci/config.yml」を作る。
まあ、コレ自体はちょっとググって真似て書いたらできたんだけど、contentfulと連携したときにちょっとうまく行かなかったわけですわ。
まあ、今後もやることあるかもしれないんでメモ代わりってわけですわ。

1.firebaseの準備をする

CircleCIのコンテナからデプロイをするために準備が必要です。

firebaseであれこれするためには、firebase-toolsが必要なのは周知の事実ですが、
CircleCIのコンテナに最初からグローバルインストールされてるなんてことはないわけです。

npm i --save-dev firebase-tools

してpackage.jsonに入れときましょう。

あと、firebaseで色々やるにはブラウザからログインしないと行けないわけですけど、これも自動化するとできないわけです。
なのでトークンとやらを事前に作っておきます。

firebase login:ci

ここで出てきたトークンはとりあえずコピーしておいてください。

2.config.ymlを書いていく

これはもうコピペっすよ。

version: 2.1
jobs:
  build:
    docker:
      - image: circleci/node
    steps:
      - checkout
      - restore_cache:
          key:
            - npm-{{ checksum "package.json" }}
      - run: npm install
      - save_cache:
          paths:
            - node_modules
      - run: npm run generate
      - run: ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN

3.CircleCIに行く

CircleCIでは、右のメニューから「Projects」を選んで、使うGithubのレポジトリの「Set Up Project」を選択
その後は「Use Existing Config」→「Start Building」を選択。これで一度ビルドし始めるはず。

このあとは、右のメニューから「Dashboard」でダッシュボードに行き、
「Project Settings」→「Environment Variables」→「Add Environment Variables」でfirebaseのトークンを設定する。
「Name」は「FIREBASE_TOKEN」
「Value」はトークンを入力してください。

ついでに「API Permissions」に行って、「Add API Token」する。
このとき「Scope」は「Admin」、「Label」は適当に入れといてください。
出てきたトークンはやっぱりコピーしといてください。

4.contentfulに行く

contentfulでは、「Settings」→「Webhooks」に行き、
「WEBHOOK TEMPLATES」から「CircleCI」を選んで必要な内容を入れてきます。

これでやること終了。Githubにpushしてみたり、contentful更新してみてください。
多分大丈夫。多分…

CircleCIとcontentfulの連携

コメント