俺には勉強しかない

140字のその先

【リモートデバッグ可能】PHPの開発環境構築【Docker + PHP7 + MySQL + Apache】

ハンズオンの学習環境を用意するために、PHP開発環境を構築した。


XAMPP/MAMPPじゃなくてDocker上でPHP動かしたい、あとリモートデバッグもしたいと思って
環境構築手順を調べましたが、意外にネットに記事が無くて苦戦しました。


Dockerのインストールからindex.phpブレークポイント貼って止まる事の確認、までやりました。


結構手間取ったのでメモがてら構築手順を記載します。
それと、今回の記事では各々の技術についての解説はしませんので、悪しからず

開発環境詳細

要件

リモートデバッグ可能。ブレークポイント貼ればそこで処理が止まって変数の中身が見れる

OS

MacBook Air 2018

今まで何となくMacはシャバい!男は黙ってWindowsと思ってましたが(本当は使うのが何故か怖かっただけ)、
Hyper-V対応のWin10 Proじゃないと正規のDocker動かせないと知り、
これを機に開発はMacでやる事にしました。

使用ツール

XAMPPやMAMPPはオススメしません。
確かにインストールすればすぐに環境出来上がりますが、
WebサーバをNginxにしたい、DBはPostgre使いたい、みたいな時に逆に面倒臭いです。
本当にプログラミング一切やった事ないって人以外はDockerがいいと思います。

環境構築手順

1、 VSCodeのインストール


以下のリンクからインストーラー落としてインストールして下さい。


code.visualstudio.com



VSCodeを開いて、以下の拡張機能をインストールして下さい。

2、 Dockerのインストール


以下のリンク内の「Docker Desktop」の「Download for Mac」を選択して、インストーラーをダウンロード
普通に起動してインストールして下さい。


www.docker.com

3、 docker-composeのインストール


Dock(下のツールバー)からLaunchpadを起動して、「ターミナル」と検索して起動します。


f:id:adhdoutism:20200805024614p:plain


f:id:adhdoutism:20200805024814p:plain


その後、ターミナルで以下のコマンドを入力し、docker-composeをインストールします。
(※先頭の「# 」はrootユーザで操作している事を表す記号です。コピペの際は先頭の「# 」を除外して下さい。)

# curl -L https://github.com/docker/compose/releases/download/1.21.2/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
# chmod +x /usr/local/bin/docker-compose

4、 ディレクトリ/ファイルの作成


ホームディレクトリ配下に、以下の構成でディレクトリを作成して下さい。

ディレクトリ構成

.
├── docker-compose.yml
├── mysql
├── php
   ├── dockerfile
   ├── log
  └── php.ini
├── phpmyadmin
   └── session
└── www
└── html
└── index.php


f:id:adhdoutism:20200805024557p:plain

docker-compose.yml中身
version: '3'

services:
  php:
    build: ./php
    volumes:
      - ./php/php.ini:/usr/local/etc/php/php.ini
      - ./www/html:/var/www/html
      - ./php/log/xdebug:/var/log/xdebug
    ports:
      - '80:80'
      - '443:8443'
    links:
      - mysql

  mysql:
    image: mysql:5.7
    ports:
      - 13306:3306
    volumes:
      - ./mysql/conf:/etc/mysql/conf.d/
      - ./mysql/lib:/var/lib/mysql
      - ./mysql/sql:/docker-entrypoint-initdb.d
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_DATABASE=app
      - MYSQL_USER=test
      - MYSQL_PASSWORD=test

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql
      - PMA_USER=test
      - PMA_PASSWORD=test
    links:
      - mysql
    ports:
      - 8080:80
    volumes:
      - ./phpmyadmin/session:/sessions
dockerfile中身
FROM php:7.3-apache
RUN apt-get update \
  && apt-get install -y libfreetype6-dev libjpeg62-turbo-dev \
  && docker-php-ext-install pdo_mysql mysqli mbstring \
  && pecl install xdebug \
  && docker-php-ext-enable xdebug
COPY ./php.ini /usr/local/etc/php/php.ini
WORKDIR /var/www/html
php.ini中身


まず、以下のサイトからphp.iniを落としてきます。
※ファイル名「php.ini-development」を「php.ini」に変更して下さい。


github.com


落としたphp.iniに以下の変更を加えます。


変更
php.iniをエディタで開いて、項目名で検索して値を変更して下さい。

date.timezone = "Asia/Tokyo"
mbstring.language = Japanese
default_charset = UTF-8


追加

php.ini末尾に以下の行を追加して下さい。

[xdebug]
xdebug.idekey="PHPStorm"
xdebug.remote_host = "docker.for.mac.host.internal"
xdebug.default_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_connect_back = 0
xdebug.remote_enable = 1
xdebug.remote_handler = "dbgp"
xdebug.remote_port = 9000

index.php中身
<?php
phpinfo();

5、XDebug設定


先程作成したディレクトリをVSCodeで開きます。


左のツールバーからデバッグメニューを開きます(虫と再生ボタンのやつ)。


f:id:adhdoutism:20200806194451p:plain


「create a launch.json file」をクリックします。


f:id:adhdoutism:20200806194455p:plain


PHP」を選択します。


f:id:adhdoutism:20200806194500p:plain


launch.jsonを以下に変更します。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "stopOnEntry": true,
            "log": true,
            "pathMappings": {
                // Dockerコンテナのdocument root : 開発環境のdocument root
                "/var/www/html": "${workspaceFolder}/www/html"
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}


作成すると、.vscodeディレクトリの中にlaunch.jsonがあるはずです。


f:id:adhdoutism:20200805024606p:plain


6、ビルド&起動


ターミナルを開き、上で作成したディレクトリまで移動します。

// 作成したディレクトリへ移動
cd /Users/user/development/php/phpMysqlMaster


その後、以下のコマンドを実行します。

docker-compose build
docker-compose up -d

7、デバッグ


index.phpの2行目にブレークポイントを貼ります。


f:id:adhdoutism:20200805024537p:plain


その後、左のツールバーからデバッグメニューを開き、再生ボタンを押します。


f:id:adhdoutism:20200805024638p:plain


ブラウザからlocalhostにアクセスします。


f:id:adhdoutism:20200805024624p:plain


止まった!


f:id:adhdoutism:20200805030036p:plain


終わりに

開発環境構築が一番面倒くさい作業なので、そこを乗り越えれば後は楽!(と信じたい)
次はgitとgithubアカウントの紐付けだな・・・
SourceTreeは出来れば使いたくない。あれ楽だけどね