之前的文章很多人评论这些是虚拟主机不是服务器但虚拟主机也称为虚拟服务器哪怕云服务器也是从一台物理服务器中分出多个云服务器所以具体看自己的定义再决定是否往下看。对于开发者而言将网站或应用部署到公网往往意味着要与服务器运维、域名配置、HTTPS 证书、扩容等繁琐事务打交道。尤其是当你只是想快速验证一个想法、搭建一个个人博客或为自己的项目写一个简单的后端 API 时这些“脏活累活”会大大消耗你的创造力。Netlify的出现几乎完美地解决了这一痛点。它不是一个传统的“服务器”而是一个现代化的Web 部署平台。你只需把代码推送到 GitHubNetlify 就会自动构建、部署并为你生成一个可全球访问的 HTTPS 网址。更重要的是它内置了Serverless Functions无服务器函数让你在一个项目中就能同时搞定前端页面和后端 API真正实现全栈无服务器。为什么选择 Netlify•极致的自动化git push即部署每次 Pull Request 都会自动生成预览链接。•慷慨的免费额度每月 100GB 带宽、125,000 次函数调用足够支撑个人项目和初创产品。•一站式的全栈能力静态托管 表单处理 无服务器函数 边缘函数告别跨平台割裂。•零运维成本自动 HTTPS、全球 CDN、回滚、环境变量……你只需关心业务代码。在本文中我们将从零开始使用React Netlify Functions构建一个能根据访问者地理位置返回问候语的全栈应用并把它部署到线上。无论你是前端新手还是资深开发者相信都能感受到 Netlify 带来的流畅体验。本文部分代码与命令展示时会尽量附上运行效果说明建议对“无服务器函数”和“边缘部署”有个基本概念即可无需深入底层细节。让我们一起用最简单的方式做出专业级的全栈应用。介绍在当今的 Web 开发领域“自动化”与“无服务器”正在重塑我们的开发方式。将应用高效、可靠地交付到全球用户手中已成为开发者关注的焦点。Netlify 作为该领域的知名平台凭借其强大的自动化工作流和简洁的全栈部署体验让开发者能够以极低的成本将现代 Web 应用轻松部署至全球边缘网络。传送门https://www.netlify.com/为什么选择 Netlify在深入了解具体工具前我们需先理解其背后的核心优势•全球边缘 CDN静态资源自动分发至 Netlify 在全球的边缘节点确保用户无论身处何地都能快速加载。•Git 驱动的自动化部署连接 GitHub/GitLab 后每次git push都会自动触发构建和部署真正实现“提交即上线”。•一站式全栈能力从静态托管到 Serverless Functions无服务器函数再到 Edge Functions边缘函数Netlify 提供了一个完整的全栈开发平台前端和后端可在同一项目中统一管理。•颠覆性的免费额度对于个人项目、博客或初创原型免费套餐提供了每月100 GB 带宽、125,000 次函数调用、1,000,000 次边缘函数调用和10 GB 存储的慷慨额度足以支撑大多数中小型项目。Netlify 免费套餐详解Netlify 在 2025 年 9 月更新了定价体系采用全新的基于积分的计费模型使费用更加透明和可预测。以下是当前免费套餐的核心额度资源类型免费套餐额度说明每月积分300 积分积分池统一管理各资源消耗生产环境部署15 积分/次每次部署到生产环境消耗积分分支/预览部署免费用于测试和实验的部署不消耗积分带宽10 积分/GB数据传输到用户端Web 请求3 积分/10,000 次页面访问、API 调用、重定向等Serverless Functions5 积分/GB-小时包含同步函数和后台函数表单提交1 积分/次垃圾邮件自动检测到的提交免费构建分钟不再单独跟踪整合到积分体系中重要提示在免费套餐中一旦当月额度用完网站会被暂停至下个月初不会产生任何意外费用。你将在使用达到 50%、75%、90% 和 100% 时收到邮件和应用内通知。Netlify-价格Netlify 核心能力一览1. 静态网站托管Static Hosting它是什么Netlify 最初的核心能力就是静态网站托管为 Jamstack 和现代前端框架提供了开箱即用的全球分发方案。关键特性•Git 原生集成连接 GitHub、GitLab 或 Bitbucket 仓库每次推送自动构建和部署。•自动 HTTPS所有托管的网站自动获得 Let‘s Encrypt 提供的免费 SSL 证书。•预览部署每个 Pull Request 都会自动生成一个独立的预览 URL便于团队协作审查代码变更。•自定义域名可绑定自己的域名无需额外配置即可启用 HTTPS。典型应用场景• 托管 React、Vue、Svelte、Angular、Next.js静态导出等框架构建的单页应用。• 部署 Hugo、Hexo、Eleventy、Jekyll 等生成的静态博客。• 托管个人作品集网站、公司官网或产品 landing page。2. Netlify FunctionsServerless 后端它是什么Netlify Functions 是一个无服务器函数平台。你可以在项目中创建一个/netlify/functions目录将后端 API 逻辑代码放在里面Netlify 会自动将其打包为无服务器函数并部署到 AWS Lambda 上。关键特性与技术•代码与前端同库管理函数代码和前端代码在同一个 Git 仓库中版本控制、构建和部署告别前后端割裂。•自动路由映射/netlify/functions/api.js会自动映射为.netlify/functions/api路由。•多种运行模式支持同步函数30秒执行限制和后台函数15分钟执行限制。•TypeScript 原生支持无需额外配置即可使用 TypeScript 编写函数。典型应用场景• 为前端应用添加联系表单邮件发送 API。• 构建轻量级 REST API 或 GraphQL 网关。• 实现用户认证后的数据动态处理。• 集成第三方服务如 Stripe 支付、Slack Bot 等。3. Edge Functions边缘计算它是什么Edge Functions 是基于 Deno 运行时在边缘节点执行的函数。它比 Serverless Functions 更贴近用户运行在全球 CDN 边缘节点上可以实现极低延迟的动态响应。关键特性•Deno 运行时支持 TypeScript 和 JSX/TSX 语法可直接在边缘进行服务端渲染SSR。•中间件能力可以作为中间件修改请求和响应支持 A/B 测试、身份验证、动态缓存等场景。•路径配置灵活通过config导出来定义函数触发的路径。•本地测试支持Netlify CLI 提供了--geomock标志可模拟不同地理位置的请求来测试边缘函数的地区化行为。典型应用场景• 基于用户地理位置做个性化响应或重定向。• 实现边缘级别的身份验证或访问控制。• 动态生成、处理 HTML 以提升 SEO 表现。• 在 CDN 层完成 API 请求聚合。4. Netlify CLI本地开发利器它是什么Netlify CLI 是一个强大的命令行工具可以将 Netlify 生产环境的功能完整镜像到本地开发环境中。关键特性•本地环境模拟通过netlify dev命令启动一个代理服务器在本地完整模拟 Netlify 生产环境中的 Functions、Edge Functions、重定向规则和环境变量。•自动框架检测自动识别 Gatsby、Hugo、Next.js、Vite 等主流框架并正确配置本地开发服务器。•一处安装随处使用CLI 全局安装后即可在任何目录执行netlify命令。安装方法npm install -g netlify-cli实战入门从零构建你的第一个全栈应用我们将通过一个完整的示例展示如何用 Netlify 构建一个兼具前端与后端 API 的应用。示例全球问候应用——你的第一个 Netlify 全栈项目我们将创建一个使用 Vite 构建的 React 前端并为其添加一个 Netlify Function 后端 API。步骤一创建前端项目# 使用 Vite 快速创建一个 React 项目 npm create vitelatest my-global-app -- --template react cd my-global-app npm install运行开发服务器npm run dev打开http://localhost:5173应该看到 React 的默认欢迎页面。按CtrlC退出开发服务器。步骤二添加 Netlify Functions后端 APINetlify 约定项目根目录下的/netlify/functions目录中的文件会自动部署为无服务器函数。# 创建函数目录和 API 文件 mkdir -p netlify/functions/api在netlify/functions/api/greeting.js中写入以下代码// 文件: /netlify/functions/api/greeting.js // 部署后将自动映射为 /api/greeting 路由 // 导入 Netlify 函数所需的类型支持可选 // 此函数使用标准的 ES modules 语法 export async function handler(event, context) { // 从请求头中获取地理信息Netlify 自动注入 const country event.headers[x-country] || 全球; const city event.headers[x-city] || 某地; // 构建响应数据 const data { message: 你好欢迎来自 ${city}${country} 的朋友, servedBy: Netlify Edge Network, timestamp: new Date().toISOString(), ipHash: event.headers[x-forwarded-for]?.split(,)[0]?.slice(0, 10) ... }; // 返回 JSON 响应 return { statusCode: 200, headers: { Content-Type: application/json;charsetUTF-8, Access-Control-Allow-Origin: * // 允许跨域示例用生产环境应限制 }, body: JSON.stringify(data, null, 2) }; }步骤三添加 Netlify 配置文件在项目根目录创建netlify.toml文件配置构建和部署选项# 文件: /netlify.toml [build] command npm run build publish dist functions netlify/functions [dev] command npm run dev port 8888 targetPort 5173步骤四修改前端以调用 API编辑src/App.jsximport { useEffect, useState } from react; import ./App.css; function App() { const [greeting, setGreeting] useState(正在加载问候...); const [info, setInfo] useState(null); const [loading, setLoading] useState(true); useEffect(() { // 调用 Netlify Function API fetch(/.netlify/functions/api/greeting) .then(response response.json()) .then(data { setGreeting(data.message); setInfo(data); setLoading(false); }) .catch(err { console.error(API 调用失败:, err); setGreeting(抱歉暂时无法获取问候信息。); setLoading(false); }); }, []); return ( div classNameApp header classNameApp-header h1 Netlify 全球全栈应用/h1 p前端托管于 Netlify后端 API 运行于 Netlify FunctionsAWS Lambda/p div classNamecard {loading ? ( p⏳ 加载中.../p ) : ( h2{greeting}/h2 {info ( pre classNameapi-response {JSON.stringify(info, null, 2)} /pre )} / )} /div p classNameexplain 每次访问都会通过 Netlify Function 返回你的地理位置信息 展示了 Serverless 后端的强大能力。每次 git push 都会自动部署 /p /header /div ); } export default App;步骤五本地预览与测试在部署前使用 Netlify CLI 在本地完整模拟生产环境# 1. 确保已安装 Netlify CLI npm install -g netlify-cli # 2. 登录 Netlify将打开浏览器授权 netlify login # 3. 在项目根目录启动本地开发服务器 netlify dev运行成功后终端会输出类似以下内容◈ Netlify Dev ◈ ◈ Ignored general context env var: LANG (defined in process) ◈ Loaded function api-greeting from netlify/functions/api/greeting.js ◈ Starting Netlify Dev with React Scripts ◈ ◈ Your site is live at http://localhost:8888 ◈ ◾ Injected .env file variables.打开http://localhost:8888你应该能看到页面并成功获取到 API 返回的地理位置数据。netlify dev会自动代理所有函数请求让你在本地就能完整测试全栈功能。步骤六部署上线有两种方式可以将应用部署到 Netlify方法 AGit 集成部署推荐支持自动 CI/CD1.将代码推送到 GitHubgit init git add . git commit -m 初始提交我的第一个 Netlify 全栈应用 # 在 GitHub 上创建新仓库后按指示推送 git remote add origin 你的仓库URL git branch -M main git push -u origin main2.在 Netlify Dashboard 中连接并部署• 登录 Netlify Dashboard• 点击“Add new site”“Import an existing project”• 选择GitHub或其他 Git 提供商并授权• 选择你刚刚推送的仓库• 构建设置会自动从netlify.toml中读取你只需点击“Deploy site”即可几秒钟后你的应用将上线并获得一个https://随机名称.netlify.app的永久链接。此后每次git push到主分支都会自动触发重新部署。方法 BCLI 直接部署如果你不想使用 Git 或只是快速测试可以在本地直接用命令行部署# 构建前端 npm run build # 直接部署整个项目包含 Functions netlify deploy --prod --dirdistCLI 会提示你创建新站点或关联已有站点完成后会返回部署 URL。Netlify 核心能力进阶Edge Functions 入门除了 Serverless FunctionsNetlify 还提供了Edge Functions运行在全球 CDN 边缘节点上延迟更低。在项目根目录下创建边缘函数目录和文件mkdir -p netlify/edge-functions在netlify/edge-functions/hello.js中写入// 文件: /netlify/edge-functions/hello.js // 默认导出的 handler 处理请求 export default async (request, context) { // 从边缘环境中获取地理位置 const geo context.geo; const country geo?.country?.name || Global; const city geo?.city || unknown; // 返回个性化的响应 return new Response( Hello from the Edge! You are visiting from ${city}, ${country}, { headers: { content-type: text/plain } } ); }; // config 导出配置函数触发的路径 export const config { path: /edge-hello };这个边缘函数将在访问/edge-hello路径时触发且由于运行在边缘节点响应速度远优于传统后端。用netlify dev测试本地边缘函数你可以使用--geomock标志模拟来自不同国家的访问请求。如何选择Netlify Functions vs Edge Functions维度Netlify FunctionsNetlify Edge Functions运行位置AWS Lambda 数据中心默认美国东部可配置其他区域CDN 边缘节点全球 250 节点运行时Node.js支持 JS/TSDeno支持 TS、JSX/TSX执行限制10 秒同步/ 15 分钟后台更短的执行时间极致轻量适用场景API 网关、表单提交、数据库操作、第三方集成A/B 测试、重定向、边缘身份验证、个性化响应冷启动存在但已优化几乎为零简洁建议• 需要数据库操作、外部 API 调用、复杂业务逻辑 →选 Functions• 需要超低延迟、地理位置个性化、边缘层逻辑 →选 Edge Functions扩展生态数据持久化方案Netlify 提供了多种数据存储方案可与 Functions 和 Edge Functions 无缝集成方案说明适合场景Netlify Blobs类似 KV 的键值存储适合存储用户配置、会话数据缓存、用户偏好设置Forms内置的表单处理服务自动检测垃圾提交联系表单、订阅表单第三方数据库通过 Functions 连接 Supabase、Fauna、MongoDB Atlas 等需要完整数据库能力的应用Netlify Large Media托管和管理大型媒体文件图片、视频媒体密集型应用对于大多数中小型应用Supabase Netlify Functions的组合尤为流行既能享受 Supabase 开箱即用的 PostgreSQL 数据库和认证功能又能利用 Netlify 的无服务器部署优势。Netlify vs Vercel vs Cloudflare Pages一图看懂维度NetlifyVercelCloudflare Pages主要定位全栈 Web 部署平台全栈 Web 部署平台边缘计算 静态托管后端能力FunctionsAWS Lambda Edge FunctionsDenoServerless FunctionsPages FunctionsWorkers 集成免费套餐亮点100GB/月带宽125k 函数调用1M 边缘调用类似额度10 万次/日 Workers 请求独特优势表单处理、分支预览、商业功能完备Next.js 深度优化全球 300 边缘节点定价模型基于积分的灵活计费基于用量计费免费套餐丰厚最佳用例内容网站、营销页面、Jamstack 全栈应用现代 React 框架应用边缘计算密集的应用简洁建议• 需要完善的全栈能力和表单处理 →选 Netlify• 项目主要使用Next.js →选 Vercel• 追求极致边缘性能和免费额度 →选 Cloudflare Pages总结通过 Netlify你将获得•极致的自动化git push即部署告别手动上传。•强大的全栈能力Serverless Functions 让前端项目轻松拥有后端 API。•灵活的边缘计算Edge Functions 实现超低延迟的动态响应。•慷慨的免费额度100GB 带宽、数十万次函数调用足以支撑大多数个人项目。•全球 CDN 加速静态资源和 API 响应都能被快速分发至世界各地。(部分出自网络)Netlify 以其出色的开发体验和自动化的 CI/CD 工作流成为了无数前端开发者的首选部署平台。从个人博客到商业 SaaS 应用Netlify 都能提供稳定、高效的托管服务。
Netlify全栈开发：零运维部署实战
发布时间：2026/5/29 3:10:44
之前的文章很多人评论这些是虚拟主机不是服务器但虚拟主机也称为虚拟服务器哪怕云服务器也是从一台物理服务器中分出多个云服务器所以具体看自己的定义再决定是否往下看。对于开发者而言将网站或应用部署到公网往往意味着要与服务器运维、域名配置、HTTPS 证书、扩容等繁琐事务打交道。尤其是当你只是想快速验证一个想法、搭建一个个人博客或为自己的项目写一个简单的后端 API 时这些“脏活累活”会大大消耗你的创造力。Netlify的出现几乎完美地解决了这一痛点。它不是一个传统的“服务器”而是一个现代化的Web 部署平台。你只需把代码推送到 GitHubNetlify 就会自动构建、部署并为你生成一个可全球访问的 HTTPS 网址。更重要的是它内置了Serverless Functions无服务器函数让你在一个项目中就能同时搞定前端页面和后端 API真正实现全栈无服务器。为什么选择 Netlify•极致的自动化git push即部署每次 Pull Request 都会自动生成预览链接。•慷慨的免费额度每月 100GB 带宽、125,000 次函数调用足够支撑个人项目和初创产品。•一站式的全栈能力静态托管 表单处理 无服务器函数 边缘函数告别跨平台割裂。•零运维成本自动 HTTPS、全球 CDN、回滚、环境变量……你只需关心业务代码。在本文中我们将从零开始使用React Netlify Functions构建一个能根据访问者地理位置返回问候语的全栈应用并把它部署到线上。无论你是前端新手还是资深开发者相信都能感受到 Netlify 带来的流畅体验。本文部分代码与命令展示时会尽量附上运行效果说明建议对“无服务器函数”和“边缘部署”有个基本概念即可无需深入底层细节。让我们一起用最简单的方式做出专业级的全栈应用。介绍在当今的 Web 开发领域“自动化”与“无服务器”正在重塑我们的开发方式。将应用高效、可靠地交付到全球用户手中已成为开发者关注的焦点。Netlify 作为该领域的知名平台凭借其强大的自动化工作流和简洁的全栈部署体验让开发者能够以极低的成本将现代 Web 应用轻松部署至全球边缘网络。传送门https://www.netlify.com/为什么选择 Netlify在深入了解具体工具前我们需先理解其背后的核心优势•全球边缘 CDN静态资源自动分发至 Netlify 在全球的边缘节点确保用户无论身处何地都能快速加载。•Git 驱动的自动化部署连接 GitHub/GitLab 后每次git push都会自动触发构建和部署真正实现“提交即上线”。•一站式全栈能力从静态托管到 Serverless Functions无服务器函数再到 Edge Functions边缘函数Netlify 提供了一个完整的全栈开发平台前端和后端可在同一项目中统一管理。•颠覆性的免费额度对于个人项目、博客或初创原型免费套餐提供了每月100 GB 带宽、125,000 次函数调用、1,000,000 次边缘函数调用和10 GB 存储的慷慨额度足以支撑大多数中小型项目。Netlify 免费套餐详解Netlify 在 2025 年 9 月更新了定价体系采用全新的基于积分的计费模型使费用更加透明和可预测。以下是当前免费套餐的核心额度资源类型免费套餐额度说明每月积分300 积分积分池统一管理各资源消耗生产环境部署15 积分/次每次部署到生产环境消耗积分分支/预览部署免费用于测试和实验的部署不消耗积分带宽10 积分/GB数据传输到用户端Web 请求3 积分/10,000 次页面访问、API 调用、重定向等Serverless Functions5 积分/GB-小时包含同步函数和后台函数表单提交1 积分/次垃圾邮件自动检测到的提交免费构建分钟不再单独跟踪整合到积分体系中重要提示在免费套餐中一旦当月额度用完网站会被暂停至下个月初不会产生任何意外费用。你将在使用达到 50%、75%、90% 和 100% 时收到邮件和应用内通知。Netlify-价格Netlify 核心能力一览1. 静态网站托管Static Hosting它是什么Netlify 最初的核心能力就是静态网站托管为 Jamstack 和现代前端框架提供了开箱即用的全球分发方案。关键特性•Git 原生集成连接 GitHub、GitLab 或 Bitbucket 仓库每次推送自动构建和部署。•自动 HTTPS所有托管的网站自动获得 Let‘s Encrypt 提供的免费 SSL 证书。•预览部署每个 Pull Request 都会自动生成一个独立的预览 URL便于团队协作审查代码变更。•自定义域名可绑定自己的域名无需额外配置即可启用 HTTPS。典型应用场景• 托管 React、Vue、Svelte、Angular、Next.js静态导出等框架构建的单页应用。• 部署 Hugo、Hexo、Eleventy、Jekyll 等生成的静态博客。• 托管个人作品集网站、公司官网或产品 landing page。2. Netlify FunctionsServerless 后端它是什么Netlify Functions 是一个无服务器函数平台。你可以在项目中创建一个/netlify/functions目录将后端 API 逻辑代码放在里面Netlify 会自动将其打包为无服务器函数并部署到 AWS Lambda 上。关键特性与技术•代码与前端同库管理函数代码和前端代码在同一个 Git 仓库中版本控制、构建和部署告别前后端割裂。•自动路由映射/netlify/functions/api.js会自动映射为.netlify/functions/api路由。•多种运行模式支持同步函数30秒执行限制和后台函数15分钟执行限制。•TypeScript 原生支持无需额外配置即可使用 TypeScript 编写函数。典型应用场景• 为前端应用添加联系表单邮件发送 API。• 构建轻量级 REST API 或 GraphQL 网关。• 实现用户认证后的数据动态处理。• 集成第三方服务如 Stripe 支付、Slack Bot 等。3. Edge Functions边缘计算它是什么Edge Functions 是基于 Deno 运行时在边缘节点执行的函数。它比 Serverless Functions 更贴近用户运行在全球 CDN 边缘节点上可以实现极低延迟的动态响应。关键特性•Deno 运行时支持 TypeScript 和 JSX/TSX 语法可直接在边缘进行服务端渲染SSR。•中间件能力可以作为中间件修改请求和响应支持 A/B 测试、身份验证、动态缓存等场景。•路径配置灵活通过config导出来定义函数触发的路径。•本地测试支持Netlify CLI 提供了--geomock标志可模拟不同地理位置的请求来测试边缘函数的地区化行为。典型应用场景• 基于用户地理位置做个性化响应或重定向。• 实现边缘级别的身份验证或访问控制。• 动态生成、处理 HTML 以提升 SEO 表现。• 在 CDN 层完成 API 请求聚合。4. Netlify CLI本地开发利器它是什么Netlify CLI 是一个强大的命令行工具可以将 Netlify 生产环境的功能完整镜像到本地开发环境中。关键特性•本地环境模拟通过netlify dev命令启动一个代理服务器在本地完整模拟 Netlify 生产环境中的 Functions、Edge Functions、重定向规则和环境变量。•自动框架检测自动识别 Gatsby、Hugo、Next.js、Vite 等主流框架并正确配置本地开发服务器。•一处安装随处使用CLI 全局安装后即可在任何目录执行netlify命令。安装方法npm install -g netlify-cli实战入门从零构建你的第一个全栈应用我们将通过一个完整的示例展示如何用 Netlify 构建一个兼具前端与后端 API 的应用。示例全球问候应用——你的第一个 Netlify 全栈项目我们将创建一个使用 Vite 构建的 React 前端并为其添加一个 Netlify Function 后端 API。步骤一创建前端项目# 使用 Vite 快速创建一个 React 项目 npm create vitelatest my-global-app -- --template react cd my-global-app npm install运行开发服务器npm run dev打开http://localhost:5173应该看到 React 的默认欢迎页面。按CtrlC退出开发服务器。步骤二添加 Netlify Functions后端 APINetlify 约定项目根目录下的/netlify/functions目录中的文件会自动部署为无服务器函数。# 创建函数目录和 API 文件 mkdir -p netlify/functions/api在netlify/functions/api/greeting.js中写入以下代码// 文件: /netlify/functions/api/greeting.js // 部署后将自动映射为 /api/greeting 路由 // 导入 Netlify 函数所需的类型支持可选 // 此函数使用标准的 ES modules 语法 export async function handler(event, context) { // 从请求头中获取地理信息Netlify 自动注入 const country event.headers[x-country] || 全球; const city event.headers[x-city] || 某地; // 构建响应数据 const data { message: 你好欢迎来自 ${city}${country} 的朋友, servedBy: Netlify Edge Network, timestamp: new Date().toISOString(), ipHash: event.headers[x-forwarded-for]?.split(,)[0]?.slice(0, 10) ... }; // 返回 JSON 响应 return { statusCode: 200, headers: { Content-Type: application/json;charsetUTF-8, Access-Control-Allow-Origin: * // 允许跨域示例用生产环境应限制 }, body: JSON.stringify(data, null, 2) }; }步骤三添加 Netlify 配置文件在项目根目录创建netlify.toml文件配置构建和部署选项# 文件: /netlify.toml [build] command npm run build publish dist functions netlify/functions [dev] command npm run dev port 8888 targetPort 5173步骤四修改前端以调用 API编辑src/App.jsximport { useEffect, useState } from react; import ./App.css; function App() { const [greeting, setGreeting] useState(正在加载问候...); const [info, setInfo] useState(null); const [loading, setLoading] useState(true); useEffect(() { // 调用 Netlify Function API fetch(/.netlify/functions/api/greeting) .then(response response.json()) .then(data { setGreeting(data.message); setInfo(data); setLoading(false); }) .catch(err { console.error(API 调用失败:, err); setGreeting(抱歉暂时无法获取问候信息。); setLoading(false); }); }, []); return ( div classNameApp header classNameApp-header h1 Netlify 全球全栈应用/h1 p前端托管于 Netlify后端 API 运行于 Netlify FunctionsAWS Lambda/p div classNamecard {loading ? ( p⏳ 加载中.../p ) : ( h2{greeting}/h2 {info ( pre classNameapi-response {JSON.stringify(info, null, 2)} /pre )} / )} /div p classNameexplain 每次访问都会通过 Netlify Function 返回你的地理位置信息 展示了 Serverless 后端的强大能力。每次 git push 都会自动部署 /p /header /div ); } export default App;步骤五本地预览与测试在部署前使用 Netlify CLI 在本地完整模拟生产环境# 1. 确保已安装 Netlify CLI npm install -g netlify-cli # 2. 登录 Netlify将打开浏览器授权 netlify login # 3. 在项目根目录启动本地开发服务器 netlify dev运行成功后终端会输出类似以下内容◈ Netlify Dev ◈ ◈ Ignored general context env var: LANG (defined in process) ◈ Loaded function api-greeting from netlify/functions/api/greeting.js ◈ Starting Netlify Dev with React Scripts ◈ ◈ Your site is live at http://localhost:8888 ◈ ◾ Injected .env file variables.打开http://localhost:8888你应该能看到页面并成功获取到 API 返回的地理位置数据。netlify dev会自动代理所有函数请求让你在本地就能完整测试全栈功能。步骤六部署上线有两种方式可以将应用部署到 Netlify方法 AGit 集成部署推荐支持自动 CI/CD1.将代码推送到 GitHubgit init git add . git commit -m 初始提交我的第一个 Netlify 全栈应用 # 在 GitHub 上创建新仓库后按指示推送 git remote add origin 你的仓库URL git branch -M main git push -u origin main2.在 Netlify Dashboard 中连接并部署• 登录 Netlify Dashboard• 点击“Add new site”“Import an existing project”• 选择GitHub或其他 Git 提供商并授权• 选择你刚刚推送的仓库• 构建设置会自动从netlify.toml中读取你只需点击“Deploy site”即可几秒钟后你的应用将上线并获得一个https://随机名称.netlify.app的永久链接。此后每次git push到主分支都会自动触发重新部署。方法 BCLI 直接部署如果你不想使用 Git 或只是快速测试可以在本地直接用命令行部署# 构建前端 npm run build # 直接部署整个项目包含 Functions netlify deploy --prod --dirdistCLI 会提示你创建新站点或关联已有站点完成后会返回部署 URL。Netlify 核心能力进阶Edge Functions 入门除了 Serverless FunctionsNetlify 还提供了Edge Functions运行在全球 CDN 边缘节点上延迟更低。在项目根目录下创建边缘函数目录和文件mkdir -p netlify/edge-functions在netlify/edge-functions/hello.js中写入// 文件: /netlify/edge-functions/hello.js // 默认导出的 handler 处理请求 export default async (request, context) { // 从边缘环境中获取地理位置 const geo context.geo; const country geo?.country?.name || Global; const city geo?.city || unknown; // 返回个性化的响应 return new Response( Hello from the Edge! You are visiting from ${city}, ${country}, { headers: { content-type: text/plain } } ); }; // config 导出配置函数触发的路径 export const config { path: /edge-hello };这个边缘函数将在访问/edge-hello路径时触发且由于运行在边缘节点响应速度远优于传统后端。用netlify dev测试本地边缘函数你可以使用--geomock标志模拟来自不同国家的访问请求。如何选择Netlify Functions vs Edge Functions维度Netlify FunctionsNetlify Edge Functions运行位置AWS Lambda 数据中心默认美国东部可配置其他区域CDN 边缘节点全球 250 节点运行时Node.js支持 JS/TSDeno支持 TS、JSX/TSX执行限制10 秒同步/ 15 分钟后台更短的执行时间极致轻量适用场景API 网关、表单提交、数据库操作、第三方集成A/B 测试、重定向、边缘身份验证、个性化响应冷启动存在但已优化几乎为零简洁建议• 需要数据库操作、外部 API 调用、复杂业务逻辑 →选 Functions• 需要超低延迟、地理位置个性化、边缘层逻辑 →选 Edge Functions扩展生态数据持久化方案Netlify 提供了多种数据存储方案可与 Functions 和 Edge Functions 无缝集成方案说明适合场景Netlify Blobs类似 KV 的键值存储适合存储用户配置、会话数据缓存、用户偏好设置Forms内置的表单处理服务自动检测垃圾提交联系表单、订阅表单第三方数据库通过 Functions 连接 Supabase、Fauna、MongoDB Atlas 等需要完整数据库能力的应用Netlify Large Media托管和管理大型媒体文件图片、视频媒体密集型应用对于大多数中小型应用Supabase Netlify Functions的组合尤为流行既能享受 Supabase 开箱即用的 PostgreSQL 数据库和认证功能又能利用 Netlify 的无服务器部署优势。Netlify vs Vercel vs Cloudflare Pages一图看懂维度NetlifyVercelCloudflare Pages主要定位全栈 Web 部署平台全栈 Web 部署平台边缘计算 静态托管后端能力FunctionsAWS Lambda Edge FunctionsDenoServerless FunctionsPages FunctionsWorkers 集成免费套餐亮点100GB/月带宽125k 函数调用1M 边缘调用类似额度10 万次/日 Workers 请求独特优势表单处理、分支预览、商业功能完备Next.js 深度优化全球 300 边缘节点定价模型基于积分的灵活计费基于用量计费免费套餐丰厚最佳用例内容网站、营销页面、Jamstack 全栈应用现代 React 框架应用边缘计算密集的应用简洁建议• 需要完善的全栈能力和表单处理 →选 Netlify• 项目主要使用Next.js →选 Vercel• 追求极致边缘性能和免费额度 →选 Cloudflare Pages总结通过 Netlify你将获得•极致的自动化git push即部署告别手动上传。•强大的全栈能力Serverless Functions 让前端项目轻松拥有后端 API。•灵活的边缘计算Edge Functions 实现超低延迟的动态响应。•慷慨的免费额度100GB 带宽、数十万次函数调用足以支撑大多数个人项目。•全球 CDN 加速静态资源和 API 响应都能被快速分发至世界各地。(部分出自网络)Netlify 以其出色的开发体验和自动化的 CI/CD 工作流成为了无数前端开发者的首选部署平台。从个人博客到商业 SaaS 应用Netlify 都能提供稳定、高效的托管服务。
相关文章
Jetson Orin Nano 新手避坑指南：从零部署YOLOv5，解决CSI摄像头绿色画面问题
Jetson Orin Nano 实战：解决CSI摄像头绿色画面与YOLOv5部署全流程 刚拿到Jetson Orin Nano时，那种兴奋感就像孩子拿到新玩具。但当我兴冲冲地连接CSI摄像头准备跑YOLOv5时，屏幕上却出现了一片诡异的绿色——这恐怕是许多开发者遇到的第一个&q…
保姆级避坑指南：在Ubuntu 22.04 ROS2 Humble上搞定奥比中光AstraPro深度相机（含彩色图显示与点云对齐问题解决）
保姆级避坑指南：Ubuntu 22.04 ROS2 Humble部署奥比中光AstraPro深度相机全流程解析深度相机在机器人视觉、三维重建等领域扮演着关键角色，而奥比中光AstraPro凭借其性价比优势成为许多开发者的首选。本文将带您从零开始，在Ubuntu 22.04和ROS2…
从Zynq7020到ZU4EV：一套UDP协议栈如何适配Xilinx全系FPGA？聊聊Tri Mode Ethernet MAC的移植心法
跨平台UDP协议栈移植实战：Xilinx全系FPGA的Tri Mode Ethernet MAC适配指南 在工业自动化、医疗影像和航空航天等领域，FPGA的网络通信能力正成为系统设计的关键要素。面对Xilinx从7系列到UltraScale的多样化FPGA平台，工程师们常常陷入重复开发…
Axure RP安装（已汉化）附下载地址
一、一款小白也能快速上手的产品设计软件Axure RP Axure RP能做的 网页/APP/软件页面结构布局交互效果无需手搓代码完整的项目流程 Axure RP做不到的 不等于精美的UI设计不适合做海报、插画 一句话总结Axure RP是用来定产品框架，做交互演示，梳理产品…
从零开发游戏需要学习的c#模块，第二十九章（经验值与升级系统）
本节课学习内容击杀敌人获得经验值经验条显示在血量条下方经验满了升级，攻击力提升、血量回满升级时屏幕上飘出“LEVEL UP”文字第一步：升级 Player 类打开 Player.cs，在类里加上经验值和升级相关的内容：1. 添加字段：c…
惠普暗影精灵7 RTX3050装Ubuntu 20.04避坑记：从黑屏到成功驱动N卡的全过程
惠普暗影精灵7 RTX3050安装Ubuntu 20.04实战指南：从驱动黑屏到完美适配去年入手惠普暗影精灵7笔记本时，我完全没想到这台搭载RTX3050显卡的机器会在Linux系统安装上给我带来如此多的挑战。作为一名计算机视觉方向的开发者，我需要Ubuntu系统来…
告别旧Input：用Unity InputSystem 1.7.0 重构你的移动端虚拟摇杆（附性能对比）
Unity InputSystem 1.7.0移动端虚拟摇杆重构实战指南移动端游戏开发中，虚拟摇杆作为核心交互组件，其性能与易用性直接影响玩家体验。许多团队仍在使用Unity旧版Input Manager或第三方插件，却面临多指触控支持不足、配置复杂、真机适配困难等痛…
从OpenAI Gym的CliffWalking实战出发：手把手教你用Python代码区分Model-based与Model-free算法
从CliffWalking实战看强化学习：Model-based与Model-free算法代码对比在强化学习领域，Model-based和Model-free是两种截然不同的技术路径。很多初学者在理解这两种方法时容易陷入理论迷雾，而实际上，最好的学习方式莫过于亲手实现它…
多轮约束下的代码编写：基于智谱AI的智能开发实践
作者介绍作者：王嘉玙璠，女，西安工程大学电子信息学院,2025级研究生研究方向：3D点云、零样本电子邮箱：bayoulove1gmail.com作者：李逸超，男，西安工程大学电子信息学院，2025…
PostgreSQL Vacuum介绍（一种核心数据库维护操作，主要用于解决MVCC多版本并发控制机制带来的死元组dead tuples问题）回收死元组空间、存储空间耗尽、避免幻读、垃圾回收器
文章目录**为什么需要 Vacuum？****Vacuum 的核心作用****实际场景中的关键点****简单总结**在 PostgreSQL 中， Vacuum 是一种 核心的数据库维护操作，主要用于解决 MVCC（多版本并发控制）机制 带来的“死元组࿰…
从零设计可调光LED夜灯：NE555 PWM电路全流程实战指南
1. 项目概述：为什么电路设计是每个创客的必修课如果你对电子制作感兴趣，无论是想做一个会发光的徽章，还是一个能自动浇花的小装置，你都会发现，所有想法最终都要落到一块小小的电路板上。电路设计，就是连接创…
基于Arduino的动漫角色机械面制作：从传感器到伺服电机的交互实现
1. 项目概述：从动漫角色到可交互的机械面我一直对如何让静态的模型“活”起来充满兴趣，特别是那些我们熟悉的动漫角色。这次，我决定挑战自己，制作一个基于《火影忍者》中宇智波佐助的机械面。这个项目的核心目标很简单：…
施工现场安全事故预警准确率达94.6%？——解密某央企AI Agent边缘计算部署架构与3个月落地实录
更多请点击： https://codechina.net 第一章：施工现场安全事故预警准确率达94.6%？——解密某央企AI Agent边缘计算部署架构与3个月落地实录 在华北某大型地铁盾构施工现场，一套轻量化AI Agent系统于2024年Q2完成全栈部署ÿ…
附录 B：术语表
本术语表面向“从 MM 到 HMM”专栏阅读过程中的快速查阅。它不是内核 API 手册，而是把文章中反复出现的概念放到同一张地图上：先给出直观含义，再说明它在 Linux MM/HMM 语境里的作用。建议阅读方式： 初读专栏时，把它当…
Midjourney渐变美学的神经渲染原理（附RGB-HSV-LCH三空间渐变映射对照表·行业首曝）
更多请点击： https://kaifayun.com 第一章：Midjourney渐变美学的神经渲染原理（附RGB-HSV-LCH三空间渐变映射对照表行业首曝） Midjourney 的渐变美学并非传统插值实现，而是由其隐式神经渲染器（Implicit Neu…
MPC-BE：基于DirectShow架构的专业级开源媒体播放解决方案
MPC-BE：基于DirectShow架构的专业级开源媒体播放解决方案 【免费下载链接】MPC-BE MPC-BE – универсальный проигрыватель аудио и видеофайлов для операционной системы Windows. 项目地址:…
如何快速计算3D模型体积和重量：STL-Volume-Model-Calculator终极指南
如何快速计算3D模型体积和重量：STL-Volume-Model-Calculator终极指南 【免费下载链接】STL-Volume-Model-Calculator STL Volume Model Calculator Python 项目地址: https://gitcode.com/gh_mirrors/st/STL-Volume-Model-Calculator 你是否曾经为3D打印项目…
通过Taotoken CLI工具一键配置团队开发环境与模型密钥
通过Taotoken CLI工具一键配置团队开发环境与模型密钥 1. CLI工具安装与基本使用 Taotoken提供的CLI工具可通过npm全局安装或直接使用npx运行。对于需要频繁使用CLI的团队，推荐全局安装： npm install -g taotoken/taotoken对于临时使用或项目级配置&a…