Laravelの開発環境をDockerで構築する

Laravelの開発環境をDockerでサクっと構築していきます。

この記事ではDockerのベースイメージにPHPを使用していますが、bitnami/laravelを使用すれば数分で環境を構築できますので、そちらのほうがお勧めです。

環境
Windows
10 home (20H2)
WSL
2
Ubuntu
20.04 LTS
Docker Desktop for Windows
4.8.2 (79419)
VSCode
1.68.1
  • 必要な前提知識
    • WSL2
    • Docker
      • Docker Compose
    • VSCode
      • Remote Development
  • その他・補足
    • DB関連は用意したが未使用なので動作は未確認

ビルドコンテキスト

/project_dir/
|-- .devcontainer/
|   |-- php/
|   |   |-- Dockerfile
|   |   |-- php.ini-development
|   |   |-- php.ini
|   |   `-- xdebug.ini
|   |-- .env
|   |-- docker-compose.yml
|   `-- devcontainer.json
`-- src/
    `-- public_html/

.devcontainer/

php/

DockerのベースイメージであるPHPに関する設定を書いていきます。

Dockerfile

nodeをマルチステージビルドを使用して追加していますが必要無ければ削除します。
また、Apacheのドキュメントルートもエックスサーバーの仕様に合わせてpublic_htmlへと書き換えていますが、こちらも必要なければ削除します。その他のパッケージも同様です。

FROM node:14.18.1-slim as node
FROM php:8.0-apache

ARG UID=${USER_ID}
ARG GID=${GROUP_ID}
ARG UNAME=${USER_NAME}
ARG APACHE_DOCUMENT_ROOT= ${APACHE_DOCUMENT_ROOT}

COPY --from=node /usr/local/bin/node /usr/local/bin/node
COPY --from=node /usr/local/lib/node_modules /usr/local/lib/node_modules
RUN ln -s /usr/local/bin/node /usr/local/bin/nodejs && \
    ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm && \
    ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npx

COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

COPY ./php.ini-development /usr/local/etc/php/conf.d/dev.ini
COPY ./php.ini /usr/local/etc/php/conf.d/php.ini
COPY ./xdebug.ini /usr/local/etc/php/conf.d/xdebugs.ini

RUN sed -ri -e 's!/var/www/html!'${APACHE_DOCUMENT_ROOT}'!g' /etc/apache2/sites-available/*.conf && \
    sed -ri -e 's!/var/www/!'${APACHE_DOCUMENT_ROOT}'!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf && \
    a2enmod rewrite

RUN apt-get update && apt-get -y install --no-install-recommends \
    curl \
    git \
    openssh-client \
    libpng-dev \
    libonig-dev \
    libxml2-dev \
    ssh-agent-filter \
    unzip \
    zip && \
    apt-get clean && rm -rf /var/lib/apt/lists/*
RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd
RUN pecl install xdebug && \
    docker-php-ext-enable xdebug && \
    rm -r /tmp/pear

RUN groupadd -g $GID $UNAME && \
    useradd -u $UID -g $GID -o -s /bin/bash -m $UNAME && \
    usermod -aG www-data $UNAME

USER $UID

php.ini-development

開発用の設定値が書かれたphp.iniであるphp.ini-developmentです。
今回使用するイメージ、php:8.0-apacheで作成したコンテナに同梱されているファイル(/usr/local/etc/php/php.ini-development)をコピペしました。

...

;;;;;;;;;;;;;;;;;;;
; About php.ini   ;
;;;;;;;;;;;;;;;;;;;
; PHP's initialization file, generally called php.ini, is responsible for
; configuring many of the aspects of PHP's behavior.

...

php.ini

php.ini-developmentの設定値で変更するものを記入します。コンテナ側で上書き結合されます。

[Date]
; Defines the default timezone used by the date functions
; http://php.net/date.timezone
date.timezone = Asia/Tokyo

[mbstring]
; language for internal character representation.
; This affects mb_send_mail() and mbstring.detect_order.
; http://php.net/mbstring.language
mbstring.language = Japanese

xdebug.ini

Xdebugに関する設定を記入します。こちらもコンテナ側で上書き結合されます。

[xdebug]
xdebug.client_host = host.docker.internal
; xdebug.log = /tmp/xdebug.log
; xdebug.var_display_max_children = -1
; xdebug.var_display_max_data = -1
; xdebug.var_display_max_depth = -1
xdebug.mode = develop,debug
xdebug.start_with_request = trigger

.env

Dockerfile,docker-compose.ymlへ渡す変数を定義します。

CONTAINER_NAME=laravel

PORT_WEB=8080
PORT_PA=8081
PORT_DB=3306

USER_NAME=dev
USER_ID=1000
GROUP_ID=1000

APACHE_DOCUMENT_ROOT=/var/www/html/public_html

docker-compose.yml

version: '3'

services:
  web:
    build: 
      context: ./php
      args:
        UID: ${USER_ID}
        GID: ${GROUP_ID}
        UNAME: ${USER_NAME}
        APACHE_DOCUMENT_ROOT: ${APACHE_DOCUMENT_ROOT}
    image: php8
    container_name: ${CONTAINER_NAME}
    ports: 
      - ${PORT_WEB}:80
    volumes:
      - ../src:/var/www/html
    tty: true
    stdin_open: true
    depends_on:
      - db

  phpmyadmin:
    image: phpmyadmin:latest
    ports:
      - ${PORT_PA}:80
    environment:
      PMA_HOST: db:${PORT_DB}
      PMA_USER: user
      PMA_PASSWORD: user
    depends_on:
      - db

  db: 
    image: mariadb:10.5
    ports:
      - ${PORT_DB}:3306
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --default-time-zone=Asia/Tokyo
    volumes: 
      - db_data:/var/lib/mysql
    environment:
      MARIADB_ROOT_PASSWORD: password
      MARIADB_DATABASE: database
      MARIADB_USER: user
      MARIADB_PASSWORD: user
      MYSQL_TCP_PORT: ${PORT_DB}
      TZ: Asia/Tokyo

volumes:
    db_data:

変数展開後の状態確認には以下のコマンドを実行します。

$ pwd
~/path/to/project_dir/.devcontainer

$ docker-compose config
services:
 web:
    build:
      args:
        APACHE_DOCUMENT_ROOT: /var/www/html/public_html
        GID: '1000'
        UID: '1000'
        UNAME: dev
.....

devcontainer.json

以下は一例です。拡張機能や設定などは環境に合わせて編集してください。

{
	"name": "Laravel",
	"dockerComposeFile": "./docker-compose.yml",
	"service": "web",
	"workspaceFolder": "/var/www/html",
	"overrideCommand": false,
	"extensions": [
		"bmewburn.vscode-intelephense-client",
		"editorconfig.editorconfig",
		"felixfbecker.php-debug",
		"howardzuo.vscode-favorites",
		"mehedidracula.php-namespace-resolver",
		"mrmlnc.vscode-apache",
		"mrmlnc.vscode-scss",
		"ms-ceintl.vscode-language-pack-ja",
		"oderwat.indent-rainbow"
	],
	"settings": {
		"indentRainbow.colors": [
			"rgba(255,255,64,0.04)",
			"rgba(127,255,127,0.04)",
			"rgba(255,127,255,0.04)",
			"rgba(79,236,236,0.04)"
		],
		"php.suggest.basic": false,
		"php.validate.enable": false,
		"php.validate.executablePath": "/usr/local/bin/php",
		"scss.scannerExclude": [
			"**/.git",
			"**/node_modules",
			"**/bower_components"
		]
	},
	"postCreateCommand": ""
}

src/

コンテナの/var/www/htmlへのマウントディレクトリです。

public_html/

先述した通り、エックスサーバーの仕様に合わせて、このpublic_htmlを公開ディレクトリに指定しています。

コンテナ作成

準備ができたので、VSCodeのRemote Developmentでコンテナの作成・起動をします。

Laravelのインストール

最後に作成したコンテナでLaravelをインストールします。

$ cd /path/to/app_dir
$ composer create-project --prefer-dist laravel/laravel:9.1.* .

Creating a "laravel/laravel:9.1.*" project at "./"
......
Application key set successfully.

http://localhost:8080/public/にアクセスし、インストール完了を確認します。