MENU

Dockerfileの構築をAlpineからUbuntuに書き直す＆Windows+Docker環境を高速化する

社内勉強会
2025年7月8日

 

この記事について

本記事は、2025年6月時点で社内向けに作成された技術資料をもとに再編集したものです。
掲載されている技術情報や仕様、価格などは当時の内容に基づいており、現在の状況とは異なる可能性があります。
ご利用の際は、各種公式ドキュメントにて最新情報をご確認のうえ、参考にしていただければ幸いです。

きっかけ

自動テストのためのChromeDriverが動かない問題について相談したところ、Alpineではパッケージが足りないならUbuntuで作るのはどうかと提案いただきました。

とある案件のAlpineでのDockerfileをUbuntu用に書き直し、実際に使用までもっていった経緯と、自分が理解した範囲でのDockerfileの書き方についてまとめています。

元ファイル

FROM ruby:3.3.4-alpine as builder

RUN apk add --no-cache imagemagick imagemagick-heic imagemagick-jpeg imagemagick-pdf imagemagick-svg imagemagick-webp
RUN apk add --update bash perl
RUN apk add libheif-dev libde265-dev x265-dev libxslt-dev libxml2-dev build-base git less
RUN apk add postgresql-dev postgresql-client
RUN apk add shared-mime-info
RUN apk add --no-cache file
RUN apk add yarn --no-cache

FROM builder

WORKDIR /var/www/rails

ADD Gemfile* /tmp/
ADD package.json /tmp/
ADD yarn.lock /tmp/

WORKDIR /tmp

RUN gem install bundler
RUN gem install cocoon -v 1.2.14

RUN bundle install

RUN yarn install --check-files

ADD . /var/www/rails

RUN chmod +x /var/www/rails/web-entrypoint.sh
RUN chmod +x /var/www/rails/sqs-entrypoint.sh

以前作ったalpine3.3.4用のこちらのファイルを、ubuntu用に書き直しました。

変更したファイル

FROM ruby:3.3.4-slim as builder

ENV DEBIAN_FRONTEND=noninteractive
ENV CHROMEDRIVER_VERSION=137.0.7151.68
ENV CHROME_VERSION=137.0.7151.68

RUN apt-get update && apt-get install -y --no-install-recommends \
  wget \
  unzip \
  cron \
  imagemagick \
  libheif-dev libjpeg-dev poppler-utils librsvg2-bin libwebp-dev \
  bash perl \
  libde265-dev libxslt-dev libxml2-dev build-essential git less \
  libpq-dev postgresql-client \
  shared-mime-info \
  file \
  curl gnupg \
  && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
  && apt-get install -y nodejs \
  && npm install -g yarn \
  && rm -rf /var/lib/apt/lists/*

# Google Chrome 本体をバージョン指定でインストール
RUN wget -q https://edgedl.me.gvt1.com/edgedl/chrome/chrome-for-testing/${CHROME_VERSION}/linux64/chrome-linux64.zip -O /tmp/chrome.zip && \
    unzip /tmp/chrome.zip -d /opt/ && \
    ln -s /opt/chrome-linux64/chrome /usr/bin/google-chrome && \
    rm -f /tmp/chrome.zip

# ChromeDriver を同じバージョンでインストール
RUN wget -q -O /tmp/chromedriver.zip https://storage.googleapis.com/chrome-for-testing-public/${CHROMEDRIVER_VERSION}/linux64/chromedriver-linux64.zip && \
    unzip /tmp/chromedriver.zip -d /tmp/ && \
    chmod +x /tmp/chromedriver-linux64/chromedriver && \
    mv /tmp/chromedriver-linux64/chromedriver /usr/local/bin/chromedriver && \
    rm -rf /tmp/chromedriver.zip /tmp/chromedriver-linux64

FROM builder

WORKDIR /var/www/rails

ADD Gemfile* /tmp/
ADD package.json /tmp/
ADD yarn.lock /tmp/

WORKDIR /tmp

RUN gem install bundler
RUN gem install cocoon -v 1.2.14

RUN bundle install

RUN yarn install --check-files

ADD . /var/www/rails

RUN chmod +x /var/www/rails/web-entrypoint.sh
RUN chmod +x /var/www/rails/sqs-entrypoint.sh

 

 まず、ubuntu側でDockerfileに基本構造のものを加える場合、

RUN apt-get update && apt-get install -y --no-install-recommends

 の書き方をすればよいです。

この時忘れずに、wget,unzipなどをインストールしておかないと、後からファイルを追加する際に手間がかかるため、あらかじめ含めておくとよいでしょう。

 

また、Alpineでは

RUN apk add yarn --no-cache

によって yarn や node をインストールできますが、Ubuntuの場合はそれぞれ手順を明示的に記述する必要があります。

 

  curl gnupg \
  && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
  && apt-get install -y nodejs \
  && npm install -g yarn \
  && rm -rf /var/lib/apt/lists/*

ここの部分では、node.jsを自前でインストールし、そこからnpmの最新版を取得して、さらに yarn を導入するという一連の手順を踏んでいます。

ChromeDriverについて

Docker環境（Ubuntu）でSeleniumとChromeDriverを動作させる場合、Chrome本体とChromeDriverのバージョンを一致させる必要があります。

そのため、事前にバージョンを指定して（揃えて）インストールする必要があります。

ENV DEBIAN_FRONTEND=noninteractive
ENV CHROMEDRIVER_VERSION=137.0.7151.68
ENV CHROME_VERSION=137.0.7151.68

curl gnupg \
  && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
  && apt-get install -y nodejs \
  && npm install -g yarn \
  && rm -rf /var/lib/apt/lists/*

# Google Chrome 本体をバージョン指定でインストール
RUN wget -q https://edgedl.me.gvt1.com/edgedl/chrome/chrome-for-testing/${CHROME_VERSION}/linux64/chrome-linux64.zip -O /tmp/chrome.zip && \
    unzip /tmp/chrome.zip -d /opt/ && \
    ln -s /opt/chrome-linux64/chrome /usr/bin/google-chrome && \
    rm -f /tmp/chrome.zip

# ChromeDriver を同じバージョンでインストール
RUN wget -q -O /tmp/chromedriver.zip https://storage.googleapis.com/chrome-for-testing-public/${CHROMEDRIVER_VERSION}/linux64/chromedriver-linux64.zip && \
    unzip /tmp/chromedriver.zip -d /tmp/ && \
    chmod +x /tmp/chromedriver-linux64/chromedriver && \
    mv /tmp/chromedriver-linux64/chromedriver /usr/local/bin/chromedriver && \
    rm -rf /tmp/chromedriver.zip /tmp/chromedriver-linux64

 

一応Docker環境を作った後に、webに入ってバージョン確認だけしときましょう。 

google-chrome --version
->Google Chrome 137.0.7151.68

chromedriver --version
->ChromeDriver 137.0.7151.68

 

揃っていること確認したら、これでOKです。 

Dockerfileがあると嬉しいこと

誰でも再現性あって同じ環境を間違いなく作れるというのが一番うれしいなと思いました。

逆に言うと環境ぶれをなくすためにはENVでバージョン指定などもしてきっちり色々揃えないといけないという事です。

特にChromeDeiver周りはバージョンがずれるとSelemiumでは全く動作しなくなるので、Chromeを更新するなら合わせて再ダウンロードとか色々必要になります。

最新版が欲しいならDockerfile時点でその時その時でENVを変更して環境設置の方が良さそうです。

補足1：自動テスト実行前にやること

補足として、RSpec実行前に必要な準備についても触れておきます。

当たり前ですが、テスト側のほうにデータが入ってなかったら動かないので、以下コマンドでDBを作成するようにしましょう。

rails db:migrate RAILS_ENV=test

その後、rspecを実行してあげればOKです！

（capybara等を適宜エラー出た際に修正してあげる必要はあります……。）

補足2：Win環境でデータを移植する際に気を付ける事

これも本題からずれますが、上でDocker環境を作った後、そもそも自動テスト側ではない通常環境の動作のためにはデータをdumpする必要があったりします。

データのdumpの際、dumpファイルがCRLFだと取り込めないことがあるので、Win環境であるならばちゃんとLFに保存しなおしましょう。 

Win環境のDockerが遅いので、高速化をしてみる

自分では気づかなかったのですが、Mac環境の人が私の環境下での動作を見て遅いとコメント頂きました。

画面表示の時間が大体上記のDockerfileで作ったもので2820ms くらいかかっていました。
同一画面の表示にMac環境だと389ms でした。 

WSLに直接Dockerを置く

出典：株式会社あすか ブログ – Windows + WSL2 + docker + laravel を 10 倍速くする方法
https://www.aska-ltd.jp/jp/blog/197

こちらのリンク先で解説して下さってますが、Windows+Docker+WSL2だとC直下のファイルを/mnt/Ubuntu/c/Users/<user_name>/Documents/git-repos/hogehoge のように配置してしまい、/mnt/Ubuntu の中のものを起動しに行こうとするので、どうしても遅くなってしまうようです。

なので、Windows側にファイルを置くのを諦めて、WSLの中に直接プロジェクトを置いてしまってそこでDockerを起動してしまえばよいというわけです。

というわけで、実際にWSL2でやってみました。

WSLのルート/home/<user_name>/ でgit cloneを打って、プロジェクトを持ってきます。

VScodeでの操作が必要な場合、VScodeの拡張機能のWSL

http://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

 を入手しておき、

/home/<user_name>/your_project> code .

 とするだけで勝手にVSCodeがプロジェクトルートで開いてくれます。

便利ですね。

DB周りなども設定必要になりますが、基本的にその辺はDockerと一緒にやっていくので順番にやっていきましょう。

rubocop動かしたかったりする場合はDockerではなくWSL上に色々必要なのでWSL側で 

/home/<user_name>/your_project> bundle install

 等の対応を行ってください。

Windowsでやるよりこの時点で圧倒的な速度を感じられます。

余談ですが、docker-compose upで初回起動周りを行う際も圧倒的な速度でした。 

実際どれぐらい早くなったか

web-1       | I, [2025-06-12T10:14:44.841823 #1]  INFO -- : Started GET "/register_confirmations" for 172.21.0.1 at 2025-06-12 10:14:44 +0000
:
web-1       | I, [2025-06-12T10:14:45.018758 #1]  INFO -- : Completed 200 OK in 160ms (Views: 80.2ms | ActiveRecord: 13.5ms | Allocations: 65958)

実際のログになりますが、なんと160ms になりました。

元から比べると約1/18、Macと比べても約1/2でこちらが早いという正に爆速を手に入れることができました。

WSLのホームディレクトリの読み込みの早さは凄まじいですね……。 

参考文献、資料まとめ

出典：株式会社あすか ブログ – Windows + WSL2 + docker + laravel を 10 倍速くする方法
https://www.aska-ltd.jp/jp/blog/197

出典：Visual Studio Marketplace – WSL
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

社内勉強会
ChromeDriver Dockerfile Selenium Ubuntu WSL高速化
役に立ったらシェアしていただけると嬉しいです
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次