EC-CUBE4のローカル環境をDocker Composeで構築してみた (M1対応)

ここで紹介するdocker環境ではEC-CUBE4.1.2の環境で動作を確認しました。
その他のバージョンではテストをしていませんので、動いたらラッキー程度にお考えください。

EC-CUBE公式のdockerがいまひとつな件

千葉県某所でWEBエンジニアをしています。

主な業務内容はEC-CUBEのカスタマイズなのですがEC-CUBE4公式のdocker環境の使い勝手が悪い気がしています。

公式はdocker関連のファイルとソースコードが同じ階層に配置されていて、なぜかdocker-compose.yml系のファイルを使用するイメージによって分けていたりと...何かとごちゃごちゃしている気がするのは僕だけでしょうか。(M1macへの対応もされていない。)

仕事では公式のdockerではなくインフラさんが作ってくださったdocker環境を使っているのですが、それがとっても使いやすい！！
インフラさんが作ってくれたようなdocker環境を自力で作りたいと思いやってみました。

実現したいこと

• docker関連のファイルとソースコードの階層を分ける
• Apple Silicon 対応
• phpMyAdminを使えるようにする。

検証端末

ハードウェア	OS	CPU
MacBook Air(Retina, 13-inch, Late 2020)	macOS Monterey 12.2.1	Apple M1
MacBook Pro(Retina, 15-inch, Late 2013)	macOS Big Sur 11.6.4	Intel Core i7
GPD P2 MAX	Ubuntu20.04	Intel Core m3-8100Y

ファイル構成

projectName/
  Dockerfile
  docker-compose.yml
  eccube/EC-CUBE4のソースコード
  entrypoint.sh

docker-compose.yml

※インデントにお気をつけください

docker-compose.yml

version: '3'

services:
  db:
    # image: mysql:5.7
    # image: mariadb:10.3
    # platform: linux/amd64
    container_name: eccube_db
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: eccubedb
      MYSQL_USER: dbuser
      MYSQL_PASSWORD: secret
    volumes:
      - eccube-db-data:/var/lib/mysql
    ports:
      - 3306:3306

  phpmyadmin:
    container_name: phpmyadmin
    image: phpmyadmin/phpmyadmin
    ports:
      - 8888:80
    environment:
      PMA_HOST: eccube_db
      PMA_USER: dbuser
      PMA_PASSWORD: secret

  app:
    build: .
    container_name: eccube
    volumes:
      - ./eccube:/var/www/html
    ports:
      - 8080:80
    stdin_open: true
    tty: true
    depends_on:
      - db

volumes:
  eccube-db-data:
    driver: local

Dockerfile

FROM php:7.4-apache

RUN set -x
RUN sed -i.bak -e "s%http://deb.debian.org/debian%http://ftp.riken.jp/pub/Linux/debian/debian%g" /etc/apt/sources.list

RUN apt update \
    && apt install -y libzip-dev \
    && apt install -y npm \
    && docker-php-ext-install zip
RUN apt install -y --no-install-recommends \
    sudo \
    git \
    libxml2-dev \
    unzip \
    wget \
    zlib1g-dev \
    iproute2 \
    libsqlite3-dev \
    libpq-dev \
    libicu-dev \
    gnupg2 \
    zlib1g-dev \
    libonig-dev \
    python
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash - \
    && apt update \
    && apt install -y nodejs \
    && apt clean
RUN docker-php-ext-install \
    intl \
    mbstring \
    pdo \
    pdo_sqlite \
    pdo_mysql \
    pdo_pgsql \
    soap \
    xml \
    zip
RUN pecl install xdebug
RUN pecl install apcu
RUN docker-php-ext-enable \
    xdebug \
    apcu \
    opcache \
    && a2enmod rewrite \
    && apt clean \
    && rm -rf /tmp/*

RUN curl -sS https://getcomposer.org/installer \
    |  php -- \
    --filename=composer \
    --install-dir=/usr/local/bin \
    && chown www-data /var/www \
    && chmod g+s /var/www/html

COPY ./entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh

ENTRYPOINT ["/entrypoint.sh"]

CMD ["apache2-foreground"]

entrypoint.sh

entrypoint.sh

#!/bin/sh
set -e

# www-dataのUIDを変更する
if [ -n "${HOST_UID}" -a "${HOST_UID}" != "$(id -u www-data)" ]; then
    usermod -u "${HOST_UID}" www-data
fi

if [ -e "composer.json" ]; then
    composer install
fi

if [ -e "package.json" ]; then
    npm install
fi

exec "$@"%

EC-CUBE公式のソースコードをcloneします。

https://github.com/EC-CUBE/ec-cube
※eccubeというディレクトリ名でcloneする点に注意してください。

git clone [e-mail]:EC-CUBE/ec-cube.git eccube

DBイメージの選択

次にアーキテクチャ別でDBのイメージを選択します。

docker-compose.ymlのコメントアウトしている箇所を変更していきます。

docker-compose.yml 4~7行目

db:
  # image: mysql:5.7
  # image: mariadb:10.3
  # platform: linux/amd64

x86/x64 (Intel や AMD のCPUの場合)

docker-compose.yml 4~7行目

db:
  image: mysql:5.7
  # image: mariadb:10.3
  # platform: linux/amd64

arm (Apple Silicon 搭載の mac の場合)

docker-compose.yml 4~7行目

db:
  # image: mysql:5.7
  image: mariadb:10.3
  # platform: linux/amd64

or

docker-compose.yml 4~7行目

db:
  image: mysql:5.7
  # image: mariadb:10.3
  platform: linux/amd64

ビルド 〜 インストール 〜 フロントの表示

ビルド

ファイルが揃ったのでビルドします。

HOST_UID=$(id -u) docker-compose up --build

下記のログが確認できたらビルド成功です。

'apache2 -D FOREGROUND'

.envの削除

デフォルトでは　.env.dist　がそのまま .env にコピーされます。
デフォルトの設定内容がdocker-compose.ymlと異なるため一度 .env 削除してEC-CUBEをインストールし直す必要があります。

localhost:8080にアクセスするとEC-CUBEのインストール画面が表示されます。

インストール画面の設定

STEP1

[次へ進む] を押してください。

STEP2

アクセス権限が正常であれば [次へ進む] を押してください。

※ubuntuではこの画面が表示されませんでした。
コンテナ内に入り、パーミッションを変更しました。

cd path/to/projectName
docker-compose exec app /bin/bash
chmod -R 777 .

ローカル環境なので全権限を許可しました。

STEP3

必須部分のみの入力で問題ありません。
管理画面のディレクトリ名には「admin」以外を設定し、 [次へ進む] を押してください。

STEP4

mariaDBを選択した場合でもデータベースの選択はMySQLで問題ありません。

docker-compose.ymlのデータベースの設定情報をもとに入力します。

docker-compose.yml 3,4行目

services:
  db: # データベースのホスト名

docker-compose.yml 8~17行目

    container_name: eccube_db
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: eccubedb # データベース名
      MYSQL_USER: dbuser # ユーザ名
      MYSQL_PASSWORD: secret # パスワード
    volumes:
      - eccube-db-data:/var/lib/mysql
    ports:
      - 3306:3306 # データベースのポート番号

STEP5

[次へ進む] を押します。

STEP6

これでインストールが完了です。

URL

フロント画面

phpMyAdmin

所感

dockerの環境構築を通じて、理解が深まりました。

自力で環境構築できるようになっておくだけでも気持ちの持ちようが変わった気がします。

GitHub

今回ご紹介したdocker環境をクローンできます、

参考にしたサイト