ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

RedwoodJS 部署到 Netlify 实战指南:从零到生产环境的 Serverless 全栈上线

RedwoodJS 部署到 Netlify 实战指南:从零到生产环境的 Serverless 全栈上线 后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载Netlify 是 RedwoodJS 官方推荐的一键式 Serverless 部署平台也是体验“纯静态托管 云函数 API”全栈 Jamstack 架构最快捷的路径。本指南以 RedwoodJS 官方文档部署到 Netlify 与教程部署章节 Deployment为骨架结合当前仓库的 CLI 源码实现完整讲解从 Git 仓库同步、Postgres 数据库准备、netlify.toml配置、环境变量注入到分支预览的整个上线流程并深度解析为什么不能用 Netlify CLI 本地构建部署以及 Serverless 场景下的数据库连接与安全要点。Netlify tl;dr 快速部署如果你只是想快速体验 RedwoodJS 在 Netlify 上的部署流程并且暂时不需要数据库或自定义代码可以按下面四步走创建新项目yarn create redwood-app ./netlify-deploy项目安装完成后初始化 Git、提交代码并将仓库推送到 GitHub、Bitbucket 或 GitLab。运行部署初始化命令并提交推送yarn rw setup deploy netlify到 Netlify 的 Quick Start 页面连接仓库完成部署。其中第 3 步的yarn rw setup deploy netlify会在项目根目录生成netlify.toml并把redwood.toml中 web 端的apiUrl指向 Netlify 的函数端点详见下文setup 命令到底做了什么。警告不要用 Netlify CLI 本地构建部署官方文档特别强调了一个常见误区不要直接使用 Netlify CLI 的netlify build与netlify deploy命令从本地项目目录把产物推到 Netlify。这样做会导致部署时或运行函数时报错——包括 GraphQL 服务器所依赖的函数以及其他所有 Serverless 函数。其根本原因在于Netlify CLI 的 build/deploy 是在你的本地机器上完成构建然后把dist目录推送到 Netlify构建 RedwoodJS 项目时Prisma client 会在构建时生成与当前操作系统匹配的二进制本地可能是 macOSdarwin或 Windowswindows而运行在 Netlify 函数环境中的 Prisma client 需要的是debian-openssl-1.1.x或rhel-openssl-1.1.x这类 Linux 二进制一旦 client 与运行环境不兼容函数将直接失败。因此官方建议务必遵循 Git 仓库同步部署方式把 GitHub或其他兼容的源码托管服务仓库与 Netlify 关联让 Netlify 自己的构建与部署系统在云端环境Linux中完成构建、生成正确的 Prisma client 并托管函数。这也是下文完整部署流程采用的方案。完整部署流程含数据库快速部署跳过了一个关键环节——生产数据库。下面是从教程部署章节整理出的完整流程适合带数据库的正式应用。1. Git 仓库准备教程中曾提示早期不需要 Git但部署阶段必须使用。将全部代码提交并推送到 GitHub、GitLab 或 Bitbucketgit add . git commit -m ready for deploy git push注意是git add .而不是git add README.md因为你要提交整个代码库。2. 准备生产数据库Postgres本地开发使用的是 SQLite 文件型数据库但 Serverless 部署环境没有持久化磁盘可供存放 SQLite 文件所以生产环境必须切换到 Postgres 等外部数据库。Prisma 目前支持 SQLite、Postgres、MySQL 与 SQL Server。可选托管服务包括 Railway、Heroku、Digital Ocean、AWS RDS 等。教程中以 Railway 为例免费且无需登录即可创建实例但未注册账号的数据库会在一天后删除。拿到形如postgresql://user:passurl/db的连接串后需要完成三件事a) 修改schema.prisma的 providerprovider postgresql:::danger Prisma 同一时间只支持一种数据库 provider。由于生产环境不能用 SQLite 而必须切到 Postgres 或 MySQL切换后本地开发环境也必须使用同样的数据库。可参考 Local Postgres Setup 指南完成本地切换。 :::b) 配置.env并重建迁移打开.env取消DATABASE_URL的注释并填入从托管服务复制的连接串。然后彻底删除api/db/migrations目录再运行yarn rw prisma migrate dev所有改动会被合并成一份新的迁移文件并应用到线上数据库实例可命名为 initial schema。:::info.env默认不会也绝不应被纳入 Git 版本控制它存放数据库连接串、API Key 等敏感信息一旦提交到公开仓库任何人都能看到你的秘密。.env.defaults则用于存放非敏感的环境变量日志级别、库的配置项等可以安全提交并与团队共享。 :::3. 初始化 Netlify 部署配置数据库就绪后回到本地项目根目录运行yarn rw setup deploy netlify该命令会在项目根目录生成一份开箱即用的netlify.toml你可以随着应用增长自行调整文件顶部注释里有自定义相关的资源链接。生成后提交并推送这些改动。4. 创建 Netlify 站点并关联仓库注册/登录 Netlify验证邮箱后点击右上角New site from Git授权 Netlify 连接你的 Git 托管服务并找到刚才推送的仓库部署设置全部保留默认值点击Deploy site。Netlify 会立刻开始构建但第一次部署大概率会失败——因为你还没有告诉它数据库在哪里。5. 配置环境变量回到站点主页 → 顶部Site settings→Environment variables→ 点击Add a VariableKey填写DATABASE_URLValue 粘贴之前从数据库托管服务复制的连接串并在末尾追加?connection_limit1最终格式为postgresql://user:passurl/db?connection_limit1Scopes 与 Values 的默认选项保持不变点击Create variable。:::tipconnection_limit1是 Prisma 官方在 Serverless 场景下的推荐连接池大小用于关系型数据库与 Serverless 函数的组合。 :::还需添加第二个环境变量SESSION_SECRET它是一长串随机字符用于加密 dbAuth 的会话 Cookie。本地安装 dbAuth 时.env底部已经有一个但每个部署环境都应有唯一的值每个开发者也应各自生成一个。使用 CLI 生成yarn rw g secret把输出复制到 Netlify与DATABASE_URL一起保存。6. 触发部署并验证配置完环境变量后进入Deploys标签页打开右侧Trigger deploy下拉菜单选择Deploy site。构建成功后点击部署日志页顶部的Preview按钮或回到站点主页点击 Netlify 分配的站点 URL如果首页的 About / Contact 链接显示 Empty说明部署成功——这是空的生产数据库导致的正常现象去/admin/posts创建几条数据再回首页即可看到内容。:::info 通过Preview按钮查看的 URL 会包含最新提交的 hashNetlify 会为每次推送到main的提交生成这样一个预览地址但该地址永远只显示这一次提交的内容再次部署并刷新不会看到变化。站点真正的 URL主页展示的那个始终显示最近一次成功的部署。 :::如果部署失败先查看 Netlify 构建日志定位错误如果部署成功但站点打不开用浏览器开发者工具检查报错并确认 Postgres 连接串是否完整无误地粘贴。7. 自定义子域名不想让站点挂在agitated-mongoose-849e99.netlify.app这种随机子域下进入Site Settings Domain Management Domains Custom Domains在Options菜单里选择Edit site name改成redwood-tutorial.netlify.app之类的名字即可几乎立即生效。注意子域名在 Netlify 全站必须是唯一的blog.netlify.app这类名字大概率已被占用。也可以点击Add custom domain绑定完全自定义的域名。8. 分支部署Branch DeploysNetlify 的Branch Deploys是很有用的预览特性当你创建分支并推送到仓库时Netlify 会在一个独立 URL 上构建该分支方便你在不影响主站点的情况下测试改动分支合并到main后主站点会自动重新部署。启用方式Site settingsBuild deployContinuous Deployment在Branches区域点击Edit settings把Branch deploys改为 All。同时可以开启Deploy previews为针对仓库的 Pull Request 生成预览。:::tip Netlify 还支持锁定main分支每次推送不自动部署而是由你手动触发最新部署在站点后台操作或通过 Netlify CLI。 :::netlify.toml配置逐段详解yarn rw setup deploy netlify生成的netlify.toml由 CLI 源码中的模板 templates/netlify.js 直接产出仓库 fixture 中也有一份实例example-todo-main/netlify.toml。核心内容如下[build] command yarn rw deploy netlify publish web/dist functions api/dist/functions [build.environment] NODE_VERSION 20 [[redirects]] from /* to /200.html status 200 [dev] framework redwoodjs # 确保 targetPort 与 redwood.toml 中的 web.port 一致 targetPort 8910 # 浏览器访问端口 port 8888逐段说明[build]定义 Netlify 云端构建行为。command构建命令yarn rw deploy netlify它是一系列子命令的串联见下文deploy 命令链路publish静态产物目录web/distfunctionsServerless 函数目录api/dist/functionsRedwoodJS 的 GraphQL 端点和所有自定义函数都会打包到这里[build.environment]指定构建环境 Node 版本20保证云端构建与 RedwoodJS 5.x 要求的运行时一致。[[redirects]]把所有路径重写到200.html这是单页应用SPA路由在 Netlify 上正常工作的关键——浏览器直接访问/about这类路径时Netlify 返回200.html由前端路由接管。[dev]用于 Netlify Dev 本地联调。需要先安装netlify-cli再用netlify link关联本地项目与线上站点之后netlify dev会把本地应用代理到指定端口。targetPort必须与 redwood.toml 中web侧的port保持一致CLI 模板会自动读取该配置注入浏览器则访问port 8888。这份模板的正确性由 CLI 的单元测试锁定见快照文件 netlify.test.js.snap其中should add netlify.toml与should call the handler without error两个用例完整断言了生成内容包括NODE_VERSION 20、targetPort 8910等关键值。setup 命令到底做了什么源码视角yarn rw setup deploy netlify的实现位于 providers/netlify.js其handler通过 Listr 依次执行三个任务更新 redwood.toml 的 apiUrl调用 helpers/index.js 中的updateApiURLTask(/.netlify/functions)。该函数读取redwood.toml若已有apiUrl则整行替换否则在[web]段下新增apiUrl /.netlify/functions。这样前端 GraphQL 请求就会指向 Netlify 函数网关而不是默认的本地开发地址。写入 netlify.tomladdFilesTask把模板内容写入项目根目录--force时覆盖已存在文件。打印提示输出 You are ready to deploy to Netlify! 并附带官方文档链接。也就是说setup 命令只做两件事生成netlify.toml、改redwood.toml的apiUrl这两处改动决定了整个部署体系如何组织。yarn rw deploy netlify的构建命令链路netlify.toml里的command yarn rw deploy netlify对应的 CLI 实现是 deploy/netlify.js它通过 helpers/helpers.js 中的deployHandler串起三段命令并用顺序执行yarn rw build --verbose yarn rw prisma migrate deploy yarn rw>赞分享后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载相关推荐RedwoodJS 部署到 Netlify 完整指南从零配置到生产上线RedwoodJS 部署到 Netlify 完整指南从零配置到生产上线 本文基于 RedwoodJS 仓库中 docs/versioned_docs/vers后端前端Web框架开发工具RedwoodJS 部署到 Netlify从快速起步到生产环境上线的完整指南RedwoodJS 部署到 Netlify从快速起步到生产环境上线的完整指南 RedwoodJS 从设计之初就致力于让全栈 Web 应用在 Jamstack后端前端Web框架开发工具RedwoodJS 部署到 Netlify 完整指南从 rw setup deploy netlify 到生产上线RedwoodJS 部署到 Netlify 完整指南从 rw setup deploy netlify 到生产上线 RedwoodJS 作为面向全栈 Jams后端前端Web框架开发工具创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表