【 工具 】Mac 限定 WordPress 本機開發環境 Valet + ValetPress

目錄

前言

自從在 2018 年 WordCamp Taipei 分享使用 Docker + Kusanagi 來搭建 WordPress 本機開發環境之後,我的小不點 MBP 硬碟就被 Docker 的 images 跟 volume 給塞爆了, 這才知道時間一久 Docker 超吃容量@@

後來就全部改用 Local ( Localhost by Flywheel ),用了幾個月不管是安裝還是效能上都很滿意,但某天發現硬碟又要爆了,就用 CleanMyMac 把一些大檔砍一砍,不砍還好,一砍發現我用 Local 開的站全都 GG…

追查下才發現我誤砍了 Local 要用的 VM,仔細看每個站都有獨立的 PHP、Nginx、MySql,所以 VM 超肥,只能乖乖的把已經做的差不多的案子先移掉,只留下正在進行中的 VM。

什麼是 Valet?

Valet 的中文是男僕,讓我想到黑執事這部漫畫,然後又是真人版崩壞…

在 2019 年底聽到這一集 Podcast ( 很不錯的 WordPress Podcast,大推!),Dustin Hartzler 分享了他的 WordPress 開發環境是一套叫做 Valet Plus 的工具,Valet 是 PHP 框架 Laravel 推薦的 Mac 開發環境,很好的整合了 Nginx / PHP / MySql,然後重點是下面這句:

In other words, a blazing fast Laravel development environment that uses roughly 7 MB of RAM. 

對記憶體&硬碟小資族的我來說眼睛立馬為之一亮,它利用已經裝在 Mac 裡面的東西來生出本機網站來,所以再也不用像 Docker 或是 Local 一樣,只要一套 Nginx / PHP / MySql 就可以搞定,這超級省空間啊!

雖然這樣就無法針對不同站提供不同的環境,但如果真的要特別的環境就用 Local 開也是可以的,另外一個好處是他是用 DnsMasq 來管理做網址對應,就不用 Host 檔在那邊改半天,

綜合上述理由, Valet 立馬成為我躍躍欲試的開發環境!

Valet、Valet Plus、ValetPress、ValetXXX

最後一個是我亂掰的XD,研究下去發現有很多不同版本的 Valet,後來找到這一篇:Install WordPress locally in under 5 seconds with ValetPress,號稱五秒就可以完成安裝一個新的 WordPress 網站,

vp empty to create a empty WP site with the 2016 theme (4.7 seconds)
vp create to create a WP site from your starter git repo (~28 seconds)

ValetPress 方便之處在於作者 Aaron Rutley 把一些常用的流程都寫好指令了,像是下載 WP、建 DB、設定帳號密碼等等,要改寫成自己的也非常容易,比照辦理就行,最常用的指令是 vp create,也就是新增一個站,輸入後就會用問答式的介面來引導你,

他的指令內容也非常淺顯易懂,節錄如下:

if [ $1 = "create" ]; then
    cd ~/Sites
    echo "${VP_BOLD}ValetPress, create new site ${VP_NONE}"
    echo "${VP_YELLOW}Project Name:${VP_NONE}"
    read project_name
    mkdir "$project_name"
    cd "$project_name"
    echo "${VP_YELLOW}DB Prefix:${VP_NONE}"
    read dbprefix
    mysql -uroot -e "create database \`$project_name\`"
    wp core download --locale=zh_TW --skip-content
    wp core config --dbname="$project_name" --dbuser=root --dbhost=127.0.0.1 --dbprefix="$dbprefix"
    wp core install --url="$project_name".test --title="$project_name".test --admin_user="$project_name"  --admin_password=password --admin_email=wordpress@wordpress.org
    git clone https://github.com/oberonlai/ods.git wp-content/themes/"$project_name"
    eval mv ~/Sites/"$project_name"/wp-content/themes/ods ~/Sites/"$project_name"/wp-content/themes/"$project_name"
    cd wp-content/themes/"$project_name"
    rm -rf .git
    git init
    wp theme activate "$project_name"
    #wp plugin activate advanced-custom-fields-pro minimal-admin bulk-page-creator simple-page-ordering
    #wp plugin update --all
    echo "${VP_GREEN}Success:${VP_NONE} Project Created: ${VP_UNDERLINE}https://$project_name.test/${VP_NONE}"
    echo "L: ${VP_UNDERLINE}https://$project_name.test/wp-admin/${VP_NONE}"
    echo "U: $project_name"
    echo "P: password"
    echo "Valet Link Project"
    cd ~/Library/Mobile\ Documents/com~apple~CloudDocs/Sites/"$project_name"/
    valet link $project_name
    valet secure $project_name
    echo "${VP_GREEN}Success:${VP_NONE} Updating&Running NPM install"
    cd ~/Library/Mobile\ Documents/com~apple~CloudDocs/Sites/"$project_name"/wp-content/themes/"$project_name"
    npm-upgrade
    npm install
    echo "${VP_GREEN}Success:${VP_NONE} Running Parcel Build"
    npm run build
    #gulp
fi

關鍵是 git clone 那邊,你可以把你自己常用的 theme、plugin 整理成一包 wp-content 丟到 GitHub 或是其他版控服務上,然後下面他幫你用 WP CLI 啟用該啟用的東西、以及順便處理更新。

如果有用 NPM 還會自動 npm install,簡單說就是可以把平常自己的工作流程全都用這一支來進行自動化,這樣要建新的開發專案時只要下 vp create 之後就可以去泡茶了~

ValetPress 安裝步驟

相較於 Local,用指令安裝東西好卡關,主要是 MySql 的部分一直起不來,還有最後 valet 的部分要 link 才可以正確連線,詳細安裝步驟如下:

一、安裝 Homebrew

Homebrew 是 MacOS 專用的套件管理系統,開啟終端機,輸入以下指令即可安裝

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

安裝完成後,先確認 brew 可以正確執行,

$ brew update

如果執行 brew update 發生錯誤,要先把別名加入 .bash_profile,

$ open .bash\_profile

輸入上面的指令後會打開一個文字檔,在檔案的最下面加入以下文字:

export PATH=”/usr/local/bin:$PATH”

確認 brew update 可以正確執行後就可以進入到下一步了!

二、安裝 PHP&Composer

先使用 Homebrew 安裝 PHP,再安裝 PHP 套件管理系統 Composer:

$ brew install php
$ brew install composer

三、安裝 MySql

Valet 官方文件是安裝 MySql 5.7,個人是習慣裝 Mariadb:

$ brew install mariadb

狀況來了,當我要 mysql -u root 的時候,會出現時 ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/tmp/mysql.sock’ (2),

爬了一堆解,試了一堆方法都還是行不通,最後發現到如果是透過 Homebrew 安裝的只要執行以下指令即可:

$ mysql.server start

再次登入 mysql -u root 出現 ‘Access denied for user ‘root’@’localhost’,查了之後說是權限不夠,可以用 sudo 來執行,但 ValetPress 的腳本我試過加 sudo 還是過不了,解決辦法是先用 sudo 進入後去修改 root 的密碼為空值:

use mysql;
set password for 'root'@'localhost' = password('');
flush privileges;
quit

完成後重新啟用即可。

$ brew services restart MariaDB

四、安裝 Valet

使用 composer 下載 valet 套件:

$ composer global require laravel/valet

下載依賴套件中…

上面那一堆跑完後開始安裝 Valet:

$ valet install

這時候出現 zsh: command not found: valet 的錯誤訊息,要讓 valet 可以全域使用,必須要 export 才行,我的環境是用 zsh,所以要打開 .zshrc 來加入設定:

$ open ~/.zshrc

系統會開啟一個文字檔,然後加入下方文字:

export PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/user/.composer/vendor/bin:$PATH

.zshrc 有任何修改記得要跑一次 source 才會套用更新:

$ source ~/.zshrc

加入後再次 valet install,會出現 stopping Nginx 的訊息,代表正在啟用 valet 中,但如果出現 Homebrew PHP appears not to be linked. 代表 Homebrew 沒有連結到正確的 PHP,輸入以下指令來產生連結:

$ brew link php --force

再次輸入 valet install 即可啟用 Valet。Valet 預設情況下它會在背景執行,所以如果要連上測試站的話,再也不用像以前啟用 MAMP、Docker、Local 要等上一段時間,只要一開機 Valet 就會自動啟用。

五、安裝 WP-CLI

WP CLI 是超強大又實用的指令工具,可以從系統底層對 WordPress 上下其手,可以參考官方的安裝方式也可以使用 Homebrew 來安裝:

$ brew install wp-cli

裝完後記得把 wp 關鍵字加入到個人設定檔中,這樣就可以用 wp –info 這樣的簡寫來操作它。

$ chmod +x wp-cli.phar
$ sudo mv wp-cli.phar /usr/local/bin/wp

六、下載 ValetPress

上面環境都完成後,主角 ValetPress 要登場了 。先在本機 user 目錄新開一個隱藏目錄叫做「 .valetpress」 與一般目錄 「Sites」 資料夾,前者是放 ValetPress 自動化腳本,後者是之後新建 WordPress 站的網站目錄。

下載 ValetPress 原始,解壓縮後放入這個 /yourmacusername/.valetpress 這個目錄中,然後 .zshrc 要引入這個 valetpress 這個檔案,先打開 zsh 設定檔

$ open ~/.zshrc

加入以下判斷式:

if \[ -f ~/.valetpress/valetpress \]; then
    source ~/.valetpress/valetpress
else
    print "404: ~/.valetpress/valetpress not found."
fi

一樣,設定檔改好後記得要跑 source 才會更新,如果你有自己改寫 valetpress 也記得要 soruce 一下:

$ source ~/.zshrc

七、打完收工

輸入指令以及專案名稱,接下來可以就享受秒速建置本機環境的爽快感啦~但前提是要先記得把你的 repo 換上,ValetPress 內建的是 Private Repo。

$ vp create

輸入後會出現問答式的安裝介面,安裝完成後,正當以為一切都已經搞定,結果連上測試網站的網址一直給我 404 not found

查了之後才知道要做 link:先把目錄切換到 Sites/projectname,然後 valet link projectname,然後 valet restart 即可,這一步驟我自己是已經把它寫在 Valetpress 裡面了,另外還有網站加密,加入以下腳本:

echo "Valet Link Project"
cd ~/Sites/"$project\_name"/
valet link $project\_name
valet secure $project\_name

在做 valet link 的時候會需要入 Mac 使用者密碼,輸入後就會自動完成連結,這樣就大功告成啦~

八、移動網站根目錄

預設的情況下 Sites 的根目錄會放在使用者的資料夾底下,但最近為了想把原始碼做額外的異地備份,我希望可以讓整個 Sites 也能被同步到雲端,評估之下我最後選擇的備份環境是 iCloud,先將路徑切換到 iCloud 的根目錄:

$ cd /Users/yourusername/Library/Mobile Documents/com~apple~CloudDocs

所以我先在裡面開了 Sites 資料夾然後把已經建立的站移過去,但移過去後網站就打不開了,需要讓 valet 多做一個 park 的動作,在 iCloud 的目錄下執行 park:

~/Library/Mobile Documents/com~apple~CloudDocs/Sites $ valet park

或是也可以開啟 ~/.config/valet/config.json 把 paths 加入 iCloud 的資料夾路徑,這樣就可以讓 valet 認得這個路徑裡面的網站了~

{
    "tld": "test",
    "loopback": "127.0.0.1",
    "paths": [
        "/Users/yourusername/.config/valet/Sites",
        "/Users/yourusername/Library/Mobile Documents/com~apple~CloudDocs/Sites"
    ]
}

心得

目前使用 ValetPress 在兩個專案中,還沒有發生什麼狀況,網站整體速度也不錯,最感動的是硬碟沒有日益增肥,希望它可以陪我長長久久,不想再為了本機環境燒腦了 Orz…

後記

2022 年的現在我換了新 MBP 擁有 1TB 的硬碟,但我還是繼續使用著 ValetPress,能夠高度客製化是讓我離不開它的原因,更不用說新電腦的執行效能跑 Valet 依舊是順暢到爆表,現在當我在本機開發完後推上測試機會很不適應遠端主機的後台執行速度,只能說都是被 Valet 給寵壞了XD

文章標籤localwpvalet

目錄

賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

現為全職 WordPress 工程師,網站開發經歷 11 年,專攻前端工程與 WordPress 佈景主題、外掛客製化開發

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!

覺得文章寫得好再幫我鼓個掌吧!

相關文章

用 AI 幫你開發 WordPress 外掛吧!

每次去逛誠品書店的時候,總是會看到每層書架擺上滿滿的關於機器學習的書籍,心裡就在想這個領域的學習需求有大到這樣嗎?另一方面,每當看...

WordPress 外掛整合 Zoom API

Zoom 是許多線上課程所採用的直播平台,但直到最近我才發現 Zoom 的 Marketplace 已經有超過上千個應用程式可以使...

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

專注於分享 WordPress 開發、接案技巧、專案管理等自由工作者必備知識與心得

© 2022 想點創意科技有限公司

Designed by Hend Design | 隱私權政策

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!