阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

站長阿川 · 08月08日

再談 shopify app 正式環境與開發環境

應該是我對 shopify 不夠熟悉他有些 cmd 功能我不會用的關係

所以變得有點 tricky 但以下是我找到的開發方式

部署 shopify 設定與 app extension

我把 package.json 做了小修改

    "deploy": "shopify app deploy --config=shopify.app.production.toml",
    "deploy:dev": "shopify app deploy --config=shopify.app.development.toml",

關於資料庫讀取

由於 app extension 需要讀取資料庫

我當然希望測試商店讀取的是開發資料庫

這很 tricky 因為 app extension 會部署到 shopify 從官方主機讀取

我這邊分享部分原始碼

function getApiBaseUrl() {
  const devShops = [
    'akawaselect.myshopify.com',
  ];

  const shop = window.Shopify?.shop;

  if (devShops.includes(shop)) {
    console.warn("Using development API base URL for Akawa recommendations");
    return "https://dev-app.akawaupsell.com";
  }

  console.warn("Using production API base URL for Akawa recommendations");
  return "https://app.akawaupsell.com";
}

function App({ productId }) {
  const shop = window.Shopify?.shop;

  useEffect(() => {
    const baseUrl = getApiBaseUrl();

    fetch(`${baseUrl}/api/public/matching-set/${productId}?shop=${shop}`)

有點鳥的做法但尚可接受

關於部署後端主程式

我直接分享我用的 shell script

#!/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 "=== Deploying Production Environment ==="
  echo "Updating source code for production..."
  cd "/home/app.akawaupsell.com" && git pull

  echo "Installing dependencies and building for production..."
  npm install && npm run build

  echo "Running database migrations for production..."
  npm run setup

  echo "Reloading production pm2 service..."
  pm2 restart akawa-upsell-prod
  pm2 reset akawa-upsell-prod

  # 部署開發環境
  echo "=== Deploying Development Environment ==="
  echo "Updating source code for development..."
  cd "/home/dev-app.akawaupsell.com" && git pull

  echo "Installing dependencies and building for development..."
  npm install && npm run build

  echo "Running database migrations for development..."
  npm run setup

  echo "Reloading development pm2 service..."
  pm2 restart akawa-upsell-dev
  pm2 reset akawa-upsell-dev
'

echo "Finish deploying both production and development environments."

關於資料庫

我直接用 Neon Postgres 就有內建分別 production/development database

以上要順暢開發我認為還是有相當門檻

老話一句開發 shopify app 有點困難啊！

0個讚 0留言 9瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

站長阿川

👉 身份：資深全端工程師、指導過無數人半路出家轉職 👉 使命：打造 CodeLove 成為優質新手村，讓非本科也有地方自學＆討論

阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

阿川私房教材：學 JavaScript 前端，帶作品集去面試！

再談 shopify app 正式環境與開發環境

再談 shopify app 正式環境與開發環境

部署 shopify 設定與 app extension

關於資料庫讀取

關於部署後端主程式

關於資料庫

阿川私房教材：學 JavaScript 前端，帶作品集去面試！

阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

阿川私房教材：
學 JavaScript 前端，帶作品集去面試！