🖥️

DockerでWordpress構築ハンズオン | 42 Inception

2025/02/07に公開

Docker

はじめに

42のカリキュラムにあるDockerを用いてWordpressをセットアップする課題を取り組むにあたって，ミニマムな構成でのWordpressセットアップ方法についての記事です．

※ 課題の仕様とは異なる点が多くあるので，参考程度にしてください．課題へのヒントの範疇超えず補助的な立ち位置の記事になるようにできるだけ，ミニマムな構成にしています．
※ 課題の要件にあるSSL/TLSやネットワーク等について取り上げないです．

対象

何から初めればいいのか分からない，Dockerがどういうものかわかったけど，課題にどう取り組めばいいか分からない人向けに実際に動かしてイメージを深める内容となっています
仮想化技術やDockerについては他の記事の説明の方が分かりやすいので，そちらの記事を参考にしてください．

以下の記事がDockerについてとても分かりやすく，一通りまとまっていたのでこれから勉強する方にとてもおすすめです！

ハンズオン

1つのアプリケーション(WordPress)を構成していくために，3つのコンテナ(Nginx, WordPress, MariaDB)をセットアップしていきます．
複数のコンテナに分割する理由として，1つのコンテナに1つの役割を持たせるべきだからです．(コンテナの単一責任の原則，詳しくはこちらから：Kubernetes導入にあたり知っておきたいコンテナの基礎知識（要約）)．

Each container should have only one concern
コンテナは1つの関心ごとだけに集中すべきだ
https://docs.docker.com/build/building/best-practices/

複数のコンテナに分けるメリットとしては，以下の通りとなっています．

主要なメリット

マルチコンテナ管理の簡易化：
複数のコンテナを同時に起動、停止、ビルド、削除などの操作ができる

一貫した環境再現性：
docker-compose.ymlにサービスを定義することで複数の環境を再現することが容易になる

サービス間の依存関係の明確化
各サービスの依存関係を定義することができる（depends_on）

簡易なスケーリング：
コマンド一つでサービスのインスタンス数を増減することで柔軟なスケーリングが可能
https://blog.denet.co.jp/centrally-manage-multiple-containers-with-docker-compose/?doing_wp_cron=1738835393.5332379341125488281250

各アプリケーションの説明

WordPress, nginx, mariadbをとても簡単にどういったものかをそれぞれ概要だけ説明します．

WordPress

ブログやウェブサイトを作るためのシステムです．PHPで書かれており，記事投稿や画像アップロードなどの機能を提供します．データベースと連携して動的なウェブサイトを作れます．

nginx

Webサーバーのソフトです．クライアントからのリクエストを受け付け，適切なコンテンツを返す役割を担います．
キーワード：リバースプロキシ

mariadb

MySQLから派生したオープンソースのリレーショナルデータベースです．
WordPressのデータ（投稿、ユーザー情報、設定など）を保存します．

ハンズオン進めていきます．

1. nginxセットアップ

最初のステップは，nginxをセットアップします．
まず，inceptionディレクトリを作成し，以下のディレクトリ構成にします．

docker-compose.ymlは以下のように設定します．

version: "3.8"

services:
  nginx:
    build: src/nginx/.
    container_name: inception_nginx
    ports:
      - "80:80"

次に，nginxのDockerfileのを以下のように設定します．

FROM debian:latest

RUN apt-get update && apt-get install -y nginx

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

aptでnginxパッケージをインストールして，-g daemon offという引数でバックグラウンドでの実行ではなく，nginxをフォアグラウンドで実行します。

以上の内容が終わったら，一度以下のコマンドでnginxが立ち上がることを確認します．

docker compose up --build

nginxサービスが動作することを確認するために，http://127.0.0.1 にアクセスして確認します．
以下のNginxのデフォルトページが表示されたらOKです．

これで，nginxが動作するコンテナを作成することができました．

2. PHP/Wordpress 環境構築

次に，PHPとwordpressを追加します．ディレクトリ構造を以下のように更新します：

まず，wordpressのDockerfileは以下の通りに設定します．
こちらでも同様に，aptでphp-fpmをインストールし，php-fpmを-Fオプションにて，フォアグラウンドで実行します．

FROM debian:latest

RUN apt-get update && apt-get install -y php-fpm

CMD ["php-fpm8.2", "-F"]

次に，docker-compose.ymlは以下のように設定します．

version: "3.8"

services:
  nginx:
    build: src/nginx/.
    container_name: inception_nginx
    ports:
      - "80:80"
  wordpress:
    build: src/wordpress/.
    container_name: inception_wordpress

docker compose up — buildコマンドを再度，実行すると以下のようにwordpressとnginxのコンテナが実行されます．

現在，nginxとphpの間に接続が確立されていないため，通信できません．
そのため，nginxでphpファイルをレンダリングしようとしても，接続されていないため，処理できません．

次のステップは，nginxとphpが通信できるように構成することです．nginxコンテナからデフォルトのサーバー構成ファイルとphpサービスのデフォルトの構成をコピーし，いくつか変更を加えます．

まず，nginxとPHPそれぞれのデフォルト設定ファイルを取得します．
設定ファイルの場所

PHP：/etc/php/8.2/fpm/pool.d/www.conf
Nginx：/etc/nginx/sites-available/default

現在，コンテナを実行中のターミナルとは別でターミナルを立ち上げ，inceptionディレクトリ下でdocker cpコマンドを使って，実行中のコンテナから設定ファイルをコピーします．

docker cp inception_wordpress:/etc/php/8.2/fpm/pool.d/www.conf ./src/wordpress/.
docker cp inception_nginx:/etc/nginx/sites-available/default ./src/nginx/.

コピー後，ディレクトリ構造は以下の通りとなります．

そして，PHPのデフォルト設定ファイルwww.confの41行目のlistenをコメントアウトし新たに42行目を以下のように設定します．
/run/php/php8.2-fpm.sockをlistenする代わりに，inception_wordpressコンテナのローカルホストであるアドレスinception_wordpress:9000に変更して，リクエストを受け入れるように設定します．

41 ; listen = /run/php/php8.2-fpm.sock # コメントアウト
42 listen = inception_wordpress:9000

次に，PHPファイルへのリクエストをFastCGIサーバーに転送するようにdefaultを設定します．
まず，PHPスクリプトをFastCGIサーバーに渡すことを許可するブロックがコメントアウトされているので，解除する必要があります(56行目から63行目のコメントを解除)．
そして，このブロックのfastcgi_passを127.0.0.1:9000からinception_wordpress:9000に変更，60行目をコメントアウトします．
これで，nginxが処理のためにphpファイルをどこに送信すれば良いか認識できるようになりました．

56	location ~ \.php$ {
57		include snippets/fastcgi-php.conf;
58	
59		# With php-fpm (or other unix sockets):
60		# fastcgi_pass unix:/run/php/php7.4-fpm.sock;
61		# With php-cgi (or other tcp sockets):
62		fastcgi_pass 127.0.0.1:9000;
63	}

そしてdefaultの44行目のインデックスリストにindex.phpを追加します．

43	# Add index.php to the list if you are using PHP
44	index index.php index.html index.htm index.nginx-debian.html;

以上の設定を加えることで，

ブラウザからPHPファイルへのリクエストが届く
nginxがそのリクエストをFastCGI経由でphp-fpmに転送
php-fpmがPHPファイルを実行
実行結果がnginxに返され，最終的にブラウザに表示される
という流れとなります．

次は，以上のdefaultとwww.confに加えた変更をコンテナにコピーする必要があります．
それぞれのDockerfileを以下のようにCOPYコマンドを追加します．
wordpress

FROM debian:latest

RUN apt-get update && apt-get install -y php-fpm

COPY www.conf /etc/php/8.2/fpm/pool.d/.

CMD ["php-fpm8.2", "-F"]

nginx

FROM debian:latest

RUN apt-get update && apt-get install -y nginx

EXPOSE 80

COPY default /etc/nginx/sites-available/.

CMD ["nginx", "-g", "daemon off;"]

WordPressのコンテンツをPHPコンテナで実行し，かつNginxでそれを表示するためには，両方のコンテナが同じファイルにアクセスできる必要があります．そのため、/var/www/html ディレクトリを両方のコンテナで共有する設定が必要です．

そのため，WordPressを動かすPHPコンテナの/var/www/html ディレクトリと、Nginxコンテナの同じく /var/www/html ディレクトリの両方を、ローカルマシン上の共通のWebフォルダにマウント（接続）する必要があります。

Dockerのボリューム機能を使用することで，Webサーバーのコンテンツを，ローカルマシン（自分のPC）と共有することができます．

これらの共有設定を実現するために、docker-compose.ymlファイルにvolumes（ボリューム）の設定を追加する必要があります.以下のように修正します．

version: "3.8"

services:
  nginx:
    build: src/nginx/.
    container_name: inception_nginx
    ports:
      - "80:80"
    volumes:
      - ./web:/var/www/html
  wordpress:
    build: src/wordpress/.
    container_name: inception_wordpress
    volumes:
      - ./web:/var/www/html

これにより，inceptionディレクトリにwebフォルダーが作成されます．docker compose up --buildを再度実行すると，以下のようにディレクトリが変更されます．

DockerがWebフォルダーを作成して，/var/www/htmlの内容をwebフォルダーにマウントしました．

テストとして，以下のindex.htmlファイルを作成して，以下の内容を追加し，docker compose up --buildコマンドを実行することで，ファイルがレンダリングされるかを確認します．

<h1> It works </h1>

http://127.0.0.1にアクセスして，以下のようにレンダリングされるかを確認します．

同様に，テストとして，index.phpファイルをwebディレクトリに追加して，以下の内容を追加し，docker compose up --buildを実行し，phpファイルもレンダリングされることを確認する．

<?php
echo "<h1>PHP Test Page</h1>";
echo "<p>Current time: " . date('Y-m-d H:i:s') . "</p>";

// サーバー情報の表示
echo "<h2>Server Information:</h2>";
echo "<ul>";
echo "<li>PHP Version: " . phpversion() . "</li>";
echo "<li>Server Software: " . $_SERVER['SERVER_SOFTWARE'] . "</li>";
echo "<li>Server Name: " . $_SERVER['SERVER_NAME'] . "</li>";
echo "</ul>";

http://127.0.0.1にアクセスして，以下のようにレンダリングされるかを確認します．

これで，PHP/Wordpressの環境構築ができました．

3. DB環境構築

mariadbのセットアップ，Wordpressをレンダリングされるようにしていきます．

mariadbのセットアップを行います．
以下のように，docker-compose.ymlにmariadbを追加します．

主な変更点は以下になります

公式イメージを利用してmariadbをインストール
wordpressとmariadbに適切な環境変数を設定し，接続情報を共有
サービス間の依存関係をdepends_onで定義し，起動順序を制御
データベースのデータを永続化するためにdb_dataボリュームを使用

version: "3.8"

services:
  nginx:
    build: src/nginx/.
    container_name: inception_nginx
    ports:
      - "80:80"
    volumes:
      - ./web:/var/www/html
    depends_on:
      - wordpress

  wordpress:
    build: src/wordpress/.
    container_name: inception_wordpress
    volumes:
      - ./web:/var/www/html
    depends_on:
      - db
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress

  db:
    image: mariadb:latest
    container_name: inception_db
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
      MYSQL_ROOT_PASSWORD: somewordpress
    volumes:
      - db_data:/var/lib/mysql

volumes:
  db_data:

そして，次にwordpressをインストールするスクリプトを作成します．
設定に伴って，以下のようなフォルダ構造にします．

wordpressフォルダに作ったscript.shに，以下の内容を追加します．
script.shは以下の，役割を持っています

WP-CLIツールのダウンロードと設定
WordPressコアファイルのインストール
データベース接続の設定
WordPressの初期設定（管理者アカウントの作成など）
PHP-FPMの起動

#!/bin/bash
cd /var/www/html
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
./wp-cli.phar core download --allow-root
./wp-cli.phar config create --dbname=wordpress --dbuser=wordpress --dbpass=wordpress --dbhost=db --allow-root
./wp-cli.phar core install --url=localhost --title=inception --admin_user=admin --admin_password=admin --admin_email=admin@admin.com --allow-root

php-fpm8.2 -F

そして，この変更に伴って，script.shがコンテナ内で実行されるように，wordpressのDockerfileを以下のように修正します．

FROM debian:latest

RUN apt-get update && apt-get install -y \
    php-fpm \
    php-mysql \
    curl

COPY www.conf /etc/php/8.2/fpm/pool.d/.
COPY script.sh .

RUN chmod +x script.sh

CMD ["./script.sh"]

この修正後，docker compose up --buildを実行します．
以下の表示になるまで少し待ちます(少し時間かかります)．

http://127.0.0.1にアクセスすると，以下のようにレンダリングされます．

これで，3つのコンテナを利用してwordpressを立ち上げることに成功しました．

まとめ

今回は，ミニマムな構成でwordpressのセットアップを行いました．
課題では，他にも要件が細かく設定されていたり，今回触れていない仕組み等が必要になるので，サブジェクトを確認しながら頑張ってください！

課題で作ったもの

参考にした記事

参考にした技術書

イラストでわかるDockerとKubernetes (Software Design plus)
図解即戦力仮想化&コンテナがこれ1冊でしっかりわかる教科書

はじめに

対象

ハンズオン

各アプリケーションの説明

WordPress

nginx

mariadb

ハンズオン進めていきます．

1. nginxセットアップ

2. PHP/Wordpress 環境構築

3. DB環境構築

まとめ

課題で作ったもの

参考にした記事

参考にした技術書

Discussion