preview

Docker Compose for local development

• https ready!
• multiple domain / project support
• PHP Xdebug
• php7wrapper

✨ reference from https://laradock.io

Index

• Setup
  • ...
• Usage
  • Add Nginx Virtual Host
  • Change PHP Configuration
• Information
  • ...
• Xdebug & VSCode
• PHP Wrapper

Setup

• download & install docker APP for MAX(os x)

  https://docs.docker.com/docker-for-mac/

• fork & clone this repository

  $ git clone https://github.com/cscolabear/docker-dev.git Projects
  
  # [optional] create your local branch
  # e.g. local-dev, and merge any service branch you want(if you need mysql or memcached...)
  $ git checkout service/add-mysql

• make your folder look like this... (👉 replace ~/Projects what you want.)

  e.g.

  ~/Projects

  ~/Projects/[your project - 1]

  ~/Projects/[your project - 2]

  

• Build Images & Container

  $ cd ~/DockerDev
  $ chmod -R 755 Logs
  $ dokcer-compose --compatibility up -d

  (ℹ️ Compatibility mode: https://docs.docker.com/compose/compose-file/compose-versioning/#compatibility-mode)

  ⏳ Please wait

• SSH into a container

  $ cd ~/DockerDev/ && clear && docker-compose exec WORKSPACE bash

  looked like after connected~ you can execute php, composer, node, npm in this container

• enjoy Docker 🐳

  👉 create index.php & index.html in ~/Projects

  use command~

  $ echo -e "<?php\nphpinfo();" > index.php
  $ echo "<h1>127.0.0.1 - fine</h1>" > index.html

  open browser - http://localhost or https://localhost

  

  index.html > https://localhost/index.html)

Usage

• Add Nginx Virtual Host

  • creating a new vhost.conf file in ~/Projects/Dockerfiles/nginx/sites-enabled/

    nginx conf tools: https://nginxconfig.io

  • add local domain:

    modify /etc/hosts (for mac / os x)
    C:\WINDOWS\system32\drivers\etc\hosts (for windows 10)

    add domain at the bottom

    e.g.

    127.0.0.1    local.[any_you_want_domain_1]
    127.0.0.1    local.[any_you_want_domain_2]
    

  • add host at the docker-compose.yml

    add host domain at, services > fpm > extra_hosts

    add new line
    

    - "local.[any_you_want_domain_1]:172.16.1.50"
    

    looks like this

  • restart nginx Docker Container

    $ docker-compose restart NGINX

• Change PHP Configuration

  • modify Dockerfiles/php-fpm/php.ini
  • restart php-fpm Docker Container

  $ docker-compose restart FPM
  

Info

• What's in there?

  • nginx
    • fholzer/nginx-brotli:v1.18.0
    • https, http2
    • logrotate
  • php-fpm
    • php:7.3-fpm
  • workspace
    • node v12.17.0
    • npm 6.14.4

• ~/DockerDev/Logs/ - nginx log file path

  e.g.

  ~/DockerDev/Logs/error.log

  ~/DockerDev/Logs/nginx-access.log

  ~/DockerDev/Logs/nginx-error.log

• Xdebug & VSCode

  • install the vscode extension
    

  • PHP Debug https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug

  • in vscoe toolsbar Debug > Add Configuration > open & modify launch.json

  {
      "version": "0.2.0",
      "configurations": [
          {
              "name": "Listen for > XDebug",
              "type": "php",
              "request": "launch",
              "port": 9001,
              "pathMappings": {
                  "/var/www": "${workspaceRoot}"
              },
              "log": true
          },
          {
              "name": "Launch > currently open script",
              "type": "php",
              "request": "launch",
              "program": "${file}",
              "cwd": "${fileDirname}",
              "port": 9001
          }
      ]
  }

  • vscode debug 設定檔每個專案都要設定一次
    

    • e.g. vscode 打開的專案目錄名稱為 my-project，${workspaceRoot} 即為 /var/www/my-project
      所以設定應該是： "/var/www/my-project": "${workspaceRoot}"

    • 路徑對應是重點(pathMappings), 編輯器沒反應時(e.g. vscode) 多半是這個路徑沒有設定正確
      也可以 ssh 進入 fpm container 查看 /tmp/xdebug.log
      

     "pathMappings": {
         "/var/www": "${workspaceRoot}"
         // or
         "/var/www/[your Project folder]": "${workspaceRoot}"
     },
    

    • xdebug.ini ; for MAC os x xdebug.remote_host=host.docker.internal

PHP Wrapper

因為本機 MAC os x 和 docker 環境內的 PHP 版本不同 所以利用 phpWrapper 曝光 docker 內的 php 讓本機開發與執行使用同樣的 php 版本

ref. https://cola.workxplay.net/docker-php-wrapper-for-local-machine/

$ ln -s ~/DockerDev/phpWrapper /usr/local/bin php
$ chmod +x /usr/local/bin php

(MAC osx 原生 PHP path: /usr/bin/php)