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)