前言
之前的文章很多人评论这些是虚拟主机不是服务器，但虚拟主机也称为虚拟服务器，哪怕云服务器也是从一台物理服务器中分出多个云服务器，所以具体看自己的定义，再决定是否往下看。
对于开发者而言，将网站或应用部署到公网，往往意味着要与服务器运维、域名配置、HTTPS 证书、扩容等繁琐事务打交道。尤其是当你只是想快速验证一个想法、搭建一个个人博客或为自己的项目写一个简单的后端 API 时，这些“脏活累活”会大大消耗你的创造力。
Netlify 的出现，几乎完美地解决了这一痛点。它不是一个传统的“服务器”，而是一个现代化的 Web 部署平台。你只需把代码推送到 GitHub，Netlify 就会自动构建、部署，并为你生成一个可全球访问的 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 月更新了定价体系，采用全新的基于积分的计费模型，使费用更加透明和可预测。以下是当前免费套餐的核心额度：
每月积分 生产环境部署 分支/预览部署 带宽 Web 请求 Serverless Functions 表单提交 构建分钟
重要提示：在免费套餐中，一旦当月额度用完，网站会被暂停至下个月初，不会产生任何意外费用。你将在使用达到 50%、75%、90% 和 100% 时收到邮件和应用内通知。
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 Functions：Serverless 后端
它是什么？
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 提供了 --geo=mock标志，可模拟不同地理位置的请求来测试边缘函数的地区化行为。
典型应用场景：
• 基于用户地理位置做个性化响应或重定向。 • 实现边缘级别的身份验证或访问控制。 • 动态生成、处理 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 vite@latest my-global-app -- --template react
cd my-global-app
npm install运行开发服务器：
npm run dev
打开 http://localhost:5173 应该看到 React 的默认欢迎页面。按 Ctrl+C 退出开发服务器。
步骤二：添加 Netlify Functions（后端 API）
Netlify 约定：项目根目录下的 /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;charset=UTF-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.jsx：
import { 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 className="App">
<header className="App-header">
<h1>? Netlify 全球全栈应用</h1>
<p>前端托管于 Netlify，后端 API 运行于 Netlify Functions（AWS Lambda）</p>
<div className="card">
{loading ? (
<p>⏳ 加载中...</p>
) : (
<>
<h2>{greeting}</h2>
{info && (
<pre className="api-response">
{JSON.stringify(info, null, 2)}
</pre>
)}
</>
)}
</div>
<p className="explain">
? 每次访问都会通过 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：
方法 A：Git 集成部署（推荐，支持自动 CI/CD）
1. 将代码推送到 GitHub：
git 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 到主分支都会自动触发重新部署。
方法 B：CLI 直接部署
如果你不想使用 Git 或只是快速测试，可以在本地直接用命令行部署：
# 构建前端
npm run build
# 直接部署整个项目（包含 Functions）
netlify deploy --prod --dir=distCLI 会提示你创建新站点或关联已有站点，完成后会返回部署 URL。
Netlify 核心能力进阶：Edge Functions 入门
除了 Serverless Functions，Netlify 还提供了 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 测试本地边缘函数，你可以使用 --geo=mock 标志模拟来自不同国家的访问请求。
如何选择：Netlify Functions vs Edge Functions
运行位置 运行时 执行限制 适用场景 冷启动
简洁建议：
• 需要数据库操作、外部 API 调用、复杂业务逻辑？ → 选 Functions • 需要超低延迟、地理位置个性化、边缘层逻辑？ → 选 Edge Functions
扩展生态：数据持久化方案
Netlify 提供了多种数据存储方案，可与 Functions 和 Edge Functions 无缝集成：
Netlify Blobs Forms 第三方数据库 Netlify Large Media
对于大多数中小型应用，Supabase + Netlify Functions 的组合尤为流行，既能享受 Supabase 开箱即用的 PostgreSQL 数据库和认证功能，又能利用 Netlify 的无服务器部署优势。
Netlify vs Vercel vs Cloudflare Pages：一图看懂
主要定位 后端能力 免费套餐亮点 独特优势 定价模型 最佳用例
简洁建议：
• 需要完善的全栈能力和表单处理？ → 选 Netlify • 项目主要使用 Next.js？ → 选 Vercel • 追求极致边缘性能和免费额度？ → 选 Cloudflare Pages
总结
通过 Netlify，你将获得：
• 极致的自动化： git push即部署，告别手动上传。• 强大的全栈能力：Serverless Functions 让前端项目轻松拥有后端 API。 • 灵活的边缘计算：Edge Functions 实现超低延迟的动态响应。 • 慷慨的免费额度：100GB 带宽、数十万次函数调用，足以支撑大多数个人项目。 • 全球 CDN 加速：静态资源和 API 响应都能被快速分发至世界各地。
Netlify 以其出色的开发体验和自动化的 CI/CD 工作流，成为了无数前端开发者的首选部署平台。从个人博客到商业 SaaS 应用，Netlify 都能提供稳定、高效的托管服务。
支付宝微信扫一扫，打赏作者吧～本文链接：https://kinber.cn/post/6572.html 转载需授权！
推荐本站淘宝优惠价购买喜欢的宝贝:
您阅读本篇文章共花了： 