remix-cloudflare-template

深入了解 Remix Stacks。

npx create-remix@latest --template edmundhung/remix-cloudflare-template

包含哪些內容？

• 使用 Vite 開發
• 在 Cloudflare Workers 上使用 靜態資源託管
• 用於持續整合的 Github Actions
• 使用 Workers Build 自動建置和部署
• 使用 Markdoc 渲染 Markdown
• 使用 Tailwind 設定樣式
• 使用 Playwright 進行端對端測試
• 使用 MSW 進行本機第三方請求模擬
• 使用 Prettier 格式化程式碼
• 使用 ESLint 進行程式碼檢查
• 使用 TypeScript 進行靜態類型檢查

開發

開始之前，複製 .dev.vars.example 並將其命名為 .dev.vars，並填入所需的密鑰。

cp .dev.vars.example .dev.vars

啟動 Vite 開發伺服器

npm run dev

您也可以啟動 Playwright UI 模式來測試您的應用程式。您可以在 /tests/e2e 目錄中找到所有定義的測試。

npm run test

要在 workerd 執行階段測試您的應用程式，您可以使用以下指令啟動 wrangler 開發伺服器

npm run build && npm run start

新的環境變數 & 密鑰

要新增密鑰，請在 .dev.vars 檔案中 更新該值。

對於其餘的環境變數，您可以在 wrangler.toml 檔案的 var 區段中使用新變數進行更新

[vars]
NEW_VARIABLE = "..."

這些變數將可從環境中的 env 物件取得。

設定 KV 命名空間

若要在開發環境中設定新的 KV 命名空間，請使用類似於下方所示的快取命名空間的物件更新 wrangler.toml

kv_namespaces = [
  { binding = "cache", id = "cache" },
  { binding = "new_namespace", id = "new_namespace" }
]

請注意，id 在開發環境中沒有作用。您可以將相同的名稱用於 id 和 binding。命名空間將可從環境中的 env 物件取得。

產生環境類型

您可以使用以下指令，根據 wrangler.toml 和 .dev.vars 產生 env 物件的類型

npm run typegen

部署

在首次部署之前，請確保所有環境變數和繫結都已在 Cloudflare 儀表板上正確設定。

建立新的應用程式

若要在 Cloudflare 儀表板上建立新的應用程式，請從選單中選取 Workers 和 Pages，然後按一下 Create Application。然後，您可以依照您的需求依照指示操作。

設定環境變數

若要設定環境變數，請從選單中選取 Workers 和 Pages，然後尋找應用程式詳細資訊。您會在 Settings 標籤底下找到 environment variables 區段。

設定 KV 命名空間

若要設定新的 KV 命名空間，您需要先透過 Workers 和 Pages 底下的 KV 選單建立新的命名空間，然後按一下 Create a namespace。

建立命名空間後，您可以從應用程式詳細資訊頁面將命名空間繫結到應用程式。您可以在 Settings 標籤底下的 Functions 區段中找到該設定。

偵錯

如果您的應用程式無法正常運作，您可以在部署詳細資訊頁面的 Functions 標籤中找到即時記錄。