react-snapを走らせるためのCircleCiの設定

ReactのクライアントレンダリングでOGPに対応させるときに、react-snapが簡単に導入できて便利です。しかし、build時にPuppeteerが走るので、CircleCiでビルドするときはあらかじめ設定が必要です。
以下個人的なconfigファイルの設定。Firebaseにデプロイすることを想定しています。

react-snapのライブラリはこちら
github.com

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10.13-browsers

    working_directory: ~/repo

    steps:
      - checkout

      - run:
          name: install chrome
          command: |
                sudo apt install libappindicator3-1
                curl -L -o google-chrome.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
                sudo dpkg -i google-chrome.deb
                sudo sed -i 's|HERE/chrome\"|HERE/chrome\" --disable-setuid-sandbox|g' /opt/google/chrome/google-chrome
                rm google-chrome.deb
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            - v1-dependencies-

      - run: yarn install


      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}

      - run:
          name: build
          command: yarn run build

      - run:
          name: deploy firebase hostring
          command: ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN

workflows:
  version: 2
  deploy:
    jobs:
    - build:
        filters:
          branches:
              only:
                - master

ここで大事なポイントはブラウザに対応したCircleCiのDockerイメージを使うこと。

 - image: circleci/node:10.13-browsers

もう一つがchromeをインストールすることです。

- run:
          name: install chrome
          command: |
                sudo apt install libappindicator3-1
                curl -L -o google-chrome.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
                sudo dpkg -i google-chrome.deb
                sudo sed -i 's|HERE/chrome\"|HERE/chrome\" --disable-setuid-sandbox|g' /opt/google/chrome/google-chrome
                rm google-chrome.deb