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