天天看點

面向WEB開發人員的Docker(五):部署開發WordPress

面向WEB開發人員的Docker(五):部署開發WordPress

前面介紹了Docker的一些基本知識和使用,對于新技術或者新系統想去嘗試運作起來,Docker是一個最佳的選擇,上手容易,抛棄也容易,如果系統或者應用運作起來後不需要了可以直接删除即可,對主控端沒有任何的影響,也不會受到主控端環境的幹擾。本文将分享如何使用Docker建構WordPress環境,并運作起來。

WordPress是2003年首次釋出的基于<code>PHP</code>和<code>MySQL</code>的開放源代碼内容管理系統。它為40%的網站提供支援,受到許多Web主機的支援,易于設定,并提供數千個免費主題和插件。

對于大多數人來說,WordPress是一個部落格系統,其實不然,可以為以下需求提供解決方案:

可以作為網站的CMS,編輯内容,生成靜态網站

作為伺服器端,為前端提供API,如Vue、React、Angular等

建構門戶、社群、視訊等内容網站

......

即使你不使用(或不想使用)WordPress,本文主要分享Docker如何建構一個運作環境來執行代碼,環境配置對于開發來說必不可少,但Docker值得你去嘗試。

本章中建立的檔案包含在 https://github.com/QuintionTang/docker-wordpress 提供的示例代碼存儲庫的wordpress目錄中

要運作WordPress需要配置的環境:

Web伺服器,通常為Apache

PHP運作時和擴充,然後相應地配置Web伺服器

MySQL或MariaDB定義一個供WordPress使用的新資料庫

WordPress本身,以及所有必需的主題和插件。

XAMPP之類的工具可以降低環境的配置難度,但是,有了Docker,你隻需要幾分鐘就可以運作WordPress并開發代碼。

Windows使用者還将發現WordPress在基于Docker的基于Linux的檔案系統上的運作要比本地NTFS驅動器快得多。

需要提取兩個Docker鏡像:

wordpress:最新的鏡像是個不錯的選擇,它提供了Debian Linux、Apache、PHP和WordPress的穩定版本。

mysql:wordpress資料庫,選擇8.0

啟動這兩個鏡像,并加入Docker網絡中<code>wpnet</code>。

建立兩個Docker volumes:

<code>wpdata</code>:存儲資料檔案,在MySQL容器中挂載到<code>/var/lib/mysql</code>

<code>wpfiles</code>:WordPress應用程式檔案夾,對應容器Apache伺服器根目錄中<code>/var/www/html</code>。

可能有人會覺得挂載<code>wpfiles</code>卷是一種反模式,這樣WordPress容器不再是無狀态的。不過WordPress并不是一個無狀态的應用程式。為了開發目的,Docker被用來模拟一個活動伺服器環境。

挂載<code>wpfiles</code>卷有很多好處:

Docker的啟動速度更快:這樣無需每次啟動容器時都複制核心WordPress檔案

WordPress應用程式可以自動更新:這将在安裝中發生,是以在開發期間對其進行複制非常有用

如果不挂載<code>wpfiles</code>卷,則需要經常運作<code>docker pull wordpress</code>以下載下傳最新的應用程式鏡像。

<code>wp-content</code>子目錄将在主機PC上的項目目錄中建立。對應WordPress容器的<code>/var/www/html/wp-content</code>目錄,目錄包含所有插件、主題和上傳的資源。

WordPress開發人員一般隻需在<code>wp-content</code>目錄中建立和修改檔案。

另外,對于項目開發,就需要将<code>wp-content</code>檔案送出到Git倉庫更加容易,因為這個目錄是主控端PC上唯一的WordPress檔案夾。

WordPress将啟動在<code>localhost:8001</code>域上,在實際開發中如果涉及多個站點,不希望用端口進行切換,同時也會帶來一些問題。

浏覽器可能會緩存來自一個站點的檔案,并在另一個站點上顯示它們。

WordPress将通路域名存儲在其資料庫中,是以使用一個和生産環境一緻的域名可以避免一些問題。

為了避免以上的問題,可以在檔案中配置其他域以供開發使用,這就涉及更改本機<code>hosts</code>

在Linux和macOS上,修改檔案:<code>/etc/hosts</code>

在Windows上,修改檔案:<code>C:\Windows\System32\drivers\etc\hosts</code>

在主機檔案的底部添加一行,例如 <code>127.0.0.1 devpoint.wordpress</code> 并儲存。對于 Windows 使用者必須運作<code>nbtstat -R</code>或重新啟動。

這樣,就可以使用 <code>http://devpoint.wordpress</code> 進行通路,而不是http://localhost,實際上兩者都解析到 <code>127.0.0.1</code>。

修改 <code>hosts</code> ,是前端經常用來模拟一個真實通路常用的手段。

<code>$PWD</code>引用Linux和macOS上的目前目錄。它在Windows上不可用,是以必須使用正斜杠表示法指定完整路徑,如下:

Docker Compose是一個用于管理具有關聯volumes和網絡的多個容器的工具。單個配置檔案,通常命名為docker-compose.yml,定義容器,并可以在必要時覆寫Dockerfile設定。詳細的介紹請參閱《面向WEB開發的Docker(二):什麼是Docker、鏡像、編排?》

在項目目錄下建立目錄 <code>wordpress</code>

這裡将使用<code>Docker Compose</code>,在目錄中建立<code>docker-compose.yml</code>檔案,代碼如下:

下面就來對上面的代碼做個詳細的介紹:

MySQL環境變量包括<code>MYSQL_DATABASE</code>、<code>MYSQL_USER</code>、<code>MYSQL_PASSWORD</code>和<code>MYSQL_ROOT_PASSWORD</code> :

<code>MYSQL_DATABASE</code>:資料庫名稱,這裡定義為 <code>wpdb</code>

<code>MYSQL_USER</code>:資料庫使用者名稱,這裡定義為 <code>wpdbuser</code>

<code>MYSQL_PASSWORD</code>:資料庫連接配接密碼,定義為<code>devpoint</code>

<code>MYSQL_ROOT_PASSWORD</code>:資料庫<code>root</code>使用者密碼,定義為<code>devpointCn</code>,在應用程式連接配接中不會用到 root 使用者,但對于備份資料或執行其他資料庫維護就需要,是以這裡也進行了定義

接下來設定 WordPress 的環境變量,包括<code>WORDPRESS_DB_HOST</code>、<code>WORDPRESS_DB_NAME</code>、<code>WORDPRESS_DB_USER</code>、<code>WORDPRESS_DB_PASSWORD</code>:

<code>WORDPRESS_DB_HOST</code>:連接配接位址,這裡我們定義為mysql

<code>WORDPRESS_DB_NAME</code>:連接配接資料庫名稱,上面定義的是 <code>wpdb</code>

<code>WORDPRESS_DB_USER</code>:連接配接資料庫使用者名稱,這裡為 <code>wpdbuser</code>

<code>WORDPRESS_DB_PASSWORD</code>:對應的資料庫連接配接密碼,為<code>devpoint</code>

MySQL的端口<code>3306</code>是暴露給主控端PC的,是以它可以連接配接和檢查資料庫使用任何MySQL用戶端。

上面代碼的意思是容器中的3306端口和主控端的3306端口對應。

如果不想将端口暴露給主控端,就不需要與其對應,如下:

這樣暴露端口對Docker網絡中的其他容器也可用,但不會将其暴露給主控端,從安全的角度可以起到隔離的效果。WordPress容器不會受到影響,但是主控端上的MySQL用戶端将無法連接配接到容器中的MySQL資料庫。

接下來就是Apache端口的暴露,WordPress容器中綁定的端口為80,前面的80為綁定的主控端端口。

WordPress容器定義了兩個,Mysql容器定義了1個:

<code>wpfiles</code> :對應Docker中Apache伺服器根目錄下<code>/var/www/html</code>

<code>wp-content</code>:對應Docker中<code>/var/www/html/wp-content</code>

<code>wpdata</code>:對應Docker中<code>/var/lib/mysql</code>

一切都準備好了,就是這麼簡單!打開一個終端,通路項目目錄,然後輸入:

面向WEB開發人員的Docker(五):部署開發WordPress

一切下載下傳安裝全部自動完成,由于Docker需要下載下傳鏡像、初始化資料庫并複制應用程式檔案,是以該過程在第一次運作時可能需要花費幾分鐘。

在浏覽器中打開前面我們設定好的域名<code>devpoint.wordpress</code>,首次執行此操作時,将進入WordPress安裝流程:

面向WEB開發人員的Docker(五):部署開發WordPress

按照流程輸入基本資訊,即可完成安裝。

面向WEB開發人員的Docker(五):部署開發WordPress
面向WEB開發人員的Docker(五):部署開發WordPress

下面選擇主題<code>Appointment Dark</code>,進行安裝,并啟用。

面向WEB開發人員的Docker(五):部署開發WordPress

現在,可以在主控端PC的目錄<code>wp-content</code>中添加、編輯或删除主題插件。

WordPress允許直接從管理面闆中安裝、編輯和删除主題和插件檔案,這在Windows上是允許的,但是Linux和mac OS使用者可能需要通過在主控端上輸入以下指令授予對項目的<code>wp-content</code>檔案夾的權限:

要開始開發一個新的WordPress主題,在主控端上目錄<code>wp-content/themes</code>中建立主題檔案夾,例如 <code>devpoint</code> ,并添加一個<code>style.css</code>樣式檔案:

接着再添加一個 <code>index.php</code> 檔案,代碼如下:

在WordPress管理面闆的“外觀”&gt;“主題”頁面中激活此主題,重新整理頁面即可看到如下效果。

面向WEB開發人員的Docker(五):部署開發WordPress

點選啟用,既可完成自制主題啟用。

面向WEB開發人員的Docker(五):部署開發WordPress

到這裡,已經基本可以使用Docker建構簡單的WEB應用了,在前端開發中,合理利用Docker,可以減少很多環境帶來的問題。