使

使用 TypeScript 构建生产就绪的 SaaS 应用程序

2025-06-05

使用 TypeScript 构建生产就绪的 SaaS 应用程序

正在考虑构建 SaaS 应用程序？此入门模板将帮助您使用Encore.ts和Next.js创建可扩展且可立即投入生产的应用程序。

它使用Clerk进行身份验证，集成Stripe进行支付，并使用Tailwind和shadcn/ui进行样式和组件。

SaaS 入门

特征

  • 营销登陆页面 (/)
  • 连接到 Stripe Checkout 的定价页面 (/pricing)
  • 带有 (/dashboard) 的仪表板页面
  • 订阅管理（/dashboard/subscription）

技术栈

入门

安装或更新 Encore

安装 Encore：

  • macOS： brew install encoredev/tap/encore
  • Linux： curl -L https://encore.dev/install.sh | bash
  • 视窗： iwr https://encore.dev/install.ps1 | iex

注意：此启动器需要 Encore v1.46.9+，如果您安装了旧版本，请使用 进行更新encore version update。

创建应用程序

从此模板创建本地应用程序：

encore app create my-app-name --example=ts/saas-starter
Enter fullscreen mode Exit fullscreen mode

然后安装前端依赖项：

cd my-app-name/frontend
pnpm install
Enter fullscreen mode Exit fullscreen mode

设置 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}
Enter fullscreen mode Exit fullscreen mode

您还需要将以下环境变量添加到前端项目：

NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
Enter fullscreen mode Exit fullscreen mode

要将它们添加到 Encore，请转到应用的API 密钥页面。复制“可发布密钥”和其中一个“密钥”。

从您的终端（backend目录内）运行：

$ encore secret set --prod ClerkSecretKey
Enter fullscreen mode Exit fullscreen mode

接下来，对开发密钥执行相同操作。最安全的方法是创建另一个密钥（Clerk 允许您拥有多个密钥）。
获得用于开发的客户端密钥后，请按照之前的步骤进行设置：

$ encore secret set --dev ClerkSecretKey
Enter fullscreen mode Exit fullscreen mode

设置 Stripe

如果您还没有 Stripe 帐户，请创建一个。然后，创建您的帐户并确保设置产品和定价方案。您还必须配置计费客户门户。

您还需要在 Stripe 中将后端添加为 webhook 端点，并将端点 URL 设置为https://YOUR_DOMAIN/stripe/webhook。

目前，定价计划存储在frontend/lib/plans.ts中，但如果您愿意，也可以从 Stripe 读取它们或将它们存储在数据库中。

秘密

在 Stripe 仪表板上，转到“开发者”页面并创建一个新的 API 密钥。复制“密钥”。

从您的终端（backend目录内）运行：

$ encore secret set --dev StripeSecretKey
Enter fullscreen mode Exit fullscreen mode

为了能够验证传入的 webhook 请求，您需要从 Stripe 仪表板上的 Webhook 页面复制签名密钥，然后通过运行以下命令将其添加到 Encore：

$ encore secret set --dev StripeWebhookSigningSecret
Enter fullscreen mode Exit fullscreen mode

一旦您想要将其设置为生产环境，请为生产环境创建一个单独的密钥和 Webhook 签名密钥并运行：

$ encore secret set --prod StripeSecretKey
$ encore secret set --prod StripeWebhookSigningSecret
Enter fullscreen mode Exit fullscreen mode

测试付款

要测试 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=""
Enter fullscreen mode Exit fullscreen mode

本地运行

运行你的 Encore 后端：

cd backend
encore run
Enter fullscreen mode Exit fullscreen mode

注意：除非您按照上述说明设置 Stripe 和 Clerk 机密，否则此操作将会失败。

在另一个终端窗口中，使用Next.js运行 React 前端：

cd frontend
pnpm run dev
Enter fullscreen mode Exit fullscreen mode

生成请求客户端

每当您对 Encore 端点进行更改时，通过重新生成请求客户端来保持后端和前端之间的契约同步。

pnpm run gen # Deployed Encore staging environment
# or
pnpm run gen:local # Locally running Encore backend
Enter fullscreen mode Exit fullscreen mode

部署

再来一次

将您的后端部署到 Encore 免费开发云中的暂存环境：

git add -A .
git commit -m 'Commit message'
git push encore
Enter fullscreen mode Exit fullscreen mode

然后转到云仪表板来监控您的部署并找到您的生产 URL。

从那里您还可以查看指标、跟踪，将您的应用程序连接到 GitHub 存储库以在新的提交上自动部署，并连接您自己的 AWS 或 GCP 帐户以用于部署。

干得好，您的 SaaS 后端现已部署到云端！

Vercel 上的 Next.js

  1. 创建一个 repo 并将项目推送到 GitHub。
  2. 在 Vercel 上创建一个新项目并将其指向您的 GitHub 存储库。
  3. 选择frontend作为 Vercel 项目的根目录。

前端和 CORS 配置

后端需要知道前端的托管位置，以便
从 Stripe 提供正确的重定向 URL。这也是 CORS 正常工作的必要条件。

为了解决这个问题，您需要更新两个配置文件。

首先，更新FRONTEND_URL常量以backend/config.ts指向前端的托管位置。

其次，如果您在前端调用 Encore API 时遇到 CORS 问题，则可能需要指定允许哪些来源访问您的 API（通过浏览器）。您可以通过在文件global_cors中指定键来执行此操作encore.app，该文件具有以下结构：

"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>"
  ]
}
Enter fullscreen mode Exit fullscreen mode

这两个默认都是“ 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
Devto 翻译
PREV
使用 Publish/Sub 在 Go 中构建事件驱动系统
NEXT
合并与变基