避坑!用 Docker 搞定 PHP 開發環境搭建

2020-07-16 10:05:40
避坑!用 Docker 搞定 PHP 開發環境搭建(Mac、Docker、Nginx、PHP-FPM、XDebug、PHPStorm、VSCode)

因為最近換電腦的緣故需要重新部署一下原生的開發環境,之前採用的虛擬機器方案,占用磁碟空間實在是太大,心疼 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

1、Docker 的安裝

這裡大家直接在 Docker 官網下載 Docker for Mac 就好了,直接按照提示操作即可,此處就不贅述了。

2、安裝 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

3、安裝 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

4、修改 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 地址了。

5、啟動 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 存取來檢視。

1d25788e32888a8472ba146758c9fbd.png

6、安裝 Chrome 瀏覽器外掛 xdebug helper

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

7、PhpStorm 偵錯環境設定

建立 / Users/yourname/Workspace/www/xdebug/demo.php,php 檔案裡面隨便寫點 php 程式碼,也可以通過 PhpStorm 新建立一個空專案,但是位置要在我們和 php-fpm 容器系結的目錄。

選單:PhpStorm->Preferences… 進入偏好設定,按照下圖進行設定。

331424dc551d95bf08a83d8f0e4e1b9.png

根據上圖提示進入 CLI Interpreter 設定視窗,點 「+」 新增設定。

a5e0f086a3b9a10b6c51b7a75ac03bc.png

767d932873d1f256a5cad5fc5400563.png

繼續設定 Debug 相關設定,如下圖:

4c6edc1a899da8ae4c08aeefc60c7ef.png

進入主介面,選擇右上的 「Add Configuration...」

6e63dd4c5cdb31183ed70cb38961f82.png

進入 debug 設定視窗後選擇 「+」,選擇 「PHP Web Page「,設定名稱後進入 Servers 設定,同時設定 Start URL:「/xdebug/demo.php」

229896e98b9d919e45cb66f4407e7eb.png

d486328f28e5288ddb4a810cfe97270.png

進入主視窗,在程式中打幾個斷點,然後點選那個綠色的甲蟲就可以了。

e155ba48f85e4f1f9df373b1d490c53.png

8、VSCode 偵錯環境設定

首先安裝 PHP Debug 外掛,然後開啟上面建立的 xdebug 目錄。如下圖所示,進入偵錯面板,點齒輪選擇 PHP,然後會建立一個 launch.json 檔案,修改這個檔案加入 pathMappings 設定,這個設定引數用於設定伺服器路徑與本地路徑的對應關係,低版本使用的是 localSourceRoot 和 serverSourceRoot,目前已經被廢除。另外記得將埠改為 9001。

cda10ae26990acb600a6f8509e0b278.png

e477e4a4cff3d4ef13e9d38e7cda4a2.png

進入 demo.php,隨意設定兩個斷點,然後點左側的執行按鈕,進入偵錯模式,接下來重新整理 http://localhost/xdebug/demo.php 會返回到 VSCode 的偵錯視窗,左側已經列出偵錯資訊,可選擇單步執行跟蹤程式的執行。

d1221a149abbd2b0db04f22808de5ab.png

41277a582833f84578104698be49d2f.png

結尾:實際上這次部署環境踩了不少坑,主要原因是網上的資料都比較陳舊,很多文章也沒有後續的更新,或者方向和我不太一致,例如 hub 中直接就有 xdebug 的映象,但是我還是想盡量用官方提供的映象自己建立,為了避免踩坑,大家最好還是多多參考官方文件,一般都寫的比較清楚了。

以上就是避坑!用 Docker 搞定 PHP 開發環境搭建的詳細內容,更多請關注TW511.COM其它相關文章!