Remix Grunge Stack

瞭解更多關於 Remix Stacks 的資訊。

npx create-remix@latest --template remix-run/grunge-stack

此 Stack 中包含哪些內容

• 使用 Architect 的 AWS 部署
• 可直接用於生產環境的 DynamoDB 資料庫
• 使用 GitHub Actions 在合併到生產和預備環境時進行部署
• 使用 基於 Cookie 的 Session 進行電子郵件/密碼驗證
• 透過 arc.tables 存取 DynamoDB
• 使用 Tailwind 進行樣式設計
• 使用 Cypress 進行端對端測試
• 使用 MSW 進行本地第三方請求模擬
• 使用 Vitest 和 Testing Library 進行單元測試
• 使用 Prettier 進行程式碼格式化
• 使用 ESLint 進行程式碼檢查
• 使用 TypeScript 進行靜態型別檢查

不喜歡此 Stack 的某些部分嗎？Fork 它，修改它，並使用 npx create-remix --template your/repo！讓它成為您自己的 Stack。

快速開始

點擊此按鈕來建立一個使用此專案設定的 Gitpod 工作區

開發

• 首先執行此 Stack 的 remix.init 指令碼，並將其對您的專案所做的更改提交。

  npx remix init
  git init # if you haven't already
  git add .
  git commit -m "Initialize project"
  

• 驗證應用程式已正確設定（選用）

  npm run validate
  

• 啟動開發伺服器

  npm run dev
  

這會以開發模式啟動您的應用程式，並在檔案變更時重新建置資源。

相關程式碼

這是一個非常簡單的筆記應用程式，但它是一個很好的範例，說明如何使用 Architect 和 Remix 建構完整的堆疊應用程式。主要功能是建立使用者、登入和登出，以及建立和刪除筆記。

• 建立使用者以及登入和登出 ./app/models/user.server.ts
• 使用者 Session 和驗證它們 ./app/session.server.ts
• 建立和刪除筆記 ./app/models/note.server.ts

arc sandbox 附帶的資料庫是一個記憶體資料庫，因此如果您重新啟動伺服器，您將會遺失資料。預備和生產環境不會以這種方式運作，相反地，它們會在部署和 Lambda 執行之間將資料保存在 DynamoDB 中。

部署

這個 Remix Stack 附帶兩個 GitHub Actions，可處理將您的應用程式自動部署到生產和預備環境。預設情況下，Arc 將部署到 us-west-2 區域，如果您希望部署到不同的區域，則需要變更您的 app.arc

在您的第一次部署之前，您需要完成一些事情

• 建立新的 GitHub 儲存庫

• 註冊 並登入您的 AWS 帳戶

• 將 AWS_ACCESS_KEY_ID 和 AWS_SECRET_ACCESS_KEY 新增到 您的 GitHub 儲存庫的機密。前往您的 AWS 安全憑證 並點擊「存取金鑰」標籤，然後點擊「建立新存取金鑰」，然後您可以複製這些金鑰並將其新增到您儲存庫的機密中。

• 安裝 AWS CLI。

• 建立 AWS 憑證檔案。

• 除了您的 AWS 憑證之外，您還需要為您的 CloudFormation 提供一個它自己的 SESSION_SECRET 變數，用於預備和生產環境，以及一個用於 Arc 本身的 ARC_APP_SECRET。

  npx arc env --add --env staging ARC_APP_SECRET $(openssl rand -hex 32)
  npx arc env --add --env staging SESSION_SECRET $(openssl rand -hex 32)
  npx arc env --add --env production ARC_APP_SECRET $(openssl rand -hex 32)
  npx arc env --add --env production SESSION_SECRET $(openssl rand -hex 32)
  

  如果您沒有安裝 openssl，您也可以使用 1password 來產生隨機機密，只需將 $(openssl rand -hex 32) 替換為產生的機密即可。

我在哪裡可以找到我的 CloudFormation？

您可以在 sam.yaml 檔案中找到 Architect 為您產生的 CloudFormation 範本。

若要在 AWS 上找到它，您可以搜尋 CloudFormation（請確保您正在查看正確的區域！）並找到您的堆疊名稱（此名稱是您在 app.arc 中的名稱的 PascalCased 版本，因此預設名稱為 RemixGrungeStackStaging 和 RemixGrungeStackProduction），該名稱與 app.arc 中的名稱相符，您可以在「資源」標籤下找到所有應用程式的資源。

GitHub Actions

我們使用 GitHub Actions 進行持續整合和部署。任何進入 main 分支的內容都會在執行測試/建置等之後部署到生產環境。任何在 dev 分支中的內容都會部署到預備環境。

測試

Cypress

我們在這個專案中使用 Cypress 進行端對端測試。您會在 cypress 目錄中找到這些測試。當您進行變更時，請在 cypress/e2e 目錄中新增到現有檔案或建立新檔案，以測試您的變更。

我們使用 @testing-library/cypress 以語意方式選擇頁面上的元素。

若要在開發中執行這些測試，請執行 npm run test:e2e:dev，這將會啟動應用程式的開發伺服器以及 Cypress 用戶端。請確保資料庫如上述說明在 Docker 中執行。

我們有一個公用程式，可用於測試已驗證的功能，而無需經過登入流程

cy.login();
// you are now logged in as a new user

Vitest

對於公用程式和個別元件的較低層級測試，我們使用 vitest。我們透過 @testing-library/jest-dom 擁有特定於 DOM 的斷言協助程式。

型別檢查

這個專案使用 TypeScript。建議為您的編輯器設定 TypeScript，以獲得非常棒的編輯器內體驗，包括型別檢查和自動完成。若要對整個專案執行型別檢查，請執行 npm run typecheck。

程式碼檢查

這個專案使用 ESLint 進行程式碼檢查。它在 .eslintrc.js 中設定。

格式化

我們在這個專案中使用 Prettier 進行自動格式化。建議安裝編輯器外掛程式（例如 VSCode Prettier 外掛程式）以在儲存時進行自動格式化。還有一個 npm run format 指令碼，您可以執行它來格式化專案中的所有檔案。