LoginSignup
3
0

Adobe Commerce の Docker によるローカル開発環境を構築する

Last updated at Posted at 2024-03-04

Screenshot 2024-02-28 at 18.33.55.png

2020年に、Magento コミュニティの開発者たちによって Cloud Docker for Commerce という Docker コンテナへのデプロイ自動化ツールがリリースされました。Adobe Commerce のローカル開発環境の構築が容易になり、PHPの定番デバッグツールである Xdebug を組み合わせれば、さらに開発効率を向上させることができます。
この記事では、その具体的な手順をご紹介します。Cloud Docker for Commerce の公式ドキュメントはこちらです。

前提条件

macOS 10.13 以降
アクティブな Adobe Commerce のライセンス
Google Chrome
Docker Desktop on Mac
Mutagen
Git
VSCode

Docker 環境の構築

Adobe Commerce Cloud テンプレートのダウンロード

上記の magento/magento-cloud は、Adobe が提供する Adobe Commerce Cloud のクラウド環境へのデプロイ向けに用意されたテンプレートです。オンプレミス版の Adobe Commerce が依存パッケージに含まれており、ブランチ名が Adobe Commerce のバージョンと対応しています。
Screenshot 2024-02-28 at 17.27.26.png

git コマンドで最新のバージョンをクローンします

git clone https://github.com/magento/magento-cloud.git

冒頭でご紹介した Cloud Docker for Commerce も、依存パッケージに含まれているので、通常ダウンロードする必要はありません。しかし、Docker イメージを自分でビルドする場合(ARM64 プラットフォーム向けの Docker イメージの作成 で後述)、下記の magento/magento-cloud-docker リポジトリから別途ダウンロードする必要があります。

Adobe Commerce オンプレミス版について

オンプレミス版の Adobe Commerce のプロジェクトでも、自分で Docker の設定ファイルを作成し、magento/magento-cloud-docker リポジトリ内のツールを使うことで、ほぼ同じ手順で進めることができます。詳しくはこちらの公式ドキュメントをご覧ください。

アクセスキーの取得

Adobe Commerce の依存パッケージが保管されている、repo.magento.com リポジトリサーバーへのアクセスには認証が必要です。magento-cloud のルートディレクトリに、アクセスキーを含む auth.jsonファイルを作成します。

  1. Commerce Marketplace にログインし、右上のユーザー名をクリックし、My Profileを選択します
    Screenshot 2024-02-28 at 11.37.21.png

  2. Access Key をクリックします
    Screenshot 2024-02-28 at 11.41.29.png

  3. Create A New Access Key をクリックして、任意の名前を付けて OK をクリックします
    Screenshot 2024-02-28 at 11.43.32.png

  4. magento-cloud のルートディレクトリに、以下のように auth.json を記述し保存します。<public-key><private-key> を 先ほど作成したアクセスキーに置き換えます

    {
      "http-basic": {
        "repo.magento.com": {
          "username": "<public-key>",
          "password": "<private-key>"
        }
      }
    }
    

hosts ファイルの設定と依存パッケージのインストール

  1. /etc/hostsmagento2.docker を追加します

    echo "127.0.0.1 magento2.docker" | sudo tee -a /etc/hosts
    
  2. magento-cloud のルートディレクトリに移動します

    cd magento-cloud
    
  3. 依存パッケージをインストールします

    composer update
    

docker-compose.yml の作成

  1. ece-docker ツールを使って、docker-compose.yml を作成します
    ./vendor/bin/ece-docker build:compose --mode="developer" --sync-engine="mutagen"  --with-xdebug
    

ARM64 プラットフォーム向けの Docker イメージの作成

M1 Mac などの ARM64 プラットフォームの場合にのみ、必要な手順です

2024年2月現在、 Docker Hub で公開されている Magento の Docker イメージは全て AMD64 プラットフォーム向けです。Apple Sillicon 搭載の Mac などの ARM64 プラットフォームを使用されている場合、Docker イメージを自分でビルドする必要があります。Issue として報告され Backlog に入っているので、近日不要になると思われます。

  1. magento-clouddocker-compose.yml に記述されている、Docker イメージ名末尾のバージョンを確認します(この場合 1.3.6

    ...
    opensearch:
        hostname: opensearch.magento2.docker
        image: 'magento/magento-cloud-docker-opensearch:2.4-1.3.6'
    ...
    
  2. magento/magento-cloud-docker リポジトリをクローンします

    git clone https://github.com/magento/magento-cloud-docker.git
    
  3. magento-cloud-docker のルートディレクトリに移動します

    cd magento-cloud-docker
    
  4. 確認したバージョンをチェックアウトします

    git checkout refs/tags/1.3.6
    
  5. 必要なイメージをビルドします

    docker image build --platform=linux/arm64/v8 -t magento/magento-cloud-docker-opensearch:2.4-1.3.6 ./images/opensearch/2.4
    
    docker image build --platform=linux/arm64/v8 -t magento/magento-cloud-docker-php:8.2-fpm-1.3.6 ./images/php/8.2-fpm
    
    docker image build --platform=linux/arm64/v8 -t magento/magento-cloud-docker-nginx:1.19-1.3.6 ./images/nginx/1.19
    
    docker image build --platform=linux/arm64/v8 -t magento/magento-cloud-docker-varnish:6.6-1.3.6 ./images/varnish/6.6
    
    docker image build --platform=linux/arm64/v8 -t magento/magento-cloud-docker-php:8.2-cli-1.3.6 ./images/php/8.2-cli
    
    docker image build --platform=linux/arm64/v8 -t magento/magento-cloud-docker-mailhog:1.0-1.3.6 ./images/mailhog/1.0
    

Docker Desktop のリソース設定

Screenshot 2024-02-28 at 18.21.25.png
Docker 環境をサポートするために、必要となる Docker Desktop のリソースの最小要件は以下になります。Docker Desktop の Preferences にある Resources タブから設定します。

CPUs: 2
Memory: 6.00 GB
Swap: 1.00 GB

Docker コンテナの起動

  1. ファイルをコンテナにビルドして、バックグラウンドモードで実行します

    docker compose up -d
    
  2. Mutagen によるファイル同期を開始します

    bash ./mutagen.sh
    

Docker 環境に Adobe Commerce のインストール

  1. Docker コンテナに Adobe Commerce を デプロイします

    docker compose run --rm deploy cloud-deploy
    
  2. post-deploy フックを走らせます

    docker compose run --rm deploy cloud-post-deploy
    
  3. Varnishに 接続します

    docker compose run --rm deploy magento-command config:set system/full_page_cache/caching_application 2 --lock-env
    
    docker compose run --rm deploy magento-command setup:config:set --http-cache-hosts=varnish
    
  4. キャッシュをクリアします

    docker compose run --rm deploy magento-command cache:clean
    

ストアフロントのページの確認

Screenshot 2024-02-28 at 11.21.46.png
こちらの URL にブラウザからアクセスして、ページが問題なく開くか確認します。
http://magento2.docker

管理画面の確認

Screenshot 2024-02-28 at 11.23.08.png
こちらの URL にブラウザからアクセスして、問題なくログインできるか確認します。
http://magento2.docker/admin
Username Admin
Password 123123q

Xdebugの導入

VSCode 拡張機能のインストール

Screenshot 2024-02-28 at 10.59.31.png

  1. 左サイドメニューにある Extensions タブを開きます

  2. 左上の検索バーで「PHP Debug」を検索します

  3. Install ボタンをクリックします

  4. .vscode フォルダを作成し、 launch.json を、下記のように記述し保存します。name は何でも構いませんが、ここでは Listen for Xdebug とします

    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Listen for Xdebug",
          "type": "php",
          "request": "launch",
          "port": 9001,
          "pathMappings": {
            "/app": "${workspaceFolder}"
          }
        }
      ]
    }
    
  5. 左サイドメニューの Run and Debug から、今作成した Listen for Xdebug を起動します
    Screenshot 2024-02-28 at 10.40.33.png

Xdebug helper のインストール

Screenshot 2024-02-28 at 11.14.04.png

  1. Chrome ウェブストアの Xdebug helper を開きます
  2. Chrome に追加ボタンをクリックして、拡張機能をインストールします

動作確認

Screenshot 2024-02-28 at 10.27.56.png
bootstrap.php などにブレークポイントを配置し、Adobe Commerce の任意のページを読み込んだ際に、実行が該当箇所で止まることを確認できれば成功です。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0