問題 (Problem)

我想使用 Docker 容器的虛擬化技術，可以在本機端建立多個 WordPress 站台的開發環境，然後只透過一個 Nginx Web Server，負責接收多個網域 (multiple domain) 的 Http Request (例如 "blog1.localhost", "blog2.localhot")， 並自動將該網域的需求指向對應的 WordPress 站台，如此可以便於託管運行多站台或是方便本機端的開發。

如何有效設定 Docker 的虛擬開發環境，且不會影響到 Host 本機系統的干擾，如此可以方便方便移轉與部署開發環境至其它主機或對外運轉的系統上？

解決方案 (Solution)

• 建置一個使用 Nginix Reverse Proxy Server Docker 專案。可以採用已建置完整反向代理設定自動化的 jwilder/nginx-proxy 的映像檔。
• 建置一個完整的 WordPress 開發環境的 Docker 專案，內含 MySQL、phpmyadmin、Wordpress 等 Docker Image。

主要實作步驟

主要實作的方法參考這篇：「Host Multiple Websites On One VPS With Docker And Nginx」。當然對於 Docker 多個容器的配置檔 (docker-compose.yml) 設定，肯定要查找官方文件指引與其它網路設定分享文的。過程期間常要不斷地 Try-Error 才得以配置好 Docker 多個容器的開發環境。

在 WSL2 的 Docker 專案目錄結構參考如下：

首先需要先創建一個 Docker 網絡，如此得以將下列所有這些容器 (container) 橋接 (bridge) 在一起。打開終端機 (terminal)，輸入下列指令：

$ docker network create nginx-proxy

接著就是可以參考上述的專案目錄結構，來創建兩個專案 (Nginx and WordPress)，並為各自的資料夾編輯配置設定。

Nginx Reverse Proxy Project

新增「docker-compose.yml」，編輯內容如下：

version: "3"
services:
  nginx-proxy:
    image: jwilder/nginx-proxy:alpine
    container_name: nginx-proxy
    ports:
      - "80:80"
    restart: always
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro
      - ./nginx.conf:/etc/nginx/nginx.conf

networks:
  default:
    external: true
    name: nginx-proxy

這裡我是採用 alpine 版本，Image 檔容量會小上很多。

另外為了可以上傳比較大的檔案 (如匯入資料庫的 Sql 檔案)，需要將 nginx.conf 作個映射，然後編輯內容參考如下：

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  10240;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;

    # set the upload file size.
    client_max_body_size 48m;

    include /etc/nginx/conf.d/*.conf;
}
daemon off;

打開終端機 (Terminal)，在專案目錄下輸入以下命令，確認是否可以正常啟動。(可以打開瀏覽器，輸入 localhost，應該會出現首頁沒有任何內容的訊息，但確實是有訪問到 Nginx Server 的字樣。)

$ nginx-compose up -d

WordPress Project

這裡的 compose 設置就麻煩很多了，主要除了要設定兩個 WordPress 容器 ( blog1.localhost, blog2.localhost) 要能使用同一個 MySql 系統 (但不同的資料庫)，還要能使用 phpmyadmin 可以連向 MySql 管理各自 WordPress 所儲存的資料庫。

先來看看我的 compose 設定吧：

version: "3.9"

services:
  mysql_server:
    image: mysql:5.7.35
    container_name: wordpress_db
    restart: always
    volumes:
      - db_data:/var/lib/mysql
    environment:      
      - MYSQL_DATABASE=wp_blog
      - MYSQL_USER=wpuser
      - MYSQL_PASSWORD=wppasswd
      - MYSQL_ROOT_PASSWORD=dbpasswd
  
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: phpmyadmin
    restart: always
    environment:
        - VIRTUAL_HOST=phpmyadmin.localhost
        - PMA_HOST=mysql_server
        - PMA_PORT=3306
        - MYSQL_USERNAME=root
        - MYSQL_ROOT_PASSWORD=dbpasswd
    volumes: 
        - ./phpmyadmin/phpmyadmin-misc.ini:/usr/local/etc/php/conf.d/phpmyadmin-misc.ini
    depends_on:
        - mysql_server
    expose:
        - 80

  wordprss_blog:
    image: wordpress:php7.4
    container_name: wordpress_blog
    restart: always
    environment:
        - VIRTUAL_HOST= blog.localhost
        # - WORDPRESS_DEBUG='true'
        - WORDPRESS_DB_NAME=wp_blog
        - WORDPRESS_DB_HOST=mysql_server:3306
        - WORDPRESS_DB_USER=wpuser
        - WORDPRESS_DB_PASSWORD=wppasswd

    volumes:
        - ./sites/blog:/var/www/html
    depends_on:
        - mysql_server
    expose:
        - 80      

  wordprss_thinksoft:
    image: wordpress:php7.4
    container_name: wordpress_thinksoft
    restart: always
    environment:
        - VIRTUAL_HOST= thinksoft.localhost
        # - WORDPRESS_DEBUG='true'
        - WORDPRESS_DB_NAME=wp_thinksoft
        - WORDPRESS_DB_HOST=mysql_server:3306
        - WORDPRESS_DB_USER=wpuser
        - WORDPRESS_DB_PASSWORD=wppasswd        
    volumes:
        - ./sites/thinksoft:/var/www/html
    depends_on:
        - mysql_server
    expose:
        - 80            

volumes:
    db_data:

networks:
  default:
    external: true
    name: nginx-proxy

• 4~14 行 MySql 設定
  • mysql 設置的部分，資料庫檔案必然是要對應至 Host 端的實體儲存位置，否則當容器一關閉資料當然就不見了。
    volumes:
- db_data:/var/lib/mysql
  • 預設 envioronment 部分的設定只能對應到第一個 WordPress 資料庫，所以要先使用 phpmyadmin 登入 MySql 後，先新增第二個 WordPress 資料庫，並指定具管理權限的使用者 (在此為了方便，均使用 wpuser 來管理兩個資料庫)，如此在設定第二個 WordPress 站台的時候，才能成功連線到對應的資料庫。
• 16~31 行 phpmyadmin 設定
  
  可以看到 envioronment 部分有設定了「VIRTUAL_HOST」所對應的 Url 網址 ( phpmyadmin.localhost)，所以也就很方便可以透過 Ngnix Proxy Server 轉派。
  
  另外也是上傳檔案容量設定的問題，這裡也同時需要把 phpmyadmin-misc.ini 映射出來，並編輯如下內容 (本例上傳容量設定為 64M)。
  

   volumes:
    - ./phpmyadmin/phpmyadmin-misc.ini:/usr/local/etc/php/conf.d/phpmyadmin-misc.ini

allow_url_fopen=Off
max_execution_time=600
max_input_vars=10000
memory_limit=64M
post_max_size=64M
upload_max_filesize=64M

• 33~50 行, 52~68 行 blog-1 & blog-2 設定
  • 一個 Blog 就是一個 Container (容器)，所以要設定兩個 Blog 站台就需要設置兩個 Container。
  • 每一個 Blog 站台有各自虛擬的 VIRTUAL_HOST 設定 (ex. blog1.localhost)。
  • 這裡 image 的選擇是因應我現在運轉的遠端 ISP 執行環境，Php 版本目前仍只使用到 7.4 版本，所以就選擇了  wordpress:php7.4 這個映像檔。
  • WordPress 在 Docker 能否成功設定執行安裝的引導主要關鍵還是 environment 這裡的設置，尤其是資料庫連線的部分。
  • WordPress 資料夾必然是要映射出來，如此才可以進行開發的工作。
    volumes:
./sites/blog:/var/www/html
• 73~76 行 網路配置
  最後就是要配置與 Nginx 同一個網絡 (最早先新建的網絡) 區段。

networks:
  default:
    external: true
    name: nginx-proxy

總結

使用 Docker 作為虛擬化的開發環境實在太有幫助了！從而降低以前使用虛擬機 (Virtual Machine) 系統會佔用太多系統資源的困擾。

當然 Docker 的設置目前來看仍稍嫌繁瑣困難了些，不過從 Try-Error 的過程中逐漸嘗試，到最後可以建立諸多 Docker 容器的疊加，完成更多樣化的功能，還蠻有趣且有些成就感的。

還有大概注意下因為上述使用的容器都是從 Docker Hub 提取 (Pull) 現成已有的映像檔下來的，所以也要注意下映像檔的大小。如果行有餘力，當然可以自行配置適合自己的 Docker 環境，不過這算是系統部署 (Deploy) 的範疇，也要更多深入了解關於 Docker 配置的遊戲規則，個人可能還是先淺嚐即止。

現在這樣使用 WSL2，有個 Ubuntu Linux 系統，再搭配 Docker 的機制，作為開發的環境，已經是非常滿意的了。