Wasp 应用生产部署进阶指南自定义域名、CDN 与 DDoS 防护、生产就绪性解析【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp生产环境部署 Wasp 应用时除了把客户端、服务端和数据库跑起来还有一系列上线前必做的收尾工作为应用绑定自定义域名、用 CDN 与 DDoS 防护加固性能与安全以及搞清楚这套技术栈到底能不能扛住真实流量。本文以 Wasp 0.17 版部署文档中的 Extras 章节为主线逐项拆解自定义域名配置的完整步骤与全部环境变量、CDN/DDoS 防护的选型思路并结合 Wasp 编译器生成的源码模板揭示WASP_WEB_CLIENT_URL、WASP_SERVER_URL、REACT_APP_API_URL这些变量在 CORS 与跨域通信中的真实作用。读完你就能独立完成 Wasp 应用上生产所需的全部加分项配置。一、自定义域名两步走客户端与服务端通用为 Wasp 应用绑定自定义域名可以同时作用于客户端和服务端两部分。其中客户端的自定义域名是必做项——它是用户从浏览器访问的入口而服务端的自定义域名是可选项但如果不想让用户看到服务器的 IP 地址或平台自动生成的域名比如xxx.fly.dev给服务端也配上自定义域名是更专业的做法。无论客户端还是服务端流程基本一致核心就两步在 DNS 服务商处配置域名的解析记录为应用设置对应的环境变量让 Wasp 内部按新域名完成配置最关键的是 CORS。第一步配置 DNS 记录具体添加哪种 DNS 记录取决于你的托管平台最常见的是添加A记录把域名指向应用的 IPv4 地址同时建议添加AAAA记录指向 IPv6 地址部分托管平台如 Railway、GitHub Pages 这类服务要求配置CNAME记录而非A/AAAA记录。第二步设置客户端与服务端的环境变量环境变量是 Wasp 应用正确运行的关键——尤其是 CORS。如果不设置浏览器跨域请求会被服务端直接拒绝。客户端域名环境变量构建客户端时通过REACT_APP_API_URL告诉前端我的后端在哪REACT_APP_API_URLhttps://api.myapp.com这条变量在构建时被注入进客户端静态代码最终在浏览器里生效。客户端全部配置项详见 env vars 章节。服务端域名环境变量服务端需要配置两个变量详见 部署环境变量环境变量作用WASP_WEB_CLIENT_URL你的客户端应用域名服务端在邮件链接、OAuth 跳转等场景用它拼出前端地址WASP_SERVER_URL你的服务端域名OAuth 登录回调等场景会用到WASP_WEB_CLIENT_URLhttps://myapp.com WASP_SERVER_URLhttps://server.myapp.com服务端全部配置项详见 env vars 章节。除了上面两个 URL 外生产环境还通常需要一并准备DATABASE_URL、JWT_SECRET、PORT等必填变量。使用wasp deploy一键部署Fly.io 与 Railway 的自定义域名配置流程略有不同下面单独展开。用wasp deploy部署时的自定义域名如果使用 Wasp CLI 的一键部署能力部署方法总览Wasp 会替你完成大部分配置自定义域名也有对应的命令化流程。Fly.io 上的三步配置为客户端应用生成证书并获取 DNS 解析值wasp deploy fly cmd --context client certs create mycoolapp.com命令会输出需要添加到 DNS 的记录大致形如You can direct traffic to mycoolapp.com by: 1: Adding an A record to your DNS service which reads A 66.241.1XX.154 You can validate your ownership of mycoolapp.com by: 2: Adding an AAAA record to your DNS service which reads: AAAA 2a09:82XX:1::1:ff40到域名服务商处把上一步输出的A记录和AAAA记录配置到 DNS 中把新域名写入服务端的WASP_WEB_CLIENT_URL环境变量wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URLhttps://mycoolapp.com这一步是为了让 CORS 配置保持最新。完成以上三步应用即可通过https://mycoolapp.com访问。补充www子域名如果还想支持https://www.mycoolapp.com为子域名再生成一份证书wasp deploy fly cmd --context client certs create www.mycoolapp.com然后添加一条 CNAME 记录将www子域名作为根域名的别名TypeNameValueTTLCNAMEwwwmycoolapp.com3600⚠️CORS 注意同时使用www和non-www两个域名时需要为服务端提供自定义 CORS 配置允许来自两个域名的请求。完整步骤见 Fly.io 部署文档。Railway 上的三步配置在 Railway 控制台进入客户端服务如my-wasp-app-client的Settings → Custom Domain输入域名如mycoolapp.com和端口8080点击Add Domain到域名服务商处添加 CNAME 记录指向上一步分配给你的地址为避免 CORS 报错在 Railway 控制台的服务端服务如my-wasp-app-server的Variables页签中把WASP_WEB_CLIENT_URL更新为新域名。从源码看这三个变量如何驱动 CORS为什么自定义域名必须同步改环境变量看 Wasp 编译器生成的服务端配置模板 waspc/data/Generator/templates/sdk/wasp/server/config.ts 就能明白const frontendUrl stripTrailingSlash(env[WASP_WEB_CLIENT_URL]) const serverUrl stripTrailingSlash(env[WASP_SERVER_URL]) const allowedCORSOriginsPerEnv: RecordNodeEnv, Config[allowedCORSOrigins] { development: [/.*/], production: [getOrigin(frontendUrl)] } const allowedCORSOrigins allowedCORSOriginsPerEnv[env.NODE_ENV]可以看到开发环境下 CORS 放行所有来源/.*/方便本地联调生产环境下 CORS 只放行WASP_WEB_CLIENT_URL的 origin。也就是说WASP_WEB_CLIENT_URL直接决定了生产环境服务端愿意接受哪些前端的跨域请求——这正解释了改了域名必须同步改环境变量的原因。再往下追这个allowedCORSOrigins会被注入到默认全局中间件中。在 waspc/data/Generator/templates/server/src/middleware/globalMiddleware.ts 里可以看到 Wasp 默认挂载的中间件清单const defaultGlobalMiddlewareConfig: MiddlewareConfig new Map([ [helmet, helmet()], [cors, cors({ origin: config.allowedCORSOrigins })], [logger, logger(dev)], [express.json, express.json()], [express.urlencoded, express.urlencoded()], [cookieParser, cookieParser()] ])cors中间件直接使用config.allowedCORSOriginshelmet则提供了基础的安全响应头。这也从源码层面印证了自定义域名配置本质上就是让WASP_WEB_CLIENT_URL指向新域名从而让生产环境的 CORS 白名单随之更新。另外客户端侧的REACT_APP_API_URL默认值是http://localhost:3001生产构建时必须显式覆盖为服务端域名否则浏览器里的请求会打到本地地址。二、CDN 与 DDoS 防护上线前的性能与安全加固CDN为静态资源加速内容分发网络CDN是分布在全球各地的服务器网络用于缓存图片、CSS、JavaScript 等静态资源。在 Wasp 应用架构中客户端React SPA 构建出的纯静态文件天然适合挂在 CDN 后面用户请求文件时CDN 会从离用户最近的边缘节点返回内容显著缩短加载时间。Wasp 的客户端本来就是一个 SPA 静态文件产物放在 CDN 上几乎零成本就能获得全局加速。DDoS 防护抵御流量攻击分布式拒绝服务DDoS攻击是 Web 应用最常见的威胁之一攻击者向服务器发送海量请求使其过载瘫痪合法用户无法访问。建议对客户端和服务端都启用 DDoS 防护——客户端挡在 CDN 层服务端则由托管平台或防护服务保护。选型建议文档给出的推荐是 Cloudflare它同时提供 CDN 和 DDoS 防护配置简单免费额度对大多数中小型应用已经足够。其他可考虑的 CDN 提供商还包括 Fastly、Bunny 和 Amazon CloudFront。对 Wasp 应用而言一个典型的组合是客户端静态资源走 CDN 边缘节点缓存域名解析与流量入口由 Cloudflare 接管服务端保持独立域名如api.myapp.com同样置于防护之后。这与上一节自定义域名中客户端域名 服务端域名分开的推荐做法天然契合参考 Wasp 应用结构说明 中客户端与服务端通过 HTTP 通信的架构即可理解两者可以分别部署、分别加速、分别防护。三、Wasp 应用是否生产就绪这是部署前最常被问到的问题答案是肯定的但要分三层看。Wasp 应用本质上是三个独立部分的组合客户端、服务端、数据库详见 部署引言。组成部分技术选型生产就绪性说明服务端Node.js Express.js久经考验的 Web 框架自带可直接打包部署的Dockerfile数据库PostgreSQL成熟、可靠的关系型数据库支持自建或托管客户端React Vite生态庞大、维护活跃的前端方案构建产物为纯静态文件这三块各自都是生产级的成熟技术Wasp 做的是把它们无缝连接起来一套声明式配置main.wasp同时生成客户端、服务端与数据库 schema并且从 全局中间件模板 可以看到生成的服务端开箱即带上了helmet安全响应头、cors跨域控制、express.jsonJSON 解析、cookieParserCookie 解析等生产级默认中间件这些都是真实生产环境的基础设施。不过需要坦诚说明Wasp 本身仍被视为 beta 软件可能存在一些边边角角的问题。对于上线决策务实的建议是底层技术栈完全生产就绪框架层则在关键路径上多做验证并参考仓库中 数据库部署、CI/CD 配置 等文档把发布流程自动化起来逐步把上线前的细节补齐。小结自定义域名客户端域名是必配项服务端域名按需配置通用流程 配置 DNS 记录A/AAAA/CNAME 设置环境变量REACT_APP_API_URL、WASP_WEB_CLIENT_URL、WASP_SERVER_URL。使用wasp deploy时Fly.io 与 Railway 各有对应的命令化/控制台化流程。CDN 与 DDoS客户端静态资源建议挂 CDN 加速客户端与服务端都应考虑 DDoS 防护Cloudflare 是兼顾两者的推荐选择。生产就绪性React/Vite客户端、Node.js/Express服务端、PostgreSQL数据库均成熟可靠Wasp 生成的代码自带生产级中间件框架本身尚处 beta正式上线前建议在关键路径多做验证。【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考