CircleCI

CircleCIの公式Dockerイメージに日本語フォントを追加してE2Eテストを行ってみる

お試しで CircleCI を使用してE2Eテストを行うための環境作成をしています。CircleCIやaptコマンドなどによるOSの設定変更は素人なのでその点はご留意下さい。

Ruby、Bundler Gem、Google Chrome、ChromeDriverなどが予め組み込まれたCircleCIの公式Dockerイメージ「circleci/ruby:2.5.1-node-browsers」を使用してE2Eテストをしてみると日本語フォントのサイトが豆腐文字(□□□)になってしまうため、日本語フォントの追加と合わせてロケールの変更を試してみました。

豆腐文字の例:

環境や必要なもの

目的

  • 日本語フォントのインストール
  • 実行環境を日本語環境に可能な限り近づける

GitHub上にリポジトリを用意する

以下のように「capybara-test」の名前でリポジトリを作成します。

次にgit push出来ることを確認します。

$ echo "# capybara-test" >> README.md
$ git init
Initialized empty Git repository in ~/my_works/ruby_projects/capybara-test/.git/

$ git add README.md
$ git commit -m "first commit"
[master (root-commit) fa002f2] first commit
 1 file changed, 3 insertions(+)
 create mode 100644 README.md

$ git remote add origin git@github.com:takayamag/capybara-test.git
$ git push -u origin master
Counting objects: 3, done.
Writing objects: 100% (3/3), 231 bytes | 231.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To github.com:takayamag/capybara-test.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

E2Eテストを行うスクリプトをgit pushします。

$ git add .
$ git commit -m "ローカルリポジトリをコミット"
[master 66c2541] ローカルリポジトリをコミット
 12 files changed, 763 insertions(+)
 create mode 100644 .circleci/config.yml
 create mode 100644 .gitignore
 create mode 100644 Gemfile
 create mode 100644 Gemfile.lock
 create mode 100644 spec/features/example_console_spec.rb
 create mode 100644 spec/features/example_site_prism_spec.rb
 create mode 100644 spec/features/example_sp_spec.rb
 create mode 100644 spec/features/example_spec.rb
 create mode 100644 spec/helpers/capybara.rb
 create mode 100644 spec/helpers/navigation_listener.rb
 create mode 100644 spec/pages/google.rb
 create mode 100644 spec/spec_helper.rb

$ git push
Counting objects: 19, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (17/17), done.
Writing objects: 100% (19/19), 12.91 KiB | 4.30 MiB/s, done.
Total 19 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), done.
To github.com:takayamag/capybara-test.git
   fa002f2..66c2541  master -> master

CircleCIとGitHubを連携する

CircleCIへGitHubアカウントでログインする

Add projectsボタンを押下する。

capybara-testに対してSet Up Projectボタンを押下する。

以下の項目を選択して、Start buildingボタンを押下する。

  1. Operating System: Linux
  2. Language: Ruby

「.circleci/config.yml」

CircleCIは「.circleci/config.yml」構成内容を元に動作します。ここでは「circleci/ruby:2.5.1-node-browsers」の公式イメージに日本語フォントを追加してみます。

コメントされているコマンドは調査のために使用したコマンドになります。

また、tzdatalocalesコマンドはcircleci/ruby:2.5.1-node-browsersにインストール済みでしたのでインストールコマンドは省いてあります。

.circleci/config.yml
# .circleci/config.yml

version: 2
jobs:
  build:
    parallelism: 1
    working_directory: ~/capybara-test
    docker:
      # ChromeやFirefoxがインストールされたRubyのdockerイメージを使用する
      - image: circleci/ruby:2.5.1-node-browsers
    steps:
      - checkout

      - run: printenv
      - run: |
          # TimezoneをAsia/Tokyoへ変更する
          sudo ln -fs /usr/share/zoneinfo/Asia/Tokyo /etc/localtime &&
          sudo dpkg-reconfigure -f noninteractive tzdata
      - run: |
          # インストール済みのパッケージ一覧を表示する #1
          dpkg -l
      - run: |
          # インストール済みのパッケージ一覧を表示する #2
          apt list | grep installed
      - run: |
          # アップグレード可能なパッケージ一覧を表示する
          apt list --upgradable
      - run: |
          # サポートされているロケール一覧を表示する
          grep '\.UTF-8' /usr/share/i18n/SUPPORTED | awk '{ print $1 }'
      - run: |
          # システム情報を表示する
          uname -a
      - run: |
          # 現在のロケール設定を確認する
          locale -a
      - run: |
          # `update-locale`実行前の状態を確認する
          cat /etc/default/locale
      - run: |
          # パッケージを更新する
          sudo apt -qqy upgrade
      - run: |
          # 全てのlanugage-packをインストールする
          # language-pack-ja単体だと何故か失敗する…
          sudo apt -qqy --no-install-recommends install -y locales-all &&
          sudo locale-gen ja_JP.UTF-8 &&
          sudo update-locale LANG=ja_JP.UTF-8 &&
          sudo update-locale LANGUAGE="ja_JP:ja"
      - run: |
          # 日本語フォントをインストールする
          sudo apt -qqy --no-install-recommends install -y fonts-takao-gothic fonts-takao-mincho &&
          sudo dpkg-reconfigure --frontend noninteractive locales &&
          sudo fc-cache -fv
      - run: |
          # 更新されたロケール設定を確認する
          locale -a | grep ja_JP
      - run: |
          # `update-locale`実行後の状態を確認する
          cat /etc/default/locale
      - run: |
          # 不要なパッケージやキャッシュを削除する
          sudo apt -qyy autoremove &&
          sudo apt -qyy clean &&
          sudo rm -rf /var/lib/apt/lists/*

      # bundle cacheを復元する
      - type: cache-restore
        key: dependency-cache-{{ checksum "Gemfile.lock" }}

      # Bundle installを行う
      - run: bundle install --path vendor/bundle

      # bundle cacheを保存する
      - type: cache-save
        key: dependency-cache-{{ checksum "Gemfile.lock" }}
        paths:
          - vendor/bundle

      # RSpecを実行する
      - type: shell
        command: |
          export BROWSER=chrome; bundle install && bundle exec rspec spec/features/example_spec.rb

      # Artifactsを保存する
      - type: store_artifacts
        path: ./files/screenshots

それでは、「config.yml」の内容の詳細を見ていきます。

TimezoneをAsia/Tokyoへ変更する

.circleci/config.yml
      - run: |
          # TimezoneをAsia/Tokyoへ変更する
          sudo ln -fs /usr/share/zoneinfo/Asia/Tokyo /etc/localtime &&
          sudo dpkg-reconfigure -f noninteractive tzdata

Local Timezoneを「Asia/Tokyo」へ変更しています。実行結果は下記の内容になります。

#!/bin/bash -eo pipefail
# TimezoneをAsia/Tokyoへ変更する
sudo ln -fs /usr/share/zoneinfo/Asia/Tokyo /etc/localtime &&
sudo dpkg-reconfigure -f noninteractive tzdata

Current default time zone: 'Asia/Tokyo'
Local time is now:      Tue May  8 16:24:55 JST 2018.
Universal Time is now:  Tue May  8 07:24:55 UTC 2018.

パッケージを更新する

.circleci/config.yml
      - run: |
          # パッケージを更新する
          sudo apt -qqy upgrade

システムにインストールされているパッケージを最新の状態にします。

#!/bin/bash -eo pipefail
# パッケージを更新する
sudo apt -qqy upgrade
The following packages will be upgraded:
  tzdata
1 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.
Need to get 267 kB of archives.
After this operation, 0 B of additional disk space will be used.
debconf: delaying package configuration, since apt-utils is not installed
(Reading database ... 41290 files and directories currently installed.)
Preparing to unpack .../tzdata_2018e-0+deb9u1_all.deb ...
Unpacking tzdata (2018e-0+deb9u1) over (2018d-0+deb9u1) ...
Setting up tzdata (2018e-0+deb9u1) ...

Current default time zone: 'Asia/Tokyo'
Local time is now:      Tue May  8 16:25:00 JST 2018.
Universal Time is now:  Tue May  8 07:25:00 UTC 2018.
Run 'dpkg-reconfigure tzdata' if you wish to change it.

言語パックをインストールする

.circleci/config.yml
      - run: |
          # 全てのlanugage-packをインストールする
          # language-pack-ja単体だと何故か失敗する…
          sudo apt -qqy --no-install-recommends install -y locales-all &&
          sudo locale-gen ja_JP.UTF-8 &&
          sudo update-locale LANG=ja_JP.UTF-8 &&
          sudo update-locale LANGUAGE="ja_JP:ja"

システムに言語パックをインストールします。language-pack-ja単体でインストールしたかったのですが、何故かエラーになるためここではlocales-allで全ての言語パックをインストールしています。

#!/bin/bash -eo pipefail
# 全てのlanugage-packをインストールする
# language-pack-ja単体だと何故か失敗する…
sudo apt -qqy --no-install-recommends install -y locales-all &&
sudo locale-gen ja_JP.UTF-8 &&
sudo update-locale LANG=ja_JP.UTF-8 &&
sudo update-locale LANGUAGE="ja_JP:ja"
The following NEW packages will be installed:
  locales-all
0 upgraded, 1 newly installed, 0 to remove and 0 not upgraded.
Need to get 3624 kB of archives.
After this operation, 130 MB of additional disk space will be used.
debconf: delaying package configuration, since apt-utils is not installed
Selecting previously unselected package locales-all.
(Reading database ... 41290 files and directories currently installed.)
Preparing to unpack .../locales-all_2.24-11+deb9u3_amd64.deb ...
Unpacking locales-all (2.24-11+deb9u3) ...
Setting up locales-all (2.24-11+deb9u3) ...
Generating locales (this might take a while)...
Generation complete.

日本語フォントをインストールする

.circleci/config.yml
      - run: |
          # 日本語フォントをインストールする
          sudo apt -qqy --no-install-recommends install -y fonts-takao-gothic fonts-takao-mincho &&
          sudo dpkg-reconfigure --frontend noninteractive locales &&
          sudo fc-cache -fv

システムに日本語フォントが存在しないので、fonts-takao-gothicfonts-takao-minchoをインストールして反映させています。

#!/bin/bash -eo pipefail
# 日本語フォントをインストールする
sudo apt -qqy --no-install-recommends install -y fonts-takao-gothic fonts-takao-mincho &&
sudo dpkg-reconfigure --frontend noninteractive locales &&
sudo fc-cache -fv
The following NEW packages will be installed:
  fonts-takao-gothic fonts-takao-mincho
0 upgraded, 2 newly installed, 0 to remove and 0 not upgraded.
Need to get 8277 kB of archives.
After this operation, 28.7 MB of additional disk space will be used.
debconf: delaying package configuration, since apt-utils is not installed
Selecting previously unselected package fonts-takao-gothic.
(Reading database ... 47973 files and directories currently installed.)
Preparing to unpack .../fonts-takao-gothic_00303.01-1_all.deb ...
Unpacking fonts-takao-gothic (00303.01-1) ...
Selecting previously unselected package fonts-takao-mincho.
Preparing to unpack .../fonts-takao-mincho_00303.01-1_all.deb ...
Unpacking fonts-takao-mincho (00303.01-1) ...
Setting up fonts-takao-mincho (00303.01-1) ...
update-alternatives: using /usr/share/fonts/truetype/takao-mincho/TakaoPMincho.ttf to provide /usr/share/fonts/truetype/fonts-japanese-mincho.ttf (fonts-japanese-mincho.ttf) in auto mode
Setting up fonts-takao-gothic (00303.01-1) ...
update-alternatives: using /usr/share/fonts/truetype/takao-gothic/TakaoPGothic.ttf to provide /usr/share/fonts/truetype/fonts-japanese-gothic.ttf (fonts-japanese-gothic.ttf) in auto mode
Processing triggers for fontconfig (2.11.0-6.7+b1) ...
locales-all installed, skipping locales generation
/usr/share/fonts: caching, new cache contents: 0 fonts, 2 dirs
/usr/share/fonts/X11: caching, new cache contents: 0 fonts, 3 dirs
/usr/share/fonts/X11/encodings: caching, new cache contents: 0 fonts, 1 dirs
/usr/share/fonts/X11/encodings/large: caching, new cache contents: 0 fonts, 0 dirs
/usr/share/fonts/X11/misc: caching, new cache contents: 59 fonts, 0 dirs
/usr/share/fonts/X11/util: caching, new cache contents: 0 fonts, 0 dirs
/usr/share/fonts/truetype: caching, new cache contents: 2 fonts, 4 dirs
/usr/share/fonts/truetype/dejavu: caching, new cache contents: 22 fonts, 0 dirs
/usr/share/fonts/truetype/liberation: caching, new cache contents: 16 fonts, 0 dirs
/usr/share/fonts/truetype/takao-gothic: caching, new cache contents: 2 fonts, 0 dirs
/usr/share/fonts/truetype/takao-mincho: caching, new cache contents: 2 fonts, 0 dirs
/usr/X11R6/lib/X11/fonts: skipping, no such directory
/usr/local/share/fonts: caching, new cache contents: 0 fonts, 0 dirs
/root/.local/share/fonts: skipping, no such directory
/root/.fonts: skipping, no such directory
/usr/share/fonts: caching, new cache contents: 0 fonts, 2 dirs
/usr/X11R6/lib/X11/fonts: skipping, no such directory
/usr/local/share/fonts: caching, new cache contents: 0 fonts, 0 dirs
/root/.local/share/fonts: skipping, no such directory
/root/.fonts: skipping, no such directory
/var/cache/fontconfig: cleaning cache directory
/root/.cache/fontconfig: not cleaning non-existent cache directory
/root/.fontconfig: not cleaning non-existent cache directory
fc-cache: succeeded

キャッシュをクリアする

.circleci/config.yml
      - run: |
          # 不要なパッケージやキャッシュを削除する
          sudo apt -qyy autoremove &&
          sudo apt -qyy clean &&
          sudo rm -rf /var/lib/apt/lists/*

最後にインストール作業中に保存されたキャッシュをクリアします。

#!/bin/bash -eo pipefail
# 不要なパッケージやキャッシュを削除する
sudo apt -qyy autoremove &&
sudo apt -qyy clean &&
sudo rm -rf /var/lib/apt/lists/*
Reading package lists...
Building dependency tree...
Reading state information...
0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.

スペックを実行する

.circleci/config.yml
      # RSpecを実行する
      - type: shell
        command: |
          export BROWSER=chrome; bundle install && bundle exec rspec spec/features/example_spec.rb

上記コマンドで任意のスペックを実行します。

結果、豆腐文字になっていた日本語フォントが正しく表示されるようになりました。ただし、ロケールなどの設定を日本語環境に合わせてもGoogle検索の検索設定を「日本」に上手く設定出来ませんでした(ヘッダーやフッターなどが英語表記になってしまう)。

完全とは言えないもののDocker HubにRebuildしたイメージをアップすることなく日本語フォントの導入が出来たのでとりあえず目的は達成出来ました。