SurgeにCiecleCIから自動デプロイする

8/11/2020

やること

前回 Gatsby.js×ContentfulをSurgeにデプロイする の続き。

NetlifyだとContentfulが公式でWebhook対応しているのですが、Surgeは対応していないので
CiecleCIをトリガーとして、記事を書いたらCIが走って最後にdeployするようにします。

完成したもの

Gatsby Remo Work

gatsby_remo_work

前回と違う点は、Contentfulで記事を書くとNetlifyにのみdeployされていましたが
CiecleCIを通してSurgeにも二重でデプロイされるようになっています。

Webhook作成

Contentful > Webhook > WEBHOOK TEMPLATES > CircleCI
guthubのアカウント名、リポジトリ名、branch、Personal API Tokenを入力。

Personal APIはgithubから入手します。
User > Personal API Tokens > Create New Token
参考リンク：Personal API Tokens

上記項目を入力し、Create WebhookでWebhookを作成します。

CiecleCI側の設定

CiecleCI > Projects > 対象リポジトリでSetup Project
CIが走ることを確認したら、.circleci/config.ymlと環境変数と設定。

.circleci/config.yml

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:latest
    working_directory: ~/repo
    steps:
      - checkout
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "yarn.lock" }}
            - v1-dependencies-
      - run: yarn install
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "yarn.lock" }}
      - run:
          name: gatsby build
          command: |
            curl -o- -L https://yarnpkg.com/install.sh | bash
            yarn --ignore-engines
            sudo npm install -g gatsby surge
            gatsby clean
            gatsby build
      - run:
          name: gatsby deploy
          command: |
            surge public/ https://gatsby.remo.work/

環境変数を追加

前回.envに設定したaccessTokenとspaceIdをCircleCIの環境変数に入れます。
またそのままpushするとsurgeのdeploy stepでメールアドレスの入力で止まってしまうので
予めSurge Tokenを取得して環境変数から与えます。

surge token

https://surge.sh/help/integrating-with-circleci

Projects > 対象リポジトリ > Project Setting > Environment Variables

・accessToken：.envと同じaccessToken
・spaceId：.envと同じspaceId
・SURGE_LOGIN：surgeに登録したメールアドレス
・SURGE_TOKEN：上で取得したtoken

Surgeにデプロイする

circleciのconfingを変更したので、まずはgit pushしてciが成功するか確認。
成功したらContentful側で適当に記事を更新します。
問題なく設定できていれば、記事更新と同時にCIが走りsurgeにdeployされます。

元々設定していたNetlifyへの自動Deployに加え、記事更新をCiecleCIでもトリガーすることにより
Netlify、Surgeへの二重Deployが実現できました。

2020/10/25 追記

記事の更新に失敗していたのでCircleCiを確認したところ、急にbuildが失敗して

Exited with code exit status 137
CircleCI received exit code 137

が返るようになりました。

yarn install の処理が重すぎて Out Of Memory っぽいのですが、ここは既にcacheさせて処理を軽くしているのでFree planの限界かも知れません。

©️ 2020 ふじい Dev-Remo-Work.