今までCircleCI及び開発環境でcircleci/rubyのnode-browserのイメージを利用していた*1のですが、下記ということでcimg/rubyに乗り換えることにしました。

プレフィックスが「 circleci / 」のレガシーイメージは、 2021 年 12 月 31 日に廃止されます。ビルドを高速化するには、次世代の CircleCI イメージを使ってプロジェクトをアップグレードしてください。 https://circleci.com/docs/ja/2.0/circleci-images/

開発環境を含めた乗り換え方法とかをメモ📝

開発環境をcircleci/rubyからcimg/rubyに乗り換える
CI環境をcircleci/rubyからcimg/rubyに乗り換える
参考

開発環境を`circleci/ruby`から`cimg/ruby`に乗り換える

circleci/rubyのnode-browserのイメージからcimg/rubyに乗り換える際にはcimg/rubyのbrowserのイメージに乗り換えます。

ブラウザーブラウザーバリアントのベースは元の Ruby イメージと同一ですが、こちらでは apt により Node.js、Java、Selenium、ブラウザーの依存関係が事前インストールされます。 https://circleci.com/developer/ja/images/image/cimg/ruby#variants

単純に利用するimageを変更するだけだったら話が早いのですが、cimg/rubyのbrowserのイメージではデフォルトでブラウザ及びドライバーがインストールされません。

このバリアントは、CircleCI Browser-Tools Orb と組み合わせて使用する想定で設計されています。この Orb を使用すると、任意のバージョンの Google Chrome と Firefox のいずれかまたは両方をビルドでインストールできます。 https://circleci.com/developer/ja/images/image/cimg/ruby#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC

CI環境ではorbsが提供されているので、それを利用すればいいのですが、開発環境では自分でインストールする必要があります。

今回は以下のようなDockerfileを用意してcimg/rubyのbrowserのイメージに追加でChrome及びChrome Driverをインストールするようにしました。

# == base
FROM cimg/ruby:3.0.3-browsers

# instal stable chrome / chrome driver
RUN wget https://dl.google.com/linux/linux_signing_key.pub &&\
    sudo apt-key add linux_signing_key.pub &&\
    echo 'deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main' | sudo tee /etc/apt/sources.list.d/google-chrome.list &&\
    sudo apt -y update && sudo apt-get -y install google-chrome-stable
RUN CHROME_LATEST_VERSION=$(curl -sS "omahaproxy.appspot.com/linux?channel=stable") &&\
    CHROME_LATEST_MAJOR_VERSION=$(echo $CHROME_LATEST_VERSION | cut -d . -f 1) &&\
    CHROME_DRIVER_VERSION=$(curl -sS "chromedriver.storage.googleapis.com/LATEST_RELEASE_${CHROME_LATEST_MAJOR_VERSION}") &&\
    wget https://chromedriver.storage.googleapis.com/${CHROME_DRIVER_VERSION}/chromedriver_linux64.zip &&\
    unzip chromedriver_linux64.zip &&\
    sudo mv chromedriver /usr/bin/chromedriver &&\
    sudo chown root:root /usr/bin/chromedriver &&\
    sudo chmod +x /usr/bin/chromedriver

上記のDockerfileでcircleci/rubyのnode-browserのイメージと同様にheadless chromeを利用したE2Eテストが行えるようになりました✨

CI環境を`circleci/ruby`から`cimg/ruby`に乗り換える

以下の通りcimg/rubyのbrowserイメージは、CircleCI Browser-Tools Orbを利用するとcircleci上で簡単に任意のブラウザ環境を立ち上げることができます。

このバリアントは、CircleCI Browser-Tools Orb と組み合わせて使用する想定で設計されています。この Orb を使用すると、任意のバージョンの Google Chrome と Firefox のいずれかまたは両方をビルドでインストールできます。 https://circleci.com/developer/ja/images/image/cimg/ruby#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC

※以下は一部を抜粋したものです。orbsにcircleci/browser-toolsを追加して、E2Eテストの実行前にbrowser-tools/install-chrome、browser-tools/install-chromedriverを実行すれば良い。

version: 2.1

orbs:
  ruby: circleci/ruby@1.2.0
  node: circleci/node@4.0.0
  browser-tools: circleci/browser-tools@1.2.3

web: &web
  - image: cimg/ruby:3.0.3-browsers
    environment:
      <<: *web-default-enviroments

db: &db
  - image: circleci/postgres:10.13
    environment:
      POSTGRES_USER: circleci
      POSTGRES_PASSWORD: password

executors:
  web:
    docker:
      - <<: *web
  web-db:
    docker:
      - <<: *web
      - <<: *db
jobs:
  ruby_test:
    executor:
      name: web-db
    steps:
      - attach_current
      - install_ruby_deps
      - install_node_deps
      - browser-tools/install-chrome
      - browser-tools/install-chromedriver
      - rails_migration
      - build_webpack
      - run:
          name: run tests
          command: bundle exec rspec spec/