SuperAPI AI 工具集

netlify

部署与运维

查看项目

更新于 10-15 12:07

技能介绍

Netlify 是一个 JAMstack 部署平台,围绕静态站点托管、无服务器函数、表单和身份认证构建。以下内容依据资料整理。

一、用途与核心概念 Netlify 用于部署静态站点和单页应用(SPA),构建 JAMstack 应用,并在需要无服务器函数、内置表单和认证时使用。其核心概念包括:Sites(部署到全球 CDN 的静态站点)、Builds(由 Git 提交触发的自动构建)、Deploy Contexts(production、deploy-preview、branch-deploy)、Atomic Deploys(全有或全无的部署,支持即时回滚)、Instant Cache Invalidation(自动清除 CDN 缓存)。平台提供全球 CDN、持续部署、默认 HTTPS(免费 SSL 证书)、部署预览、无服务器函数、表单与身份认证等能力。

二、快速开始与静态站点部署 安装与登录命令:

  • npm install -g netlify-cli
  • netlify login
  • netlify init
  • netlify deploy --prod

支持的框架及构建配置示例:

  • React(Create React App、Vite):构建命令 npm run build,发布目录 build(CRA)或 dist(Vite)
  • Next.js(静态导出):构建命令 npm run build && npm run export,发布目录 out
  • Vue.js:构建命令 npm run build,发布目录 dist
  • Gatsby:构建命令 gatsby build,发布目录 public
  • Hugo:构建命令 hugo,发布目录 public
  • Svelte/SvelteKit:构建命令 npm run build,发布目录 build

手动部署命令:netlify deploy(草稿预览)、netlify deploy --prod(生产)、netlify deploy --build --prod(带构建部署)。

三、netlify.toml 配置 可配置 [build] 的 command、publish、functions、base(monorepo 基础目录)、ignore(忽略某些变更的构建)、[build.environment](NODE_VERSION、NPM_VERSION、RUBY_VERSION 等)。支持按上下文配置:production、deploy-preview、branch-deploy,各自可设置命令和环境变量。构建处理可配置 [build.processing] 及 css、js、images 的 bundle、minify、compress。

四、环境变量 通过 CLI 设置:netlify env:set API_KEY "secret-value"、netlify env:set NODE_ENV "production";列出:netlify env:list;从 .env 导入:netlify env:import .env。可在 netlify.toml 中按上下文(production、deploy-preview、branch-deploy)设置不同变量。构建期间通过 process.env 访问;客户端变量需加前缀(如 REACT_APP_PUBLIC_KEY)。

五、无服务器函数 函数位于 netlify/functions 目录,导出 handler,接收 event 和 context,返回 statusCode、headers、body。支持 TypeScript(使用 @netlify/functions 的 Handler、HandlerEvent、HandlerContext 类型)。高级模式包括数据库连接缓存(如 MongoDB 连接池)。定时函数使用 @netlify/functions 的 schedule,例如 schedule('0 0 * * *', handler) 表示每天午夜运行。后台函数在 10 秒内返回 200 后自动在后台运行,通过 POST 到 /.netlify/functions/background-task 调用。

六、Netlify Forms HTML 表单使用 data-netlify="true" 和隐藏的 form-name 字段。React 表单通过 fetch 以 application/x-www-form-urlencoded 提交。表单特性包括:蜜罐反垃圾(data-netlify-honeypot="bot-field")、reCAPTCHA v2(data-netlify-recaptcha="true")、文件上传(enctype="multipart/form-data")。表单通知可通过 @netlify/plugin-emails 插件配置收件人、主题等。

七、Netlify Identity 引入 https://identity.netlify.com/v1/netlify-identity-widget.js 并初始化,可监听 init、login、logout 事件。React 中可封装 useNetlifyIdentity 钩子,提供 user、login、logout、signup。受保护函数通过 context.clientContext.user 判断,未登录返回 401。

八、重定向与重写 _redirects 文件支持:状态码重定向、重写(代理)、SPA 回退(/* /index.html 200)、强制 HTTPS、条件重定向(如 Country=us)、基于角色的重定向(Role=admin)。netlify.toml 中通过 [[redirects]] 配置 from、to、status、force、conditions、headers。自定义响应头通过 [[headers]] 配置,如 X-Frame-Options、X-XSS-Protection、Content-Security-Policy、Cache-Control。

九、部署预览、分支部署与拆分测试 部署预览通过 [context.deploy-preview] 配置命令和环境变量;分支部署通过 [context.staging] 或 [context.branch-deploy] 配置。部署通知(GitHub PR 评论、Slack、邮件)在 Netlify UI 中配置。拆分测试(A/B 测试)通过 [[redirects]] 的 conditions(Cookie)或 percentage(如 50/50)实现。

十、Edge Functions 使用 Deno 运行时,位于 netlify/edge-functions,默认导出函数接收 request 和 context,通过 config 指定 path。支持地理位置(context.geo 的 city、country)和响应转换(context.next() 后修改 HTML)。

十一、自定义域名与 SSL 通过 CLI:netlify domains:add example.com、netlify domains:verify example.com。DNS 配置:A 记录 75.2.60.5,CNAME <site-name>.netlify.app。默认自动 HTTPS(免费 Let's Encrypt 证书,自动续期),可通过重定向强制 HTTPS。

十二、分析与 CLI 高级用法 Netlify Analytics 自动注入,服务端分析,无需客户端 JS。自定义分析可通过函数上报事件。CLI 高级用法:netlify dev(本地运行函数,可指定端口、--live 实时共享、netlify functions:serve 仅函数)、netlify link、netlify sites:create、netlify sites:list、netlify status、netlify open、netlify deploy:list、netlify rollback、netlify deploy:cancel <deploy-id>。

十三、Git 集成与部署钩子 持续部署:推送到 main/master 触发生产发布,所有 PR 生成预览,配置的分支触发分支部署。部署钩子通过 curl -X POST -d {} https://api.netlify.com/build_hooks/<hook-id> 触发构建;定时构建可结合外部 cron 与 webhook。

十四、最佳实践 性能优化:启用构建处理(bundle、minify、compress),为 /assets/* 设置长期缓存头。安全头:X-Frame-Options、X-Content-Type-Options、X-XSS-Protection、Referrer-Policy、Permissions-Policy、Content-Security-Policy。函数最佳实践:保持轻量、使用连接池、缓存外部 API 响应、设置合适超时、优雅处理错误。

十五、限制 资料未提供 Netlify 的收费、价格、各套餐配额、函数执行时长上限、带宽限制等具体数值,这些信息暂未提供。