Zenn
Open5

EC-CUBE4.3 x Docker のローカル開発環境を構築する

Docker
EC-CUBE
Y.Y.

EC-CUBEのフロント開発体験を少しでも良くするためのスクラップ

環境

  • Windows11
  • WSL2(Ubuntu 24.04.1)
  • Docker Desktop
  • Node.js 22.12.0

方針

  • 複雑なSassのディレクトリ構造を簡素化
  • CSSのカスタムプロパティを使用して変数の管理をする
  • BootstrapからTailwind CSSへの移行（できれば）
Y.Y.

EC-CUBE公式のリポジトリをクローン

git clone https://github.com/EC-CUBE/ec-cube.git
Y.Y.

Mac Apple siliconの場合、そのままdocker-compose up -dしても次のエラーがでる

2025-03-20 19:21:07 > bin/console doctrine:database:create
2025-03-20 19:21:08 Script bin/console doctrine:database:create handling the installer-scripts event returned with error code 1
2025-03-20 19:21:08 Could not create database `eccubedb` for connection named default
2025-03-20 19:21:08 An exception occurred in the driver: SQLSTATE[HY000] [2019] Unknown character set

このIssueが参考になる
https://github.com/EC-CUBE/ec-cube/issues/5847

以下ファイル2箇所のコメントアウトを外す

.github/workflows/dockerbuild.yml
ec-cube/.github/workflows/dockerbuild.yml

Lines 44 to 48 in 1815e6a

 ## Used when creating multi-platform images 
 # - name: Set up QEMU 
 #   uses: docker/setup-qemu-action@v2 
 # - name: Set up Docker Buildx 
 #   uses: docker/setup-buildx-action@v2
.github/workflows/dockerbuild.yml
 # platforms: linux/amd64,linux/arm64
Y.Y.

EC-CUBEのインストール

docker compose exec -u www-data ec-cube bin/console eccube:install -n

docker-compose up -d でローカルサーバーが起動し、http://localhost:8080/ にアクセスできるようになる

Y.Y.

npm i後にnpm run startをしても、ターミナル上に大量の警告がでる。
SassとBootstrapの互換性の問題っぽい。

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ┌──> node_modules/bootstrap/scss/_type.scss
38  │       font-family: $display-font-family;
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │       @content;
138 │ │     }
    │ └─── nested rule
    ╵
    node_modules/bootstrap/scss/_type.scss 38:5                             @import
    node_modules/bootstrap/scss/bootstrap.scss 17:9                         @import
    html/template/admin/assets/scss/component/_bootstrapOriginal.scss 28:9  @import
    html/template/admin/assets/scss/bootstrap.scss 1:9                      root stylesheet

sassのバージョンを下げて警告を出さないようにする

npm i sass@1.62.0