Docker上に構築したWordpressで画像編集に失敗する問題の対応

Docker-Composeでnginx,php,mysqlの３コンテナを連携し構築したWordpressにおいて
メディアフィルの編集でエラーとなる現象がありました。その原因と対処方法を公開します。

尚、上記前提となる環境については以下の記事を参照ください。

Docker-Composeでnginx,php,mysqlの３コンテナを連携する

DockerコンテナにWordPressをインストール

１．現象
２．原因
３．対処
４．リバースプロキシ用ymlファイル

１．現象

Docker-Composeでコンテナ連携をして構築したWordpressにおいてメディアファイルを編集しようとすると以下の通りエラーとなり先に進めません。

(1)メディアファイルの選択

(2)画像を編集ボタンを押した後の画面

「ご利用中のホスティング環境は画像の回転機能に対応していません。」と表示され先に進めない。

２．原因

Centos上に構築したWordpressでは正常に画像を編集できますのでおそらくDocker環境の問題です。参考にさせて頂いたのはこちらの記事。

dockerのphp公式イメージでGDライブラリを使用する
どうもgdライブラリが無いと画像の編集ができないらしい。

但し、上記参考記事は、当構築環境と異なるコンテナを使用しているのでそのまま流用はできません。gdライブラリが無いからエラーになると仮定してさらに対応方法を調査しました。

すると。GitHubにphpのisueとして「Can’t install php7.0-gd #403」が登録されていました。まさしく同じコンテナで発生している問題なのでこの内容を取り込んで試してみます。

３．対処

DockerFileにスクリプトを追記し、php:7-fpmコンテナの起動時にgdライブラリと
必要な関連モジュールをインストールし環境を設定するようにします。

(1)DockerFile

以下の通り8行目から15行目までを追記しています。BaseにしたDockerFileは「Dockerコンテナ・ホスト間のフォルダ権限管理を改善」の内容を取り込んだファイルです。

FROM php:7-fpm
MAINTAINER gtrt7@
ARG AGENT_UID=1000
ARG AGENT_GID=1000
RUN apt-get update && docker-php-ext-install pdo_mysql mysqli mbstring\
    && groupadd -g ${AGENT_GID} nginx_docker\
    && useradd -d /home/docker -u ${AGENT_UID} -g nginx_docker nginx_docker
+RUN apt-get update && apt-get install -y \
+    libfreetype6-dev \
+    libjpeg62-turbo-dev \
+    libmcrypt-dev \
+    libpng12-dev \
+    && docker-php-ext-install -j$(nproc) iconv mcrypt \
+    && docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \
+    && docker-php-ext-install -j$(nproc) gd

FROM php:7-fpm

MAINTAINER gtrt7@

ARG AGENT_UID=1000

ARG AGENT_GID=1000

RUN apt-get update && docker-php-ext-install pdo_mysql mysqli mbstring\

&& groupadd -g ${AGENT_GID} nginx_docker\

&& useradd -d /home/docker -u ${AGENT_UID} -g nginx_docker nginx_docker

+RUN apt-get update && apt-get install -y \

+ libfreetype6-dev \

+ libjpeg62-turbo-dev \

+ libmcrypt-dev \

+ libpng12-dev \

+ && docker-php-ext-install -j$(nproc) iconv mcrypt \

+ && docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \

+ && docker-php-ext-install -j$(nproc) gd

(2)再起動

ビルドオプション付き再起動をしDockerFileの修正をphp:7-fpmへ反映させます。

# docker-compose down
# docker-compose up -d --build

1 2	# docker-compose down # docker-compose up -d --build

(3)動作確認

以下の通り画像編集ができるようになりました。

４．リバースプロキシ用ymlファイル

以下はリバースプロキシ下で動作させる場合のYMLファイルです。

「DockerコンテナにNginxリバースプロキシを導入」をベース環境としてWordpressを導入した場合の設定になります。ここでWordpressはhogehoge1.comで動作している前提です。

version: '2'
services:
  sqldata:
    image: busybox
    volumes:
      - ./data/mysql:/var/lib/mysql

  wwwdata:
    image: busybox
    volumes:
      - ./data/www:/var/www/html

  nginx: 
    build: ./nginx
    links: 
      - php7
    volumes:
      - ./nginx/server.conf:/etc/nginx/conf.d/server.conf
      - /etc/localtime:/etc/localtime:ro
    volumes_from:
      - wwwdata
    environment:
      VIRTUAL_HOST: hogehoge1.jp
    restart: always
    logging:
      driver: syslog

  php7: 
    build: ./php7
    links: 
      - "db"
    volumes:
      - ./php7/php.ini:/usr/local/etc/php/php.ini
      - ./php7/www.conf:/usr/local/etc/php-fpm.d/zzz-www.conf
      - /etc/localtime:/etc/localtime:ro
    volumes_from:
      - wwwdata
    depends_on:
      - "db"
    logging:
      driver: syslog

  db:
     image: mysql
    volumes:
      - /etc/localtime:/etc/localtime:ro
    volumes_from:
      - sqldata
    logging:
     driver: syslog
    environment:
      MYSQL_ROOT_PASSWORD: "XXXXXXXX"
      TZ: "Asia/Tokyo"
    
networks:
  default:
    external:
      name: common_link

version: '2'

services:

sqldata:

image: busybox

volumes:

- ./data/mysql:/var/lib/mysql

wwwdata:

image: busybox

volumes:

- ./data/www:/var/www/html

nginx:

build: ./nginx

links:

- php7

volumes:

- ./nginx/server.conf:/etc/nginx/conf.d/server.conf

- /etc/localtime:/etc/localtime:ro

volumes_from:

- wwwdata

environment:

VIRTUAL_HOST: hogehoge1.jp

restart: always

logging:

driver: syslog

php7:

build: ./php7

links:

- "db"

volumes:

- ./php7/php.ini:/usr/local/etc/php/php.ini

- ./php7/www.conf:/usr/local/etc/php-fpm.d/zzz-www.conf

- /etc/localtime:/etc/localtime:ro

volumes_from:

- wwwdata

depends_on:

- "db"

logging:

driver: syslog

db:

image: mysql

volumes:

- /etc/localtime:/etc/localtime:ro

volumes_from:

- sqldata

logging:

driver: syslog

environment:

MYSQL_ROOT_PASSWORD: "XXXXXXXX"

TZ: "Asia/Tokyo"

networks:

default:

external:

name: common_link