このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

Docker超入門：ONBUILD実践①：base-imageとwhale-imageの構築手順

ONBUILD実践①：base-imageとwhale-imageの構築手順

　ここでは、Dockerの特殊な命令である ONBUILD を実際に使ってみます。今回は「base-image」と「whale-image」という2種類のイメージを作成し、ONBUILDの動きを体験していきます。全体は3部構成ですが、まずは第1部として「base-image」と「whale-image」の準備とWebコンテンツの作成を進めます。

ここで行うことの確認

　「ONBUILD実践①：base-imageとwhale-imageの構築手順」では、まず、1～3の下図のオレンジの枠のところを作成していきます。

  • 「base-image」を作成するための「Dockerfile.base」の作成
  • 「whale-image」を作成するための「Dockerfile」の作成
  • 「開発環境のページ」を構成する「Webコンテンツ」の作成

不要なコンテナとイメージの一括削除

まず環境をクリーンにしましょう。起動しているコンテナがあれば停止しておきます。

PS C:\Users\joeac> docker system prune -a
WARNING! This will remove:
  - all stopped containers
  - all networks not used by at least one container
  - all images without at least one container associated to them
  - all build cache

Are you sure you want to continue? [y/N] y

　このコマンドは未使用のコンテナ、イメージ、ボリューム、ネットワークを一括削除します。実行すると「Are you sure you want to continue? [y/N]」と確認されるので y を入力します。

コマンド説明
docker system prune停止中のコンテナ、未使用のネットワーク、ビルドキャッシュを削除
docker system prune -aさらに未使用のイメージも含めて削除

削除後は以下で確認できます。

PS C:\Users\joeac> docker container ls -a
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

PS C:\Users\joeac> docker image ls
REPOSITORY   TAG       IMAGE ID   CREATED   SIZE

コンテナやイメージが空になっていれば準備完了です。

作業ディレクトリの作成

次に作業ディレクトリを準備します。そして、作成したディレクトリに移動しておきます。

PS C:\Users\joeac> cd desktop/docker
PS C:\Users\joeac\Desktop\docker> mkdir Webserver2

    Directory: C:\Users\joeac\Desktop\docker

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----          2025/09/27    22:07                Webserver2

PS C:\Users\joeac\Desktop\docker> cd Webserver2
PS C:\Users\joeac\Desktop\docker\Webserver2>

これで Webserver2 ディレクトリに必要なDockerfileやコンテンツをまとめる準備が整いました。

base-imageを作成するためのDockerfile.base

　ここから「base-image」を作ります。このイメージはNginxをインストールし、ONBUILD命令で「webcontent.tar」を自動的に展開できるよう仕込みます。

「code Dockerfile.base」を実行します。

PS C:\Users\joeac\Desktop\docker\Webserver2> code Dockerfile.base

VS Codeが起動します。

以下の内容を入力して保存します。

Dockerfile.base

# Step1 ： Ubuntuイメージの作成
FROM ubuntu:latest

# Step2 ： nginxのインストール
RUN apt-get update && apt-get install -y -q nginx

# Step3 ... 80番ポートの公開
EXPOSE 80

# Step4 ： Webコンテンツのコピー
ONBUILD ADD webcontent.tar /var/www/html

# Step5 ： コマンドの実行（nginxの開始）
CMD ["nginx","-g","daemon off;"]

ポイント解説

  • FROM ubuntu:latest : Ubuntu最新版をベースにする
  • RUN apt-get ... nginx : Nginxをインストール
  • EXPOSE 80 : HTTPポートを公開
  • ONBUILD ADD webcontent.tar /var/www/html : このイメージを基にビルドするとき、webcontent.tarを自動展開
  • CMD : コンテナ起動時にNginxを立ち上げる

　ONBUILDを使うことで、base-imageを再利用する次のビルド時にWebコンテンツが自動的にコピーされる仕組みになります。

whale-imageを作成するためのDockerfile

次に「whale-image」を作るためのDockerfileを用意します。

「code Dockerfile」を実行します。

PS C:\Users\joeac\Desktop\docker\Webserver2> code Dockerfile

VS Codeが起動します。

以下の内容を入力して保存します。

Dockerfile

# 「base-image」をベースにイメージを作成
FROM base-image

　非常にシンプルで、先ほど作った base-image をベースに指定するだけです。これにより、base-imageに仕込んだONBUILD命令が次のビルドで発動します。

Webコンテンツの作成

最後に、コンテナで配信するWebページを準備します。

１．クジラのアイコンを下記リンクからダウンロード

ここでは、PNGファイルをダウンロードすることにします。

クジラの無料アイコン素材 2 | 商用可の無料(フリー)のアイコン素材をダウンロードできるサイト『icon rainbow』

商用利用可能な無料のアイコンをすぐにダウンロードできるアイコン素材配布サイトです。

商用可の無料(フリー)のアイコン素材をダウンロードできるサイト『icon rainbow』

ダウンロードしたクジラのアイコンのファイル名を「whale.png」に変更します。

「whale.png」を「Webserver2」ディレクトリに保存します。

２．index.html を作成

「code index.html」を実行します。

PS C:\Users\joeac\Desktop\docker\Webserver2> code index.html

VS Codeが起動します。

以下の内容を入力して保存します。

<HTML>
<BODY>
<H1>Development environment</H1>
<BR>
<IMG src="whale.png">
</BODY>
</HTML>

ブラウザで index.html を開き、クジラのアイコンとタイトルが表示されればOKです。

ディレクトリ構成の確認

最後に ls でディレクトリの中を確認します。

PS C:\Users\joeac\Desktop\docker\Webserver2> ls

    Directory: C:\Users\joeac\Desktop\docker\Webserver2

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a---          2025/09/27    22:21             71 Dockerfile
-a---          2025/09/27    22:19            381 Dockerfile.base
-a---          2025/09/27    22:28             95 index.html
-a---          2025/09/27    22:16           7792 whale.png

　4つのファイルが揃っていれば準備完了です。ここまでで base-image と whale-image の基本となるファイル一式が整いました。

イメージ図で理解するONBUILD

ONBUILD の仕組みを図にするとさらにわかりやすいです。

まとめ

　ここまでで、base-imageとwhale-imageを作るための準備が整いました。ONBUILD命令を使うことで、次のビルド時に自動でコンテンツが追加される仕組みが理解できたと思います。

この続きは、「ONBUILD実践➁：base-imageとwhale-imageの構築手順」で解説していきます。