devops/deploy-netlify

Netlify 部署

适用场景

• 前端应用（React、Vue、Svelte、Next.js）
• 静态站点（Hugo、Astro、Gatsby、Eleventy）
• Serverless Functions（Netlify Functions）
• 表单处理、身份认证（Netlify Identity）
• 边缘函数（Netlify Edge Functions）

前置条件

1. 安装 Netlify CLI：npm i -g netlify-cli
2. 登录 Netlify：netlify login（需要用户交互完成授权）
3. 验证登录：netlify status
4. 项目根目录有 package.json（Node.js 项目）

部署流程

1. 构建项目

npm run build
# 产物目录通常为 dist/、build/ 或 .next/

2. 初始化 Netlify 项目

# 在项目根目录初始化（交互式）
netlify init

# 或链接到已有项目
netlify link

netlify init 会创建 netlify.toml 配置文件。

3. netlify.toml 配置

[build]
  command = "npm run build"
  publish = "dist"
  functions = "netlify/functions"

[build.environment]
  NODE_VERSION = "20"
  NPM_FLAGS = "--no-audit --no-fund"

# SPA 路由重写
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# 自定义响应头
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    Referrer-Policy = "strict-origin-when-cross-origin"

# 边缘函数
[[edge_functions]]
  function = "auth"
  path = "/api/*"

4. 部署

# 预览部署（staging）
netlify deploy

# 生产部署
netlify deploy --prod

# 指定产物目录部署
netlify deploy --dir=dist --prod

部署输出示例：

Deploy path:        /path/to/project/dist
Configuration:      /path/to/project/netlify.toml
Deploying to main site URL...
✔ Finished hashing 32 files
✔ CDN requesting 12 files
✔ Finished uploading 12 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/my-site/deploys/xxx
Website URL:       https://my-site.netlify.app
Unique Deploy URL: https://xxx--my-site.netlify.app

5. 环境变量管理

# 设置环境变量
netlify env:set DATABASE_URL "postgres://..."

# 导入 .env 文件
netlify env:import .env

# 列出环境变量
netlify env:list

# 删除环境变量
netlify env:unset DATABASE_URL

# 拉取环境变量到本地
netlify env:pull .env

6. 域名绑定

# 添加自定义域名
netlify domains:add example.com

# 列出域名
netlify domains:list

Netlify Functions

创建 Serverless Function