避坑！用Docker搞定PHP開發環境 Nginx PhpStorm VSCode XDebug

文章版本：2019.7

由於最近換電腦的緣故須要從新部署一下本地的開發環境，以前採用的虛擬機方案，佔用磁盤空間實在是太大，心疼SSD那麼點地方，因此此次採用了Docker的方案來部署。
關於此次部署的原則，個人想法是儘可能使用官方的鏡像來實現，儘可能不改動或少改動鏡像。由於是本地的開發環境，因此想多嚐嚐鮮，儘可能使用高版本的軟件來實現。
從結果上來講，但願能給一樣有須要搭建環境的同窗起到一些幫助，少踩一些坑，若是能按照這篇文章的步驟一次搞定那是最好了。

先來講一下環境：

Docker 18.09.2
Nginx 1.17.1
PHP 7.3.7
XDebug 2.7.2
PhpStorm 2019.1.3
VSCode 1.36.1

一、Docker的安裝

這裏你們直接在Docker官網下載Docker for Mac就行了，直接按照提示操做便可，此處就不贅述了。

二、安裝Nginx

地址：https://hub.docker.com/_/nginx
直接執行 docker pull nginx 拉取最新的鏡像；
根據上面的地址咱們能夠看到官方提供的一些文檔，咱們按照操做便可，我我的採用的方案是先將nginx的整個配置目錄copy到本地一份，而後在運行的時候將目錄綁定到nginx容器的配置目錄，這樣修改配置更加方便一些。

將nginx配置目錄copy到本地：

$ docker run --name tmp-nginx -d nginx
$ docker cp tmp-nginx:/etc/nginx /Users/yourname/Workspace/etc/nginx
$ docker rm -f tmp-nginx

說明：/Users/yourname/Workspace/etc，這個是我我的的工做目錄，到時候根據狀況換成本身的就行；命令的做用就是啓一個後臺運行的nginx容器，將配置目錄copy出來以後終止運行並刪除容器。

能夠先運行一下看看效果：

$ docker run --name run-nginx -d -p 80:80 -v /Users/yourname/Workspace/www:/usr/share/nginx/html:ro nginx

說明：-v參數綁定本地的一個目錄到nginx容器中的web目錄，這裏面沒有綁定配置目錄，你們能夠在web目錄下創建一個hello.html，經過瀏覽器訪問http://localhost/hello.html看...，這以後能夠你們能夠先刪除容器，後面咱們改完配置再來啓動它。
刪除方法：

$ docker rm -f run-nginx

三、安裝php-fpm

地址：https://hub.docker.com/_/php
由於這裏咱們須要安裝一些開發時用到的PHP擴展，因此最好的辦法是根據Dockerfile生成咱們本身的鏡像，以下是個人Dockerfile，你們能夠參考，能夠根據狀況刪減不須要的擴展，不然生成的鏡像會比較大。

Dockerfile內容以下：

# 從官方基礎版本構建
FROM php:7.3.7-fpm
# 官方版本默認安裝擴展: 
# Core, ctype, curl
# date, dom
# fileinfo, filter, ftp
# hash
# iconv
# json
# libxml
# mbstring, mysqlnd
# openssl
# pcre, PDO, pdo_sqlite, Phar, posix
# readline, Reflection, session, SimpleXML, sodium, SPL, sqlite3, standard
# tokenizer
# xml, xmlreader, xmlwriter
# zlib

# 更新爲國內鏡像
RUN mv /etc/apt/sources.list /etc/apt/sources.list.bak \
    && echo 'deb http://mirrors.163.com/debian/ stretch main non-free contrib' > /etc/apt/sources.list \
    && echo 'deb http://mirrors.163.com/debian/ stretch-updates main non-free contrib' >> /etc/apt/sources.list \
    && echo 'deb http://mirrors.163.com/debian-security/ stretch/updates main non-free contrib' >> /etc/apt/sources.list \
    && apt-get update

# bcmath, calendar, exif, gettext, sockets, dba, 
# mysqli, pcntl, pdo_mysql, shmop, sysvmsg, sysvsem, sysvshm 擴展
RUN docker-php-ext-install -j$(nproc) bcmath calendar exif gettext sockets dba mysqli pcntl pdo_mysql shmop sysvmsg sysvsem sysvshm iconv

# GD 擴展
RUN apt-get install -y --no-install-recommends libfreetype6-dev libjpeg62-turbo-dev libpng-dev \
    && rm -r /var/lib/apt/lists/* \
    && docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \
    && docker-php-ext-install -j$(nproc) gd

# imagick 擴展
RUN export CFLAGS="$PHP_CFLAGS" CPPFLAGS="$PHP_CPPFLAGS" LDFLAGS="$PHP_LDFLAGS" \
    && apt-get install -y --no-install-recommends libmagickwand-dev \
    && rm -r /var/lib/apt/lists/* \
    && pecl install imagick-3.4.4 \
    && docker-php-ext-enable imagick

# mcrypt 擴展 
RUN apt-get install -y --no-install-recommends libmcrypt-dev \
    && rm -r /var/lib/apt/lists/* \
    && pecl install mcrypt-1.0.2 \
    && docker-php-ext-enable mcrypt

# Memcached 擴展 
RUN apt-get install -y --no-install-recommends libmemcached-dev zlib1g-dev \
    && rm -r /var/lib/apt/lists/* \
    && pecl install memcached-3.1.3 \
    && docker-php-ext-enable memcached

# redis 擴展
RUN pecl install redis-5.0.0 && docker-php-ext-enable redis

# opcache 擴展 
RUN docker-php-ext-configure opcache --enable-opcache && docker-php-ext-install opcache

# xdebug 擴展
RUN pecl install xdebug-2.7.2 && docker-php-ext-enable xdebug

# swoole 擴展
RUN pecl install swoole-4.4.0 && docker-php-ext-enable swoole

# 鏡像信息
LABEL Author="Stone"
LABEL Version="2019.7"
LABEL Description="PHP 7.3.7 開發環境鏡像.

說明：這個Dockerfile我參考了https://www.jianshu.com/p/20fcca06e27e做者的內容，並作了一些調整，你們能夠根據本身狀況增減，由於是開發環境因此最好把xdebug留着，我們後面也會用到；
下面是將RUN串聯起來的Dockerfile，這樣生成的鏡像能小一些，可是依然有636M，官方的php:7.3.7-fpm的鏡像是371M，若是想優化也能夠從官方提供的Alpine鏡像生成，我們這裏就先簡單粗暴了。

FROM php:7.3.7-fpm

RUN mv /etc/apt/sources.list /etc/apt/sources.list.bak \
    && echo 'deb http://mirrors.163.com/debian/ stretch main non-free contrib' > /etc/apt/sources.list \
    && echo 'deb http://mirrors.163.com/debian/ stretch-updates main non-free contrib' >> /etc/apt/sources.list \
    && echo 'deb http://mirrors.163.com/debian-security/ stretch/updates main non-free contrib' >> /etc/apt/sources.list \
    && apt-get update \
    && export CFLAGS="$PHP_CFLAGS" CPPFLAGS="$PHP_CPPFLAGS" LDFLAGS="$PHP_LDFLAGS" \
    && apt-get install -y --no-install-recommends libfreetype6-dev libjpeg62-turbo-dev libpng-dev libmagickwand-dev libmcrypt-dev libmemcached-dev zlib1g-dev \
    && rm -rf /var/lib/apt/lists/* \
    && docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \
    && docker-php-ext-install -j$(nproc) bcmath calendar exif gettext sockets dba mysqli pcntl pdo_mysql shmop sysvmsg sysvsem sysvshm iconv gd \
    && pecl install imagick-3.4.4 mcrypt-1.0.2 memcached-3.1.3 redis-5.0.0 xdebug-2.7.2 swoole-4.4.0\
    && docker-php-ext-enable imagick mcrypt memcached redis xdebug swoole \
    && docker-php-ext-configure opcache --enable-opcache && docker-php-ext-install opcache

LABEL Author="Stone"
LABEL Version="2019.7"
LABEL Description="PHP 7.3.7 開發環境鏡像. "

說一下踩的坑：apt-get的源最好換成國內的源，不然可能會在構建鏡像的時候卡死；由於默認狀況下官方容器是基於Debian的，查找源的時候不少都是過期的，如當前的Debian代號是stretch，卻使用了jessie的包那確定是會報錯的，「E: Unable to correct problems, you have held broken packages.」；你們直接按照我上面的Dockerfile生成鏡像便可，測試經過。

在Dockerfile所在目錄下執行：

docker build -t my-php-fpm:2019.7 .

-t參數設置鏡像名稱和標籤，請根據本身狀況命名，鏡像建立完成以後，能夠像上面咱們copy出nginx配置同樣，將php的相關配置也copy到本地。

$ docker run --name tmp-my-php-fpm -d my-php-fpm:2019.7
$ docker cp tmp-my-php-fpm:/usr/local/etc /Users/yourname/Workspace/etc/php
$ docker rm -f tmp-my-php-fpm

四、修改nginx、php-fpm、xdebug的配置文件

修改nginx配置文件，打開/Users/yourname/Workspace/etc/nginx/default.conf，加入下面的內容：

location ~ \.php$ {
        fastcgi_pass   php-fpm-container:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  /var/www/html$fastcgi_script_name;
        fastcgi_param  SCRIPT_NAME      $fastcgi_script_name;
        include        fastcgi_params;
    }

增長的內容裏面有一處須要說明，「php-fpm-container」這個是我們本身建立的php-fpm容器的別名，具體是在運行時候指定的，以後我們會提到。

修改php相關配置文件，進入/Users/yourname/Workspace/etc/php下，將php.ini-development複製更名爲php.ini，配置內容根據本身狀況修改便可。
修改xdebug的配置文件，/Users/yourname/Workspace/etc/php/conf.d/docker-php-ext-xdebug.ini，加入以下內容

xdebug.remote_enable = On
xdebug.remote_handler = dbgp
xdebug.remote_host = host.docker.internal 
xdebug.remote_port = 9001
xdebug.remote_log = /var/log/php/xdebug.log
xdebug.idekey = PHPSTOR

以上設置主要是開啓xdebug的遠程調試模式，由於php-fpm使用了9000端口，因此這裏咱們把xdebug的端口改成了9001；「host.docker.internal」是docker 18.03新加入的，能夠解析得到宿主機的ip地址，這樣就不用寫死ip地址了。

五、啓動php-fpm、nginx容器

$ docker run --name run-my-php-fpm \
-v /Users/yourname/Workspace/www:/var/www/html \
-v /Users/yourname/Workspace/etc/php:/usr/local/etc \
-v /Users/yourname/Workspace/log/php:/var/log/php \
-d my-php-fpm:2019.7

$ docker run --name run-nginx \
-p 80:80 \
--link run-my-php-fpm:php-fpm-container \
-v /Users/yourname/Workspace/www:/usr/share/nginx/html \
-v /Users/yourname/Workspace/etc/nginx:/etc/nginx \
-v /Users/yourname/Workspace/log/nginx:/var/log/nginx \
-d nginx

說明：我將配置目錄、日誌目錄和web目錄都分別進行了綁定，方便在本地環境中修改。還記得上面提到的nginx中有個配置填寫的「php-fpm-container」嗎？實際上就是在這裏指定的，鏈接兩個容器，並給php-fpm容器起了個別名，配置中經過別名訪問。

在/Users/yourname/Workspace/www中建立一個phpinfo.php文件，輸出php信息，經過http://localhost/phpinfo.php...。

六、安裝Chrome瀏覽器插件xdebug helper

可能會被牆，請自行解決。

七、PhpStorm調試環境配置

創建/Users/yourname/Workspace/www/xdebug/demo.php，php文件裏面隨便寫點php代碼，也能夠經過PhpStorm新創建一個空項目，可是位置要在咱們和php-fpm容器綁定的目錄。

菜單：PhpStorm->Preferences… 進入偏好設置，按照下圖進行設置。

根據上圖提示進入CLI Interpreter設置窗口，點「+」添加配置。


繼續配置Debug相關設置，以下圖：

進入主界面，選擇右上的「Add Configuration...」

進入debug配置窗口後選擇「+」，選擇「PHP Web Page「，設置名稱後進入Servers設置，同時設置Start URL：「/xdebug/demo.php」


進入主窗口，在程序中打幾個斷點，而後點擊那個綠色的甲蟲就能夠了。

八、VSCode調試環境配置

首先安裝PHP Debug插件，而後打開上面建立的xdebug目錄。以下圖所示，進入調試面板，點齒輪選擇PHP，而後會建立一個launch.json文件，修改這個文件加入pathMappings配置，這個配置參數用於設置服務器路徑與本地路徑的對應關係，低版本使用的是localSourceRoot和serverSourceRoot，目前已經被廢除。另外記得將端口改成9001。

進入demo.php，隨意設置兩個斷點，而後點左側的運行按鈕，進入調試模式，接下來刷新http://localhost/xdebug/demo....，左側已經列出調試信息，可選擇單步執行跟蹤程序的運行。

結尾：實際上此次部署環境踩了很多坑，主要緣由是網上的資料都比較陳舊，不少文章也沒有後續的更新，或者方向和我不太一致，例如hub中直接就有xdebug的鏡像，可是我仍是想盡可能用官方提供的鏡像本身建立，爲了不踩坑，你們最好仍是多多參考官方文檔，通常都寫的比較清楚了。得益於docker的便利，我會不按期的更新這篇文章，這也是我在文章開頭設置了一個版本號的緣由，但願對你們有所幫助。