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:
      # this is important to use proper image with browsers support
      - 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: dpkg -l
      # - run: apt list | grep installed
      # - run: apt list --upgradable
      # - run: apt-cache search language-pack
      # - run: grep '\.UTF-8' /usr/share/i18n/SUPPORTED | awk '{ print $1 }'
      # - run: uname -a
      # - run: locale -a
      # - run: 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-ipafont-gothic fonts-ipafont-mincho &&
          sudo dpkg-reconfigure --frontend noninteractive locales &&
          sudo fc-cache -fv

      # - run: locale -a | grep ja_JP
      # - run: apt-cache search language-pack
      # - run: cat /etc/default/locale
      - run: |
          # キャッシュなどをクリアする
          sudo apt -qyy autoremove &&
          sudo apt -qyy clean &&
          sudo rm -rf /var/lib/apt/lists/*

      # Restore bundle cache
      - type: cache-restore
        # remove space between { {
        key: project-name-{ { checksum "Gemfile.lock" }}

      # Bundle install dependencies
      - run: bundle install --path vendor/bundle

      # Store bundle cache
      - type: cache-save
        # remove space between { {
        key: project-name-{ { checksum "Gemfile.lock" }}
        paths:
          - vendor/bundle

      # Run rspec
      - type: shell
        command: |
          export BROWSER=chrome; bundle install && bundle exec rspec spec/features/example_spec.rb

      # Save 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:      Sun Apr 15 16:39:29 JST 2018.
Universal Time is now:  Sun Apr 15 07:39:29 UTC 2018.

パッケージを更新する

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

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

#!/bin/bash -eo pipefail
sudo apt -qqy upgrade
The following packages will be upgraded:
  icu-devtools libcurl3-gnutls libicu-dev libicu57 libperl5.24 libssl-dev
  libssl1.0.2 libssl1.1 libsystemd0 libudev1 openssl perl perl-base
  perl-modules-5.24 tzdata
15 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.
Need to get 38.1 MB of archives.
After this operation, 18.4 kB of additional disk space will be used.
debconf: delaying package configuration, since apt-utils is not installed
(Reading database ... 41430 files and directories currently installed.)
Preparing to unpack .../libperl5.24_5.24.1-3+deb9u3_amd64.deb ...
Unpacking libperl5.24:amd64 (5.24.1-3+deb9u3) over (5.24.1-3+deb9u2) ...
Preparing to unpack .../perl_5.24.1-3+deb9u3_amd64.deb ...
Unpacking perl (5.24.1-3+deb9u3) over (5.24.1-3+deb9u2) ...
Preparing to unpack .../perl-base_5.24.1-3+deb9u3_amd64.deb ...
Unpacking perl-base (5.24.1-3+deb9u3) over (5.24.1-3+deb9u2) ...
Setting up perl-base (5.24.1-3+deb9u3) ...
(Reading database ... 41430 files and directories currently installed.)
Preparing to unpack .../perl-modules-5.24_5.24.1-3+deb9u3_all.deb ...
Unpacking perl-modules-5.24 (5.24.1-3+deb9u3) over (5.24.1-3+deb9u2) ...
Preparing to unpack .../libsystemd0_232-25+deb9u3_amd64.deb ...
Unpacking libsystemd0:amd64 (232-25+deb9u3) over (232-25+deb9u2) ...
Setting up libsystemd0:amd64 (232-25+deb9u3) ...
(Reading database ... 41430 files and directories currently installed.)
Preparing to unpack .../libudev1_232-25+deb9u3_amd64.deb ...
Unpacking libudev1:amd64 (232-25+deb9u3) over (232-25+deb9u2) ...
Setting up libudev1:amd64 (232-25+deb9u3) ...
(Reading database ... 41430 files and directories currently installed.)
Preparing to unpack .../0-tzdata_2018d-0+deb9u1_all.deb ...
Unpacking tzdata (2018d-0+deb9u1) over (2018c-0+deb9u1) ...
Preparing to unpack .../1-libssl1.0.2_1.0.2l-2+deb9u3_amd64.deb ...
Unpacking libssl1.0.2:amd64 (1.0.2l-2+deb9u3) over (1.0.2l-2+deb9u2) ...
Preparing to unpack .../2-libssl-dev_1.1.0f-3+deb9u2_amd64.deb ...
Unpacking libssl-dev:amd64 (1.1.0f-3+deb9u2) over (1.1.0f-3+deb9u1) ...
Preparing to unpack .../3-libssl1.1_1.1.0f-3+deb9u2_amd64.deb ...
Unpacking libssl1.1:amd64 (1.1.0f-3+deb9u2) over (1.1.0f-3+deb9u1) ...
Preparing to unpack .../4-libicu-dev_57.1-6+deb9u2_amd64.deb ...
Unpacking libicu-dev (57.1-6+deb9u2) over (57.1-6+deb9u1) ...
Preparing to unpack .../5-icu-devtools_57.1-6+deb9u2_amd64.deb ...
Unpacking icu-devtools (57.1-6+deb9u2) over (57.1-6+deb9u1) ...
Preparing to unpack .../6-libicu57_57.1-6+deb9u2_amd64.deb ...
Unpacking libicu57:amd64 (57.1-6+deb9u2) over (57.1-6+deb9u1) ...
Preparing to unpack .../7-libcurl3-gnutls_7.52.1-5+deb9u5_amd64.deb ...
Unpacking libcurl3-gnutls:amd64 (7.52.1-5+deb9u5) over (7.52.1-5+deb9u4) ...
Preparing to unpack .../8-openssl_1.1.0f-3+deb9u2_amd64.deb ...
Unpacking openssl (1.1.0f-3+deb9u2) over (1.1.0f-3+deb9u1) ...
Setting up perl-modules-5.24 (5.24.1-3+deb9u3) ...
Setting up libperl5.24:amd64 (5.24.1-3+deb9u3) ...
Setting up libcurl3-gnutls:amd64 (7.52.1-5+deb9u5) ...
Setting up tzdata (2018d-0+deb9u1) ...

Current default time zone: 'Asia/Tokyo'
Local time is now:      Sun Apr 15 16:39:44 JST 2018.
Universal Time is now:  Sun Apr 15 07:39:44 UTC 2018.
Run 'dpkg-reconfigure tzdata' if you wish to change it.

Setting up libicu57:amd64 (57.1-6+deb9u2) ...
Setting up perl (5.24.1-3+deb9u3) ...
Setting up libssl1.0.2:amd64 (1.0.2l-2+deb9u3) ...
Processing triggers for libc-bin (2.24-11+deb9u3) ...
Setting up libssl1.1:amd64 (1.1.0f-3+deb9u2) ...
Setting up openssl (1.1.0f-3+deb9u2) ...
Setting up icu-devtools (57.1-6+deb9u2) ...
Setting up libssl-dev:amd64 (1.1.0f-3+deb9u2) ...
Setting up libicu-dev (57.1-6+deb9u2) ...
Processing triggers for libc-bin (2.24-11+deb9u3) ...

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

.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 ... 41430 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-ipafont-gothic fonts-ipafont-mincho &&
          sudo dpkg-reconfigure --frontend noninteractive locales &&
          sudo fc-cache -fv

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

#!/bin/bash -eo pipefail
# 日本語フォントをインストールする
sudo apt -qqy --no-install-recommends install -y fonts-ipafont-gothic fonts-ipafont-mincho &&
sudo dpkg-reconfigure --frontend noninteractive locales &&
sudo fc-cache -fv
The following NEW packages will be installed:
  fonts-ipafont-gothic fonts-ipafont-mincho
0 upgraded, 2 newly installed, 0 to remove and 0 not upgraded.
Need to get 8248 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-ipafont-gothic.
(Reading database ... 48113 files and directories currently installed.)
Preparing to unpack .../fonts-ipafont-gothic_00303-16_all.deb ...
Unpacking fonts-ipafont-gothic (00303-16) ...
Selecting previously unselected package fonts-ipafont-mincho.
Preparing to unpack .../fonts-ipafont-mincho_00303-16_all.deb ...
Unpacking fonts-ipafont-mincho (00303-16) ...
Setting up fonts-ipafont-gothic (00303-16) ...
update-alternatives: using /usr/share/fonts/opentype/ipafont-gothic/ipag.ttf to provide /usr/share/fonts/truetype/fonts-japanese-gothic.ttf (fonts-japanese-gothic.ttf) in auto mode
Setting up fonts-ipafont-mincho (00303-16) ...
update-alternatives: using /usr/share/fonts/opentype/ipafont-mincho/ipam.ttf to provide /usr/share/fonts/truetype/fonts-japanese-mincho.ttf (fonts-japanese-mincho.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, 3 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/opentype: caching, new cache contents: 0 fonts, 2 dirs
/usr/share/fonts/opentype/ipafont-gothic: caching, new cache contents: 2 fonts, 0 dirs
/usr/share/fonts/opentype/ipafont-mincho: caching, new cache contents: 2 fonts, 0 dirs
/usr/share/fonts/truetype: caching, new cache contents: 2 fonts, 2 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/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, 3 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
      # Run rspec
      - type: shell
        command: |
          export BROWSER=chrome; bundle install && bundle exec rspec spec/features/example_spec.rb

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

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

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

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.