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

![Screenshot 2024-02-28 at 18.33.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374134/6354fd7f-630f-6a73-49c7-960cd1f1c116.png)

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

## 前提条件
macOS 10.13 以上
アクティブな Adobe Commerce のライセンス
Google Chrome
PHP 8.2 以上
[Composer](https://getcomposer.org/)
[Docker Desktop on Mac](https://docs.docker.com/desktop/install/mac-install)
[Mutagen](https://mutagen.io/documentation/introduction/installation)
[Git](https://git-scm.com)
[VSCode](https://code.visualstudio.com/download)


## Docker 環境の構築

### Adobe Commerce Cloud テンプレートのダウンロード
https://github.com/magento/magento-cloud

上記の `magento/magento-cloud` は、Adobe が提供する Adobe Commerce Cloud のクラウド環境へのデプロイ向けに用意されたテンプレートです。オンプレミス版の Adobe Commerce が依存パッケージに含まれており、ブランチ名が Adobe Commerce のバージョンと対応しています。
![Screenshot 2024-02-28 at 17.27.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374134/bab6f81e-d81a-6e4d-6b3b-3c9c1735fbbc.png)

git コマンドで最新のバージョンをクローンします
```
git clone https://github.com/magento/magento-cloud.git
```

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

この記事で扱うAdobe Commerce クラウド版には、[Cloud Docker for Commerce](https://github.com/magento/magento-cloud-docker) がすでに依存パッケージに含まれていますが、オンプレミス版の Adobe Commerce のプロジェクトでは別途ダウンロードし、自分で Docker の設定ファイルを作成する必要があります。詳しくは[こちら](https://developer.adobe.com/commerce/cloud-tools/docker/setup/initialize-docker/#on-premises-projects)の公式ドキュメントをご覧ください。

### アクセスキーの取得
Adobe Commerce の依存パッケージが保管されている、`repo.magento.com` リポジトリサーバーへのアクセスには認証が必要です。

1. [Commerce Marketplace](https://commercemarketplace.adobe.com/) にログインし、右上のユーザー名をクリックし、My Profileを選択します
![Screenshot 2024-02-28 at 11.37.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374134/56eb492e-e5f4-84fa-8d7e-74515998a12a.png)

1. Access Key をクリックします
![Screenshot 2024-02-28 at 11.41.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374134/505a1294-8dfc-7e41-94b3-0aecde683598.png)

1. Create A New Access Key をクリックして、任意の名前を付けて OK をクリックします
![Screenshot 2024-02-28 at 11.43.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374134/658074cf-aba9-692c-16b0-083e661fea4f.png)

1. `magento-cloud` のルートディレクトリに、以下のように `auth.json` を記述し保存します。`<public-key>` と `<private-key>` を 先ほど作成したアクセスキーに置き換えます
    ```json
    {
      "http-basic": {
        "repo.magento.com": {
          "username": "<public-key>",
          "password": "<private-key>"
        }
      }
    }
    ```

### `hosts` ファイルの設定と依存パッケージのインストール
1. `/etc/hosts` に `magento2.docker` を追加します
    ```
    echo "127.0.0.1 magento2.docker" | sudo tee -a /etc/hosts
    ```

1. `magento-cloud` のルートディレクトリに移動します
    ```
    cd magento-cloud
    ```

1. 依存パッケージをインストールします
    ```
    composer update
    ```

1. 管理画面のログインの2段階認証を無効化する (本番環境での無効化は推奨しません)
    ```
     ./bin/magento module:disable Magento_AdminAdobeImsTwoFactorAuth && ./bin/magento module:disable Magento_TwoFactorAuth
    ```

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

### Docker Desktop のリソース設定
![Screenshot 2024-02-28 at 18.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374134/c3d10a3c-1bf1-a07e-8786-e171eb25d74b.png)
Docker 環境をサポートするために、必要となる Docker Desktop のリソースの最小要件は以下になります。Docker Desktop の Preferences にある Resources タブから設定します。
```
CPUs: 2
Memory: 6.00 GB
Swap: 1.00 GB
```

### Docker コンテナの起動
1. ファイルをコンテナにビルドして、バックグラウンドモードで実行します
    ```
    docker compose up -d
    ```

1. Mutagen によるファイル同期を開始します
    ```
    bash ./mutagen.sh
    ```

### Docker 環境に Adobe Commerce のインストール
1. Docker コンテナに Adobe Commerce を デプロイします
    ```
    docker compose run --rm deploy cloud-deploy
    ```

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

1. 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
    ```

1. キャッシュをクリアします
    ```
    docker compose run --rm deploy magento-command cache:clean
    ```

### ストアフロントのページの確認
![Screenshot 2024-02-28 at 11.21.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374134/23ad8f60-adb6-df9f-ff30-45e55c331cee.png)
こちらの URL にブラウザからアクセスして、ページが問題なく開くか確認します。
http://magento2.docker

### 管理画面の確認
![Screenshot 2024-02-28 at 11.23.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374134/fea5442a-2811-1c49-c684-16939fbb1594.png)
こちらの URL にブラウザからアクセスして、問題なくログインできるか確認します。
http://magento2.docker/admin
Username `Admin`
Password `123123q`


## Xdebugの導入

### VSCode 拡張機能のインストール
![Screenshot 2024-02-28 at 10.59.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374134/bc48553c-043f-d2ba-93de-78eee315db78.png)
1. 左サイドメニューにある Extensions タブを開きます
1. 左上の検索バーで「PHP Debug」を検索します
1. Install ボタンをクリックします

1. `.vscode` フォルダを作成し、 `launch.json` を、下記のように記述し保存します。`name` は何でも構いませんが、ここでは Listen for Xdebug とします
    ```json
    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Listen for Xdebug",
          "type": "php",
          "request": "launch",
          "port": 9001,
          "pathMappings": {
            "/app": "${workspaceFolder}"
          }
        }
      ]
    }
    ```
1. 左サイドメニューの Run and Debug から、今作成した Listen for Xdebug を起動します
![Screenshot 2024-02-28 at 10.40.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374134/a0c7d332-f798-2e8b-afa9-c0f4c4b82fdc.png)



### Xdebug helper のインストール
![Screenshot 2024-02-28 at 11.14.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374134/09322b9c-7688-7b43-59a3-74760ad81cda.png)
1. Chrome ウェブストアの [Xdebug helper](https://chromewebstore.google.com/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc) を開きます
1. Chrome に追加ボタンをクリックして、拡張機能をインストールします

### 動作確認
![Screenshot 2024-02-28 at 10.27.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374134/ae094b1b-2b0a-066c-e1af-5b86a884caeb.png)
`bootstrap.php` などにブレークポイントを配置し、Adobe Commerce の任意のページを読み込んだ際に、実行が該当箇所で止まることを確認できれば成功です。