Remix Indie Stack

深入了解 Remix Stacks。

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

Stack 中包含的功能

• 使用 Docker 的 Fly 應用程式部署
• 可直接用於生產環境的 SQLite 資料庫
• 用於 Fly 備份區域回退的健康檢查端點
• 用於合併到生產環境和預備環境時進行部署的 GitHub Actions
• 使用 基於 Cookie 的 Session 的電子郵件/密碼驗證
• 使用 Prisma 的資料庫 ORM
• 使用 Tailwind 的樣式
• 使用 Cypress 的端對端測試
• 使用 MSW 的本機第三方請求模擬
• 使用 Vitest 和 Testing Library 的單元測試
• 使用 Prettier 的程式碼格式化
• 使用 ESLint 的程式碼檢查
• 使用 TypeScript 的靜態類型

不喜歡 stack 中的某些部分？Fork 它、更改它，然後使用 npx create-remix --template your/repo！打造你自己的版本。

快速開始

點擊此按鈕以建立一個 Gitpod 工作區，其中已設定好專案並預先安裝了 Fly

開發

• 首先執行此 stack 的 remix.init 腳本，並提交其對專案所做的變更。

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

• 初始設定

  npm run setup
  

• 啟動開發伺服器

  npm run dev
  

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

資料庫 Seed 腳本會建立一個新使用者，並包含一些你可以用來開始使用的資料。

• 電子郵件：rachel@remix.run
• 密碼：racheliscool

相關程式碼

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

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

部署

這個 Remix Stack 包含兩個 GitHub Actions，用於處理將你的應用程式自動部署到生產環境和預備環境。

在第一次部署之前，你需要做一些事情

• 安裝 Fly

• 註冊並登入 Fly

  fly auth signup
  

  注意：如果你有多個 Fly 帳戶，請確保你在 Fly CLI 中登入的帳戶與你在瀏覽器中登入的帳戶相同。在你的終端機中，執行 fly auth whoami 並確保電子郵件與瀏覽器中登入的 Fly 帳戶相符。

• 在 Fly 上建立兩個應用程式，一個用於預備環境，一個用於生產環境

  fly apps create indie-stack-template
  fly apps create indie-stack-template-staging
  

  注意：確保此名稱與你的 fly.toml 檔案中設定的 app 相符。否則，你將無法部署。

  • 初始化 Git。

  git init
  

• 建立一個新的 GitHub 儲存庫，然後將其新增為你專案的遠端。不要立即推送你的應用程式！

  git remote add origin <ORIGIN_URL>
  

• 將 FLY_API_TOKEN 新增至你的 GitHub 儲存庫。為此，請前往 Fly 上的使用者設定並建立一個新的 token，然後使用名稱 FLY_API_TOKEN 將其新增至你的儲存庫機密。

• 將 SESSION_SECRET 新增至你的 Fly 應用程式機密，為此你可以執行以下命令

  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app indie-stack-template
  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app indie-stack-template-staging
  

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

• 為你的預備環境和生產環境的 SQLite 資料庫建立一個持久性磁碟區。執行以下命令

  fly volumes create data --size 1 --app indie-stack-template
  fly volumes create data --size 1 --app indie-stack-template-staging
  

現在所有設定都已完成，你可以提交並推送變更到你的儲存庫。每次提交到你的 main 分支都會觸發部署到你的生產環境，而每次提交到你的 dev 分支都會觸發部署到你的預備環境。

連線到你的資料庫

SQLite 資料庫位於你已部署應用程式中的 /data/sqlite.db。你可以透過執行 fly ssh console -C database-cli 來連線到即時資料庫。

取得部署方面的協助

如果你在部署到 Fly 時遇到任何問題，請確保你已遵循上述所有步驟，並且如果你已遵循這些步驟，請將盡可能多的部署詳細資料（包括你的應用程式名稱）發佈到 Fly 支援社群。他們通常在那裡的回應速度很快，並希望能夠協助解決你的任何部署問題和疑問。

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

我們還有一個公用程式，可在測試結束時自動刪除使用者。只需確保在每個測試檔案中新增此公用程式即可

afterEach(() => {
  cy.cleanupUser();
});

這樣，我們就可以保持你的本機資料庫清潔，並讓你的測試彼此隔離。

Vitest

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

類型檢查

此專案使用 TypeScript。建議為你的編輯器設定 TypeScript，以便透過類型檢查和自動完成功能獲得非常棒的編輯器體驗。若要針對整個專案執行類型檢查，請執行 npm run typecheck。

程式碼檢查

此專案使用 ESLint 進行程式碼檢查。該檢查設定在 .eslintrc.cjs 中。

格式化

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