研究至今 我發現開發 shopify app 其實還是有點門檻的
就算只是想要寫個小東西 其實也不太容易架設起來
主因是 shopify 生態系有點大 需要看的 sdk 有點多 需要翻的文件也不少
再來是 shopify 演化的速度太快 網路上查到的很多資料、chatgpt 給的答覆 都過時了
我決定乖乖用官方的 shopify-cli 與 remix 來開發
分享一下正式環境、開發環境的流程與目前成果
首先 shopify-cli 有提供 preview 功能 其實滿強大的 本機改一些 react ui 會在 shopify store 後台看到 hot reload 這點很棒
必須要說的是 使用 shopify app dev 會導致 toml 設定檔被修改
一但 app 正式開始販售 這情況會讓「所有正在用 app 的商店發生故障」
所以 應該要建立兩個 app 一個 for production 一個 for development
怎樣才能流暢開發呢？以下是我的步驟
首先 使用 shopify-cli 直接 scaffold 出基本架構 先試著部署這個就好！
我在 linode 機器上面 git clone 好我的專案
建立 .env 檔案 參考網址準備一些環境變數
完成之後 使用 npm run setup 會準備好資料庫
然後我使用 pm2 來管理 remix app
使用 pm2 start npm --name akawa-upsell -- start 來啟動 app
注意那個 -- 應該是「後面的參數是交給 npm 去跑」的意思
接著使用 apache 做 reverse proxy
<VirtualHost *:80>
ServerName akawa-upsell.turn.tw
ProxyPreserveHost On
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
ErrorLog ${APACHE_LOG_DIR}/crawl_error.log
CustomLog ${APACHE_LOG_DIR}/crawl_access.log combined
</VirtualHost>這很簡單 這時直接開啟網址 https://akawa-upsell.turn.tw/ 會看到 app 介紹頁
然後在 shopify 面板也可以用測試商店來 install app
這非常棒也非常神奇
如果有修改程式 要如何部署呢？我寫了一個自動部署的 shell 腳本
#!/bin/bash
echo Start deploying to main server...
ssh tony-main-server '
set -e # 遇錯即停
export NVM_DIR="$HOME/.nvm" # 加這行，讓 nvm 指令生效
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
echo "Switching Node.js version to 22..."
nvm use 22
echo "Node.js version now:"
node -v
echo "Updating source code..."
cd "/home/akawa-upsell.turn.tw" && git pull
echo "Installing dependencies and building..."
npm install && npm run build
echo "Reloading pm2 service..."
pm2 restart akawa-upsell
pm2 reset akawa-upsell
'
echo Finish deploying.效果相當好 要更新主程式可以直接用
如果要更新 extension 那些的話 請使用 shopify app deploy 提交給 shopify
再來是比較 tricky 的部分
不可能本機每次調整一行 javascript 就重新部署然後去 shopify 開來看變化
官方有提供 shopify app dev 給本機使用 但用下去設定檔會亂掉
分享一下我的解決方案
請去 shopify partner 後台 手動建立一個新的 app 名稱請用 [Dev] 開頭以免搞錯
再來請把 package.json 改寫以下兩行
"dev": "shopify app dev --config=shopify.app.development.toml", "deploy": "shopify app deploy --config=shopify.app.production.toml",接著請讓 shopify.app.toml 檔案直接消失，以免造成混亂
mv shopify.app.toml shopify.app.production.toml然後請在 .gitignore 檔案加入 shopify.app.development.toml
因為每次 npm run dev 裡面很多網址相關的值 都會被修改 用 git 管理看了會很煩
再來請把剛剛建好的 dev app 的 client id name handle 那些更新到 shopify.app.development.toml 檔案
如此一來，本機未來就可以使用 npm run dev 開發
然後可以用腳本自動部署
並且主程式都在同一份 git repo 裡面管理
這樣開發起來才順手
這個流程很 tricky 沒錯
但這是我所找到最順手的開發流程
奇怪的是 好像沒在網路上 看到國內外有人分享以上技巧
我認為這應該算是 best practice 才對 官方直接收錄我這流程都不為過
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式