DockerでWordPressをローカルに構築してCocoonテーマを入れてみる

はじめに

本ブログを開設するまでに、まずは自分のローカル環境でWordPressを構築して色々試していたので、その方法を紹介しようと思います。

ここでは、Docker Composeを使ってローカルにWordPressを構築して、無料テーマであるCocoonをアップロードするまでを紹介していきます。

前提条件

  • Dockerがインストールされている
  • Docker Composeがインストールされている

Macの場合はここからダウンロードしてインストールすれば使えるようになります。

環境

❯ docker --version
Docker version 20.10.6, build 370c289

❯ docker-compose --version
docker-compose version 1.29.1, build c34c88b2

Docker Composeとは

まずは簡単にDocker Composeについて説明します。
Docker Composeは設定ファイルで複数のコンテナを起動したり、停止したりできるツールになります。

WordPressを実行するためにはWordPressが動くWebサーバとデータベースのコンテナを実行して連携する必要があるためDocker Composeを利用します。

「そもそもDockerとは?」については下記の記事でまとめました。

いまさらDocker入門
はじめにいまさらながらDockerについてまとめてみました。なるべく動かしながらDockerを理解していきたいと思います。DockerとはDockerとは、コンテナを活用した開発・運用を可能にするソフトウェアです。コンテナを使える...

Docker ComposeでWordPress実行

Docker ComposeでWordPressを構築していきます。

構築するといっても、設定ファイルを用意してコマンドを実行するだけになります。

構成

まずはこれからDocker Composeで実行するコンテナの構成を確認します。

ここでは2つのコンテナが実行されます。
1つはWordPressが実行されているWebサーバ、もう1つがデータベースになります。

Dockerを使ってローカルでコンテナを実行するので、localhostでアクセスできるようになります。

docker-compose.yml

Docker Composeの設定ファイルを用意します。

WordPressはwordpressイメージを利用して、wordpressという名前付きボリュームでデータを管理します。
ポートは8080から80にポートフォワードしているので、
http://localhost:8080
でWordPressにアクセスできます。

データベースはmysqlイメージを利用して、dbという名前付きボリュームでデータを管理します。

version: "3.1"

services:
  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - wordpress:/var/www/html

  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: "1"
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:

実行

カレントディレクトリは以下のようになります。

❯ ls
docker-compose.yml

docker-composeで実行します。

❯ docker-compose up -d
Docker Compose is now in the Docker CLI, try `docker compose up`

Creating network "docker_default" with the default driver
Creating volume "docker_wordpress" with default driver
Creating volume "docker_db" with default driver
Creating docker_db_1        ... done
Creating docker_wordpress_1 ... done

データの管理

データの管理は名前付きボリュームを利用しているため一度コンテナを停止してもデータは残っているので、再度docker-compose up -dでコンテナを実行すると同じ状態でコンテナを起動できるようになります。

❯ docker volume ls
DRIVER    VOLUME NAME
local     docker_db
local     docker_wordpress

WordPressにアクセス

ブラウザから
http://localhost:8080
でWordPressにアクセスすると使えるようになっています。

アップロード制限の設定

デフォルトのままではアップロードするファイルのサイズに制限があるため、テーマなどのアップロードができないことがあります。
アップロードの制限に引っ掛かると「辿ったリンクは期限が切れています。」というエラーがでます。

そのため、アップロードの上限をあげた状態のWordPressを構築します。
上限をあげるためにはphp.iniというファイルで設定します。

docker-compose.yml

まずはローカルで準備したphp.iniをコンテナと共有できるようにDocker Composeの設定ファイルを変更します。

version: "3.1"

services:
  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - wordpress:/var/www/html
      - ./php.ini:/usr/local/etc/php/conf.d/php.ini # ここを追記

  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: "1"
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:

php.ini

次にアップロードの上限をあげるためのphp.iniを用意します。
ここでは500MBに設定してます。

upload_max_filesize = 500M
post_max_size = 500M

実行

カレントディレクトリは以下のようになります。

❯ ls
docker-compose.yml php.ini

docker-composeで実行します。

❯ docker-compose up -d
Docker Compose is now in the Docker CLI, try `docker compose up`

Recreating docker_wordpress_1 ... done
Starting docker_db_1          ... done

cocoonテーマをアップロード

アップロードのサイズの上限をあげたので、無料のテーマとして人気なCocoonをアップロードしてみます。

まずは下記サイトからCocoonの親テーマと子テーマをダウンロードします。

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

アップロードするとうまくいきました。

実際にテーマを設定することもできました。

まとめ

  • Docker ComposeですぐにWordPress環境を構築
  • php.iniでアップロード上限を設定

参照

タイトルとURLをコピーしました