DEV Community

Cover image for Local 本機 WordPress 開發環境建置工具
Leon
Leon

Posted on • Originally published at editor.leonh.space

Local 本機 WordPress 開發環境建置工具

最近又碰到那萬惡的 WordPress,重新調查了 WordPress 在本機端建置的方案,發現了一個新東西覺得還不錯用,在這邊分享。

本機環境

如同大多數的資訊專案一樣,在為 WordPress 製作新站台也往往是先在本機端建置一套開發環境,在比較穩定後再部署到生產機台中,可是萬惡的 WordPress 並沒有內建原生的開發環境,所以以往都是採用一些第三方包好的懶人包/架站機之類來使用,可是使用體驗並不好,包括必須要配置一些參數等,以及它們有些還在用老舊的 PHP 或 Apache 或 MySQL,這裡介紹的 Local 解決了一部分前面提到的的問題。

Local

Local 也算是本機架 WordPress 的懶人包之一,它有一些值得一提的特色:

  • 跨平台 Linux、macOS、Windows。
  • 管理工具簡單好上手。
  • 支援在本機建立多個獨立站台。
  • 每個站台的底層套件 PHP、MySQL 可自由更換版本。
  • 整合 MailHog 用於確認信件寄發狀況。
  • 預設支援 HTTPS。
  • 整合 WP-CLI
  • 整合 Ngrok
  • 整合 Adminer 作為 MySQL 管理界面。

Local 的安裝與建立站台

Local 的安裝與使用非常簡單,只要去 Local 的網站下載並安裝即可,並且 Local 同時提供了 Linux、macOS、Windows 的安裝包,以及一致的管理介面。

安裝後跑起來應該會看到這個畫面:

Local

左邊的主選單,除了第二個「Local Sites」外,其它都是些付費相關的加值服務,我輩小資男女們應該用不到。

Local Sites 這頁,按 CREATE A NEW SITE 應該會看到這幾頁:

Setup Site

第一頁填站名。

Setup Site

先輸入站名,再把 ADVANCED OPTIONS 展開後會看到更多欄位:

  • Local site domain:本地的網址。
  • Local site path:站台專案在電腦內的資料夾。
  • Create site from Blueprint?:付費服務可略過。

Setup Environment

第二頁決定底層組件,它預帶的 PHP 7.3.5、Nginx、MySQL 8.0.16 都是目前的主流選擇,可以直接使用。

Setup WordPress

第三頁設定 WordPress 帳密。

Setup WordPress

  • 那個 email 不用去改它,Local 有整合 MailHog 來確認信件的寄發狀況。
  • 那個 multisite 的欄位一般不會使用。

Local 管理工具

依照上面的步驟建立站台後,會回到 Local Sites 的頁面:

Local Sites

頁面內大部分的內容應該都很好懂,重點提示一下幾個可能較陌生的功能:

  • 最下方的 Live Link 啟動後會透過 ngrok 的服務產生一組 xxxxxxxxx.ngrok.io 的網址,這組網址可以給外部的人訪問,即使這台本機電腦可能是在內網 NAT 後方也無妨,但每次開關 Live Link 的網址都會變動,所以真的只適合拿來給同事或客戶預覽,無法作為正式網址。詳細的 ngrok 介紹可以參考另外一篇〈ngrok 讓本機發佈出可被訪問的網址〉。
  • Local 又自動幫我們建立 HTTPS 所需要的 TLS 憑證,不過是自簽的,需要對憑證做信任許可,在 SSL 頁面的 TRUST 按下去,Local 會把憑證加入系統的信任憑證庫內。
  • 在 UTILITIES 內有可以進到 MailHog 的連結,MailHog 是 SMTP 發信的攔截器,所有 WordPress 寄出的信件都會被放進 MailHog 內,方便我們做格式或內容的確認。

Local 可以更好的地方

Local 已經是本人遇過最佳的 WordPress 懶人包,但還是有些缺憾:

  • Web server 只能選 Nginx 或 Apache,還無法用更新一代的 Caddy
  • Local 較適合單人單線開發,因為沒有同步或版控的機制,較不適合多人多線開發,不過這其實是萬惡的 WordPress 的原罪。

Top comments (0)