想要建立一個 SaaS 應用程式嗎？這個入門範本將幫助您使用Encore.ts和Next.js建立可擴展且可用於生產的應用程式。
它使用Clerk進行身份驗證，整合Stripe進行支付，並使用Tailwind和shadcn/ui進行樣式和元件。
演示： https://encorets-saas-starter.vercel.app
特徵
-
行銷登陸頁 (/)
-
連接到 Stripe Checkout 的定價頁面 (/pricing)
-
帶有 (/dashboard) 的儀表板頁面
-
訂閱管理（/dashboard/subscription）
技術堆疊
入門
安裝或更新 Encore
安裝 Encore：
-
macOS：
brew install encoredev/tap/encore -
Linux：
curl -L https://encore.dev/install.sh | bash -
Windows：
iwr https://encore.dev/install.ps1 | iex
注意：此啟動器需要 Encore v1.46.9+，如果您安裝了舊版本，請使用encore version update更新。
建立應用程式
根據此範本建立本機應用程式：
encore app create my-app-name --example=ts/saas-starter然後安裝前端相依性：
cd my-app-name/frontend
pnpm install設定 Clerk
如果您還沒有，請建立 Clerk 帳戶。然後，在 Clerk 儀表板中建立一個新的應用程式。
確保應用程式配置為支援組織，可以在組織管理設定頁面上啟用該功能。
秘密
如果您在 Vercel 上託管您的應用程式（請參閱下方的部署說明），您可以在 Vercel 上的專案設定中的整合下將您的 Clerk 應用程式與您的 Vercel 專案連接起來。
不要忘記隨後執行vercel env pull 。
否則，請轉到您的應用程式的API 金鑰頁面。複製「可發布密鑰」和其中一個「秘密密鑰」。對於你的前端專案，將它們加入到.env.local作為
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY={PUBLISHABLE_KEY}
CLERK_SECRET_KEY={SECRET_KEY}您還需要將以下環境變數新增至前端專案：
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"若要將它們新增至 Encore，請前往您套用的API 金鑰頁面。複製「可發布密鑰」和其中一個「秘密密鑰」。
從您的終端機（在您的 Encore 應用程式目錄中）執行：
$ encore secret set --prod ClerkSecretKey接下來，對開發機密執行相同的操作。最安全的方法是建立另一個金鑰（Clerk 允許您擁有多個）。
獲得用於開發的客戶端密鑰後，請按照與之前類似的方式進行設定：
$ encore secret set --dev ClerkSecretKey設定 Stripe
如果您還沒有 Stripe 帳戶，請建立一個。然後，建立您的帳戶並確保設定產品和定價計劃。您還必須配置計費客戶入口網站。
您還需要在 Stripe 中將後端新增為 webhook 端點，並將端點 URL 設定為https://YOUR_DOMAIN/stripe/webhook 。
目前，定價計劃儲存在frontend/lib/plans.ts中，但您也可以從 Stripe 讀取它們，或者如果您願意的話將它們儲存在資料庫中。
秘密
在 Stripe 儀表板上，前往開發人員頁面並建立新的 API 金鑰。複製“密鑰”。
從您的終端機（在您的 Encore 應用程式目錄中）執行：
$ encore secret set --dev StripeSecretKey為了能夠驗證傳入的 webhook 請求，您需要從 Stripe 儀表板上的 Webhook 頁面複製簽名金鑰，然後透過執行下列命令將其新增至 Encore：
$ encore secret set --dev StripeWebhookSigningSecret一旦您想要為生產進行設置，請為生產建立一個單獨的金鑰和 Webhook 簽章金鑰並執行：
$ encore secret set --prod StripeSecretKey
$ encore secret set --prod StripeWebhookSigningSecret測試付款
要測試 Stripe 付款，請使用以下測試卡詳細資訊：
卡號：4242 4242 4242 4242
到期日期：任何未來日期
CVC：任意 3 位數字
Vercel 環境變數
Vercel 特定的環境變數預設未在本機設置，因此您需要自行新增它們。這可以在 Vercel 上的專案設定頁面上完成。
請新增以下環境變數以供開發：
VERCEL_ENV="development"
NEXT_PUBLIC_VERCEL_ENV="development"
VERCEL_GIT_PULL_REQUEST_ID=""
NEXT_PUBLIC_VERCEL_GIT_PULL_REQUEST_ID=""本地執行
執行你的 Encore 後端：
cd backend
encore run注意：除非您按照上述說明設定 Stripe 和 Clerk 機密，否則此操作將會失敗。
在另一個終端機視窗中，使用Next.js執行 React 前端：
cd frontend
pnpm run dev產生請求客戶端
每當您對 Encore 端點進行變更時，請透過重新產生請求用戶端來保持後端和前端之間的契約同步。
pnpm run gen # Deployed Encore staging environment
# or
pnpm run gen:local # Locally running Encore backend部署
再次
將您的後端部署到 Encore 免費開發雲端中的暫存環境：
git add -A .
git commit -m 'Commit message'
git push encore然後轉到雲端儀表板監控您的部署並找到您的生產 URL。
從那裡您還可以查看指標、跟踪，將您的應用程式連接到 GitHub 儲存庫以在新的提交時自動部署，並連接您自己的 AWS 或 GCP 帳戶以用於部署。
做得好，您的 SaaS 後端現已部署到雲端！
Vercel 上的 Next.js
-
建立一個 repo 並將專案推送到 GitHub。
-
在 Vercel 上建立一個新專案並將其指向您的 GitHub 儲存庫。
-
選擇
frontend作為 Vercel 專案的根目錄。
前端和 CORS 配置
後端需要知道前端託管在哪裡，以便提供正確的重定向 URL
從 Stripe 回來。這也是 CORS 正常運作的必要條件。
為了解決這個問題，您需要更新兩個設定檔。
首先，更新backend/config.ts中的FRONTEND_URL常數以指向託管前端的位置。
其次，如果您從前端呼叫 Encore API 時遇到 CORS 問題，那麼您可能需要指定哪些來源被允許存取您的 API（透過瀏覽器）。您可以透過在encore.app檔案中指定global_cors鍵來執行此操作，該檔案具有以下結構：
"global_cors": {
// allow_origins_without_credentials specifies the allowed origins for requests
// that don't include credentials. If nil it defaults to allowing all domains
// (equivalent to ["*"]).
"allow_origins_without_credentials": [
"<ORIGIN-GOES-HERE>"
],
// allow_origins_with_credentials specifies the allowed origins for requests
// that include credentials. If a request is made from an Origin in this list
// Encore responds with Access-Control-Allow-Origin: <Origin>.
//
// The URLs in this list may include wildcards (e.g. "https://*.example.com"
// or "https://*-myapp.example.com").
"allow_origins_with_credentials": [
"<DOMAIN-GOES-HERE>"
]
}這兩者預設均為“https://encorets-saas-starter.vercel.app”，即託管的演示應用程式。
有關 CORS 配置的更多訊息，請參見： https://encore.dev/docs/ts/develop/cors
總結
現在，您已經擁有一個可擴展且可投入生產的 SaaS 應用程式並且可以執行。現在繼續開發您的 SaaS 產品！
原文出處：https://dev.to/encore/build-a-production-ready-saas-application-44nb
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式