【入門】Docker + Laravel11 + Apache + MySQL環境構築【かゆいところに手が届くかも】



最近Laravel11をDocker環境に移行してみたので
メモ代わりとして記載しようと思います！！
ついでにXDebugの設定も載せておきます

:::note warn
※本記事は新規で構築することを想定しています。
:::

## 環境
* Docker
* Laravel11
    * Vite
* Apache(php:8.3.7-apache)
* MySQL(8.0.37)
* VSCode
* Adminer（MySQLのクライアントツール）

## 構成
全体の構成としてはざっくりこんな感じ
```
project_root(名前は任意)/
    ├── laravel/
    │   └── ※ここにcreate-projectで生成されるものが展開される
    ├── docker/
    │   ├── mysql/
    │   │   ├── Dockerfile
    │   │   └── my.cnf
    │   ├── php/
    │   │   ├── Dockerfile
    │   │   └── php.ini
    │   └── .vscode/
    │       └── launch.json
    └── docker-compose.yml
```

### 手順
ではやっていきましょう。Let's Go

↓↓docker-compose.ymlを作成↓↓
```
services:
  # MySQLのコンテナ
  db:
    build: ./docker/mysql
    container_name: db-container
    volumes:
      - ./docker/mysql/data:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=mysql
      - MYSQL_DATABASE=database
      - MYSQL_USER=user
      - MYSQL_PASSWORD=任意のパスワード
      - TZ=Asia/Tokyo
    ports:
      - '3306:3306'

  # アプリのコンテナ
  app:
    build: ./docker/php
    container_name: app-container
    volumes:
      - ./docker/php/php.ini:/usr/local/etc/php/php.ini
      - ./laravel:/var/www
    ports:
      - '3000:80'     # laravelのポート（バックエンド）
      - '5173:5173'   # viteのポート（フロントエンド）
    expose:
      - 9003
    depends_on:
      - db

  # MySQLのクライアントツール
  adminer:
    image: adminer:latest
    ports:
      - '8080:8080'
    depends_on:
      - db
```

↓↓docker/php/Dockerfileの作成↓↓
```
FROM php:8.3.7-apache

# ドキュメントルートを変更
ENV APACHE_DOCUMENT_ROOT /var/www/public
RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf
RUN sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf

# パッケージインストール
RUN apt-get update && apt-get install -y \
    libicu-dev \
    libonig-dev \
    libzip-dev \
    zlib1g-dev \
    unzip \
    locales \
    vim \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

# Apache の rewrite_module を有効化
RUN a2enmod rewrite

# PHP のエクステンションをインストール 〜コメントアウトしているライブラリはお好みで〜
RUN docker-php-ext-install \
    # ctype \
    # curl \
    # dom \
    # fileinfo \
    # filter \
    # hash \
    intl \
    # json \
    # mbstring \
    # openssl \
    # pcre \
    # PDO \
    pdo_mysql \
    # pdo_sqlite \
    # session \
    # tokenizer \
    # xml \
    zip

RUN pecl install xdebug && \
    docker-php-ext-enable xdebug

# Composer インストール
COPY --from=composer /usr/bin/composer /usr/bin/composer

# コンテナログイン時のパス指定
WORKDIR /var/www
```

↓↓docker/mysql/php.iniの作成↓↓
```
zend.exception_ignore_args = off
expose_php = on
max_execution_time = 30
max_input_vars = 1000
upload_max_filesize = 64M
post_max_size = 128M
memory_limit = 256M
error_reporting = E_ALL
display_errors = on
display_startup_errors = on
log_errors = on
error_log = /dev/stderr
default_charset = UTF-8
extension=intl


[Date]
date.timezone = ${TZ}

[mysqlnd]
mysqlnd.collect_memory_statistics = on

[Assertion]
zend.assertions = 1

[mbstring]
mbstring.language = Japanese

[XDebug]
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.discover_client_host = 0
xdebug.client_host=host.docker.internal
xdebug.client_port=9003
xdebug.log=/var/log/xdebug/xdebug.log
```

↓↓docker/mysql/Dockerfileの作成↓↓
```
FROM mysql:8.0.37

COPY ./my.cnf /etc/mysql/conf.d/my.cnf
RUN chmod 644 /etc/mysql/conf.d/my.cnf
```

↓↓docker/mysql/my.cnfの作成↓↓
```
[mysqld]
character-set-server = utf8mb4
collation-server = utf8mb4_general_ci

[mysql]
default-character-set = utf8mb4

[client]
default-character-set = utf8mb4
```

では、project_rootにcdしてdockerの起動！
```
docker compose up -d
```

appコンテナに入りLaravelを導入する
```
docker compose exec app bash
```
```
composer create-project --prefer-dist "laravel/laravel=11.*" .
```

一応、storageディレクトリにサーバからの書き込み権限が必要らしいので付与しておく
(appコンテナ内で実行する)
```
chmod -R 777 storage bootstrap/cache
```

続きまして、VSCodeで生成されたLaravelプロジェクトの直下にある.envファイルを
以下のように編集します。
```diff_te_x
APP_NAME=Laravel
APP_ENV=local
APP_KEY=ここはcreate-projectしたら勝手に生成される
APP_DEBUG=true
- APP_TIMEZONE=UTC
+ APP_TIMEZONE=Asia/Tokyo
APP_URL=http://localhost

- APP_LOCALE=en
+ APP_LOCALE=ja
APP_FALLBACK_LOCALE=en
- APP_FAKER_LOCALE=en_US
+ APP_FAKER_LOCALE=ja_JP

・・・

- DB_CONNECTION=sqlite
- # DB_HOST=127.0.0.1
- # DB_PORT=3306
- # DB_DATABASE=laravel
- # DB_USERNAME=root
- # DB_PASSWORD=
+ DB_CONNECTION=mysql
+ DB_HOST=db
+ DB_PORT=3306
+ DB_DATABASE=database
+ DB_USERNAME=user
+ DB_PASSWORD=任意のパスワード

- SESSION_DRIVER=database
+ SESSION_DRIVER=file
```

.envファイルの編集を適用するために以下のコマンドを実行（appコンテナ内で）
```
php artisan config:clear
```

dockerのコンテナを起動していれば
　http://localhost:3000
をブラウザから開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3910454/0bacc9f2-d599-7c6a-fb36-951c3e7bf713.png)

↑こういう画面が起動すればOK

## おまけ　〜XDebugの設定〜
冒頭で述べた通り、設定やっていきます

vscodeの上部のメニューから
「実行>構成の追加>PHP」を開き、launch.jsonを作成し、以下のように編集します

```
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/var/www/": "${workspaceRoot}/laravel"
      }
    },
  ]
}
```

上記を保存後、VSCodeで「F5」キーを押して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3910454/d6cca5e9-30e5-c86e-c497-7e0c71b9ec51.png)

こんなんが出てくればOKです！
※ポート競合に注意です

あれ？MySQL触れてないじゃん、では次回にて！

以上！！！！