Wasp 如何把应用部署到 Netlify 并配置所需环境变量【免费下载链接】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/waspWasp 应用的 Web 客户端是一个 React 单页应用SPA构建产物是一组静态文件因此 Wasp 官方文档把它放到 Netlify 这类静态托管服务上。本文的任务是把一个 Wasp 应用的客户端构建好、部署到 Netlify并把客户端和服务器两端的环境变量配置到位最终让客户端在https://app-name.netlify.app上线。需要明确一点范围Netlify 只承载静态客户端服务器Node.js 后端和 PostgreSQL 数据库仍需另行部署本文最后会说明服务器侧必须设置的环境变量。部署前提在开始之前确认以下条件有一个 Netlify 账户并已用 Netlify CLI 登录。可用npx netlify-cli status检查登录状态未登录时执行npx netlify-cli login。项目的数据库是 PostgreSQL。Wasp 默认使用 SQLite而使用 SQLite 时wasp build无法构建成功需要先在 databases.md 中按文档迁移到 PostgreSQL。官方指南在 Wasp 0.24 版本下验证过 Netlify 部署流程。第一步生成可部署代码在项目根目录执行wasp buildwasp build会在.wasp/out/目录生成整个应用的可部署代码其中服务器部分自带 Dockerfile客户端部分会在下一步单独构建为静态文件。详见 cloud-providers.md。第二步构建客户端并注入 REACT_APP_API_URL在项目根目录执行REACT_APP_API_URLurl_to_wasp_backend npx vite buildurl_to_wasp_backend需要替换为你已经部署的 Wasp 服务器的 URL。如果后端尚未部署文档说明该变量可以跳过但依赖后端的页面功能会不可用。构建输出位于.wasp/out/web-app/build其中根目录包含200.html文件作为 SPA 路由的回退页面。如果你在项目中定义了其他客户端环境变量也要一并加到这条构建命令里例如REACT_APP_API_URL... REACT_APP_SOME_OTHER_VAR_NAMEsomeothervalue npx vite build。缺少必需变量时构建会失败。客户端环境变量在部署时有一套固定规则见 env-vars.md生产构建会忽略.env.client文件它只用于开发环境。生产用的客户端变量必须直接写在构建命令上。变量会在构建时注入客户端 JS 代码因此是公开的、任何人都能读到绝不能存放密钥。不能通过在 Netlify 等托管平台上设置变量来传给客户端——构建完成后客户端只是静态文件会忽略托管平台上的设置。第三步创建 netlify.toml在项目根目录创建netlify.toml用于告诉 Netlify 构建产物在哪里并配置 SPA 路由重定向[build] publish ./.wasp/out/web-app/build # By default, Netlify only redirects when a path doesnt match an existing file. # See: https://docs.netlify.com/manage/routing/redirects/rewrites-proxies/#shadowing [[redirects]] from /* to /200.html status 200build.publish的路径是相对于netlify.toml所在目录的。如果你的 Wasp 项目放在子目录中例如my-app/需要把路径改为publish ./my-app/.wasp/out/web-app/build。第四步部署客户端到 Netlify先执行一次部署npx netlify-cli deploy --filter wasp --no-build执行时按 CLI 的交互式提示操作选择创建新应用还是使用已有应用、选择应用归属的团队等。两个参数各自的用途--filter waspNetlify CLI 会把 Wasp 生成的 server 和 SDK 包识别为 workspace这个参数显式指定选择wasp包实际上传哪些文件仍由build.publish决定。--no-build客户端已经用正确的环境变量构建完毕不需要 Netlify 再执行一次构建。确认无误后发布到生产环境npx netlify-cli deploy --prod --filter wasp --no-build部署完成后客户端应上线在https://app-name.netlify.appapp-name为你的 Netlify 应用名。第五步配置所需的环境变量客户端上线后环境变量工作才完成一半。分两端来看客户端端构建时如上所述REACT_APP_API_URL及其他自定义客户端变量都通过构建命令注入这一步在第二步已完成。生产环境中不存在“上线后再补设客户端变量”的途径。服务器端运行时把 Netlify 上的客户端地址设置为服务器环境的WASP_WEB_CLIENT_URL变量例如WASP_WEB_CLIENT_URLhttps://app-name.netlify.app除此之外生产环境的服务器还需要其余必需的 Wasp 环境变量开发环境里 Wasp 会自动设置生产环境必须显式配置缺失任意一个服务器都会启动失败见 env-vars.md变量说明DATABASE_URL应用使用的 PostgreSQL 数据库 URLWASP_WEB_CLIENT_URL客户端地址邮件链接等功能使用WASP_SERVER_URL服务器地址OAuth 登录重定向等功能使用JWT_SECRET至少 32 个字符的随机字符串PORT服务器监听端口生产环境会忽略.env.server文件这些变量要通过你所用服务器托管平台提供的机制面板或 CLI来设置。可选用 GitHub Actions 自动部署如果你希望每次推送到main分支时自动部署客户端可以在仓库中创建.github/workflows/deploy.yaml文件名可改文件类型保持 yaml。官方文档给出的示例工作流会在 push 时执行wasp install、wasp build、客户端构建并部署到 Netlifyname: Deploy Client to Netlify on: push: branches: - main # Deploy on every push to the main branch jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout Code uses: actions/checkoutv5 - name: Setup Node.js id: setup-node uses: actions/setup-nodev5 with: node-version: {minimumNodeJsVersion} - name: Install Wasp run: npm i -g wasp.sh/wasp-cli{latestWaspVersion} # Change to your Wasp version - name: Wasp Install run: wasp install - name: Wasp Build run: wasp build - name: Build the client run: REACT_APP_API_URL${{ secrets.WASP_SERVER_URL }} npx vite build - name: Deploy to Netlify run: | npx netlify-cli deploy --prod --auth$NETLIFY_AUTH_TOKEN --site$NETLIFY_SITE_ID --filter wasp --no-build env: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}其中{minimumNodeJsVersion}和{latestWaspVersion}是官方文档中的占位符使用前需分别替换为你的项目使用的 Node.js 版本和你的 Wasp 版本文档原文标注 Change to your Wasp version。该方式需要在 GitHub Repository Secrets 中配置三个变量NETLIFY_AUTH_TOKEN在 Netlify 生成的 Personal Access TokenNETLIFY_SITE_ID你的 Netlify 项目 IDWASP_SERVER_URL服务器 URL通常在后端部署完成后才可用后端未部署或未就绪时可以跳过该变量但后端相关功能会不可用。完整的命令与参数细节见 netlify.md。【免费下载链接】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），仅供参考