Netlify全栈开发：零运维部署实战

之前的文章很多人评论这些是虚拟主机不是服务器，但虚拟主机也称为虚拟服务器，哪怕云服务器也是从一台物理服务器中分出多个云服务器，所以具体看自己的定义，再决定是否往下看。

对于开发者而言，将网站或应用部署到公网，往往意味着要与服务器运维、域名配置、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 月更新了定价体系，采用全新的基于积分的计费模型，使费用更加透明和可预测。以下是当前免费套餐的核心额度：

资源类型	免费套餐额度	说明
每月积分	300 积分	积分池统一管理各资源消耗
生产环境部署	15 积分/次	每次部署到生产环境消耗积分
分支/预览部署	免费	用于测试和实验的部署不消耗积分
带宽	10 积分/GB	数据传输到用户端
Web 请求	3 积分/10,000 次	页面访问、API 调用、重定向等
Serverless Functions	5 积分/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 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 main
1. 在 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=dist

CLI 会提示你创建新站点或关联已有站点，完成后会返回部署 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

维度	Netlify Functions	Netlify Edge Functions
运行位置	AWS Lambda 数据中心（默认美国东部，可配置其他区域）	CDN 边缘节点（全球 250+ 节点）
运行时	Node.js（支持 JS/TS）	Deno（支持 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：一图看懂

维度	Netlify	Vercel	Cloudflare Pages
主要定位	全栈 Web 部署平台	全栈 Web 部署平台	边缘计算 + 静态托管
后端能力	Functions（AWS Lambda）+ Edge Functions（Deno）	Serverless Functions	Pages Functions（Workers 集成）
免费套餐亮点	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全栈开发：零运维部署实战

介绍

为什么选择 Netlify？

Netlify 免费套餐详解

Netlify 核心能力一览

1. 静态网站托管（Static Hosting）

2. Netlify Functions：Serverless 后端

3. Edge Functions：边缘计算

4. Netlify CLI：本地开发利器

实战入门：从零构建你的第一个全栈应用

示例：全球问候应用------你的第一个 Netlify 全栈项目

步骤一：创建前端项目

步骤二：添加 Netlify Functions（后端 API）

步骤三：添加 Netlify 配置文件

步骤四：修改前端以调用 API

步骤五：本地预览与测试

步骤六：部署上线

在 GitHub 上创建新仓库后按指示推送

Netlify 核心能力进阶：Edge Functions 入门

如何选择：Netlify Functions vs Edge Functions

扩展生态：数据持久化方案

Netlify vs Vercel vs Cloudflare Pages：一图看懂

总结