后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载本指南讲解如何在 Redwood 项目中彻底关闭 API 层与数据库依赖仅保留 Web 前端并将其部署为静态站点。文章覆盖删除 api 目录、通过--prismafalse --dmfalse关闭数据库迁移、在 Netlify 上关闭 Lambda 函数构建以及用浏览器原生fetch()读取web/public下的本地 JSON 数据并用 Chart.js 绘制图表的全过程。读完你就能把一个 Redwood 应用改造成纯静态或混合型站点无需任何后端服务即可上线。适用场景什么时候需要禁用 API 与数据库Redwood 的默认形态是前后端一体api侧承载 GraphQL 服务与 Prisma 数据访问web侧是 React 前端。但并不是每个项目都需要这套完整能力以下是文档给出的典型场景纯静态站点不需要任何外部数据页面内容固定只需要一个快速、零维护的部署产物低频变更的数据数据变化频率极低改数据等于编辑一个纯文本文件如 JSON后重新部署完全没必要引入数据库混合型站点前端需要消化并展示数据但数据源是自家 URL 下的静态文件而非第三方 API 或数据库。文档的结论是Redwood 在需要与数据库或第三方 API 交互时能显著提升开发效率但它同样可以服务于静态站点以及上述这种从自己 URL 上的静态文件读取并展示数据的混合形态。前提假设本教程以Netlify作为部署目标。使用其他平台或自定义构建流程时具体配置可能有所不同packages/cli/src/commands/deploy/目录下还提供了 vercel、render、flightcontrol、baremetal 等部署命令参数设计大体一致。第一步直接移除 /api 目录既然不需要 API 层和数据库最简单彻底的做法是把整个api目录删掉开发模式下应用依然可以正常工作rm -rf api删除之后可以再执行yarn install清理掉那些不再被引用的依赖包让node_modules与锁文件恢复干净状态。第二步在构建命令中禁用 Prisma 与数据迁移仅删除目录还不够——Redwood 的部署命令默认会执行数据库相关的构建步骤。文档明确指出--prisma与--dmdata-migrate两个标志默认都是true必须显式设为false[build] command yarn rw deploy netlify --prismafalse --dmfalse为什么这两个标志这么关键打开源码 deploy 帮助函数 可以看到完整的参数定义与执行逻辑.option(build, { description: Build for production, type: boolean, default: true, }) .option(prisma, { description: Apply database migrations, type: boolean, default: true, }) .option(data-migrate, { description: Migrate the data in your database, type: boolean, default: true, alias: dm, })而在deployHandler中这些布尔标志直接决定命令链的组成if (build) { commandSet.push(yarn rw build --verbose) } if (prisma) { commandSet.push(yarn rw prisma migrate deploy) } if (dataMigrate) { commandSet.push(yarn rw>[build] command yarn rw deploy netlify --prismafalse --dmfalse publish web/dist # functions api/dist/functions [dev] command yarn rw dev [[redirects]] from /* to /index.html status 200配置含义拆解如下配置项作用commandNetlify 构建时执行的命令此处已带上--prismafalse --dmfalsepublish需要发布的静态产物目录即 Web 侧构建输出web/distfunctions声明 Lambda 函数目录注释掉以彻底跳过 API 函数打包[[redirects]]将所有路径重写到/index.html交给前端路由如 Redwood Router处理作为对照netlify.toml 模板 中yarn rw setup deploy netlify默认生成的配置包含functions api/dist/functions与to /200.html这正是完整形态下的默认样子。本教程所做的就是把它改造成纯静态形态并把 SPA 回退目标从200.html调整为index.html。完成这一步后如果只是不需要任何数据访问的纯静态站点到这里就已经结束了。下面继续介绍如何访问一份随 Web 侧一起部署的本地数据文件。第四步用本地 JSON 文件作为数据源接下来文档演示了一个具体案例展示 2017 年 1 月 30 日当周莫斯科Moscow, Russia的天气预报图表。这个奇怪的具体场景背后是 OpenWeather API 提供的示例数据。4.1 把 JSON 放到 web/public 下任何放在web/public目录下的文件Netlify 都会原样发布、跳过一切构建流程。因此把示例数据保存为web/public/forecast.json{ cod: 200, message: 0, city: { geoname_id: 524901, name: Moscow, lat: 55.7522, lon: 37.6156, country: RU, iso2: RU, type: city, population: 0 }, cnt: 7, list: [ { dt: 1485766800, temp: { day: 262.65, min: 261.41, max: 262.65, night: 261.41, eve: 262.65, morn: 262.65 }, pressure: 1024.53, humidity: 76, weather: [ { id: 800, main: Clear, description: sky is clear, icon: 01d } ], speed: 4.57, deg: 225, clouds: 0, snow: 0.01 }, { dt: 1485853200, temp: { day: 262.31, min: 260.98, max: 265.44, night: 265.44, eve: 264.18, morn: 261.46 }, pressure: 1018.1, humidity: 91, weather: [ { id: 600, main: Snow, description: light snow, icon: 13d } ], speed: 4.1, deg: 249, clouds: 88, snow: 1.44 }, { dt: 1485939600, temp: { day: 270.27, min: 266.9, max: 270.59, night: 268.06, eve: 269.66, morn: 266.9 }, pressure: 1010.85, humidity: 92, weather: [ { id: 600, main: Snow, description: light snow, icon: 13d } ], speed: 4.53, deg: 298, clouds: 64, snow: 0.92 }, { dt: 1486026000, temp: { day: 263.46, min: 255.19, max: 264.02, night: 255.59, eve: 259.68, morn: 263.38 }, pressure: 1019.32, humidity: 84, weather: [ { id: 800, main: Clear, description: sky is clear, icon: 01d } ], speed: 3.06, deg: 344, clouds: 0 }, { dt: 1486112400, temp: { day: 265.69, min: 256.55, max: 266, night: 256.55, eve: 260.09, morn: 266 }, pressure: 1012.2, humidity: 0, weather: [ { id: 600, main: Snow, description: light snow, icon: 13d } ], speed: 7.35, deg: 24, clouds: 45, snow: 0.21 }, { dt: 1486198800, temp: { day: 259.95, min: 254.73, max: 259.95, night: 257.13, eve: 254.73, morn: 257.02 }, pressure: 1029.5, humidity: 0, weather: [ { id: 800, main: Clear, description: sky is clear, icon: 01d } ], speed: 2.6, deg: 331, clouds: 29 }, { dt: 1486285200, temp: { day: 263.13, min: 259.11, max: 263.13, night: 262.01, eve: 261.32, morn: 259.11 }, pressure: 1023.21, humidity: 0, weather: [ { id: 600, main: Snow, description: light snow, icon: 13d } ], speed: 5.33, deg: 234, clouds: 46, snow: 0.04 } ] }这份数据的关键结构是顶层city描述城市信息cnt表示天数7 天list数组按天给出dtUnix 时间戳、temp开尔文温标的 day/min/max/night/eve/morn、weather描述等字段。后续图表组件就是围绕list展开的。4.2 生成首页并用 fetch 读取数据生成一个挂在根路径的首页yarn rw generate page home /然后用浏览器内置的fetch()获取数据先原样输出到页面验证数据链路是否打通import { useState, useEffect } from react const HomePage () { const [forecast, setForecast] useState({}) useEffect(() { fetch(/forecast.json) .then((response) response.json()) .then((json) setForecast(json)) }, []) return div{JSON.stringify(forecast)}/div } export default HomePage要点说明useState负责保存异步加载到的天气预报数据useEffect依赖数组为空在组件挂载时触发fetch(/forecast.json)注意这里使用的是相对路径因为文件与页面同源部署先JSON.stringify直接渲染是为了在继续开发前确认请求成功、JSON 解析正常。第五步接入 Chart.js 绘制天气图表数据链路打通后加入图表库来可视化这些温度数据。在 web 工作区安装 chart.jsyarn workspace web add chart.js先写一个使用固定示例数据的冒烟版图表验证 Canvas 渲染环境正常import { useState, useEffect, useRef } from react import Chart from chart.js const HomePage () { const chartRef useRef() const [forecast, setForecast] useState({}) useEffect(() { fetch(/forecast.json) .then((response) response.json()) .then((json) setForecast(json)) }, []) useEffect(() { new Chart(chartRef.current.getContext(2d), { type: line, data: { labels: [Jan, Feb, March], datasets: [ { label: High, data: [86, 67, 91], }, { label: Low, data: [45, 43, 55], }, ], }, }) }, [forecast]) return canvas ref{chartRef} / } export default HomePage这里新增了useRef来持有canvas节点的引用第二个useEffect在forecast变化时创建Chart实例。确认能画出折线图后再把它替换成真正从 JSON 派生数据的最终版本。最终版把天气数据转换为 Chart.js 需要的格式以下是文档给出的完整HomePage包含两个数据转换函数与一个温度单位换算函数import { useState, useEffect, useRef } from react import Chart from chart.js const MONTHS [ Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec, ] const getDates (forecast) { return forecast.list.map((entry) { const date new Date(0) date.setUTCSeconds(entry.dt) return ${MONTHS[date.getMonth()]} ${date.getDate()} }) } const getTemps (forecast) { return [ { label: High, data: forecast.list.map((entry) kelvinToFahrenheit(entry.temp.max)), borderColor: red, backgroundColor: transparent, }, { label: Low, data: forecast.list.map((entry) kelvinToFahrenheit(entry.temp.min)), borderColor: blue, backgroundColor: transparent, }, ] } const kelvinToFahrenheit (temp) { return ((temp - 273.15) * 9) / 5 32 } const HomePage () { const chartRef useRef() const [forecast, setForecast] useState(null) useEffect(() { fetch(/forecast.json) .then((response) response.json()) .then((json) setForecast(json)) }, []) useEffect(() { if (forecast) { new Chart(chartRef.current.getContext(2d), { type: line, data: { labels: getDates(forecast), datasets: getTemps(forecast), }, }) } }, [forecast]) return canvas ref{chartRef} / } export default HomePage各函数职责对照函数职责getDates(forecast)遍历forecast.list用new Date(0)setUTCSeconds(entry.dt)把 Unix 时间戳转成Jan 30这样的日期标签getTemps(forecast)生成 High / Low 两条数据集分别映射temp.max与temp.min并指定折线颜色kelvinToFahrenheit(temp)把 OpenWeather 返回的开尔文温度换算为华氏温度((temp - 273.15) * 9) / 5 32注意与冒烟版的差异useState的初始值从{}改为null图表useEffect增加了if (forecast)守卫避免在数据尚未加载完成时就尝试绘图。全部完成后页面上就会出现一张基于本地 JSON 数据绘制的 7 天最高/最低温折线图剩下的工作就是把它部署上线。收尾静态与混合形态皆可整个改造路径可以总结为四步删目录api、关迁移--prismafalse --dmfalse、关函数注释functions、放静态数据web/publicfetch。虽然 Redwood 在设计上主要面向需要与数据库或第三方 API 对话的全栈应用但从本文可以看出它同样能退化为纯静态站点或演进为从自家 URL 的静态文件读取并展示数据的混合站点。这种灵活性让团队可以在同一个框架下根据项目阶段自由选择架构复杂度。相关参考资料仓库内当前版本文档disable-api-database.md部署命令帮助函数与执行逻辑Netlify 部署命令入口netlify.toml 默认模板部署参数解析测试用例赞分享后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载相关推荐Redwood 无后端部署实战禁用 API 与数据库构建纯静态站点Redwood 无后端部署实战禁用 API 与数据库构建纯静态站点 Redwood 是面向全栈应用的框架但并不是每个项目都需要 GraphQL API 与后端前端Web框架开发工具Redwood 无 API/数据库部署指南将应用降级为纯静态站点并消费本地 JSONRedwood 无 API/数据库部署指南将应用降级为纯静态站点并消费本地 JSON Redwood 框架默认以「全栈」形态工作Web 端负责界面API后端前端Web框架开发工具RedwoodJS 禁用 API 层与数据库从全栈应用到纯静态站点部署实战指南RedwoodJS 禁用 API 层与数据库从全栈应用到纯静态站点部署实战指南 本指南讲解如何在 RedwoodJS 项目中彻底去掉 API 层与数据库依赖后端前端Web框架开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考