novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5cd7d48bf20e4f389e4245fa32ca229c79098bbd
novalon-website/docs/deployment/DEPLOYMENT.md
T

8.8 KiB
Raw Blame History

部署文档

部署概述

项目采用 Next.js 静态导出模式，构建生成纯静态 HTML 文件，可部署到任何静态文件服务器或 CDN。

构建配置

Next.js 配置

// next.config.ts
const nextConfig: NextConfig = {
  output: 'export',      // 静态导出模式
  distDir: 'dist',       // 输出目录
  images: {
    unoptimized: true,   // 静态导出需要禁用图片优化
  },
  compress: true,
  poweredByHeader: false,
  reactStrictMode: true,
};

构建命令

# 开发模式（不导出）
npm run dev

# 生产构建（静态导出）
npm run build

# 输出目录
dist/

环境变量

必需配置

# .env.production
RESEND_API_KEY=re_xxxxx
COMPANY_EMAIL=contact@novalon.cn

可选配置

NODE_ENV=production
NEXT_PUBLIC_SITE_URL=https://www.novalon.cn

环境变量说明

变量名 必需 描述
RESEND_API_KEY 是 Resend 邮件服务 API 密钥
COMPANY_EMAIL 是 公司接收邮件的邮箱地址
NODE_ENV 否 环境标识
NEXT_PUBLIC_SITE_URL 否 网站公开 URL

部署平台

1. Vercel 部署（推荐）

优势：

  • 零配置部署
  • 自动 HTTPS
  • 全球 CDN
  • 预览部署
  • 边缘函数支持

部署步骤：

  1. 连接 Git 仓库
  2. 配置环境变量
  3. 部署设置：
    • Build Command: npm run build
    • Output Directory: dist
    • Install Command: npm install

vercel.json 配置：

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "nextjs",
  "regions": ["hkg1"]
}

2. 静态文件服务器部署

适用场景：

  • Nginx
  • Apache
  • IIS
  • 云存储（阿里云 OSS、腾讯云 COS）

Nginx 配置示例：

server {
    listen 80;
    server_name www.novalon.cn novalon.cn;
    root /var/www/novalon-website/dist;
    index index.html;

    # 强制 HTTPS
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name www.novalon.cn novalon.cn;
    root /var/www/novalon-website/dist;
    index index.html;

    # SSL 证书
    ssl_certificate /etc/nginx/ssl/novalon.cn.pem;
    ssl_certificate_key /etc/nginx/ssl/novalon.cn.key;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
    ssl_prefer_server_ciphers off;

    # 安全头部
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:;" always;

    # Gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_min_length 1000;

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # HTML 不缓存
    location ~* \.html$ {
        expires -1;
        add_header Cache-Control "no-store, no-cache, must-revalidate";
    }

    # SPA 路由支持
    location / {
        try_files $uri $uri.html $uri/ =404;
    }

    # 404 页面
    error_page 404 /404.html;
}

3. Docker 部署

Dockerfile:

# 构建阶段
FROM node:18-alpine AS builder

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

# 运行阶段
FROM nginx:alpine

# 复制构建产物
COPY --from=builder /app/dist /usr/share/nginx/html

# 复制 Nginx 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

构建和运行：

# 构建镜像
docker build -t novalon-website .

# 运行容器
docker run -d -p 80:80 --name novalon novalon-website

4. 云存储部署

阿里云 OSS：

  1. 创建 OSS Bucket
  2. 配置静态网站托管
  3. 上传 dist/ 目录内容
  4. 配置自定义域名
  5. 配置 HTTPS 证书

腾讯云 COS：

  1. 创建 COS Bucket
  2. 开启静态网站功能
  3. 上传构建产物
  4. 配置 CDN 加速

CI/CD 流水线

Woodpecker CI 配置

# .woodpecker.yml
pipeline:
  install:
    image: node:18-alpine
    commands:
      - npm ci
    when:
      event:
        - push
        - pull_request

  lint:
    image: node:18-alpine
    commands:
      - npm run lint
    when:
      event:
        - push
        - pull_request

  build:
    image: node:18-alpine
    environment:
      NODE_ENV: production
    commands:
      - npm run build
    when:
      event:
        - push
      branch:
        - main

  e2e-tests:
    image: node:18-alpine
    environment:
      NODE_ENV: test
      CI: true
    commands:
      - cd e2e
      - npm ci
      - npx playwright install --with-deps chromium
      - npm run test:smoke
    when:
      event:
        - push
        - pull_request

  deploy:
    image: node:18-alpine
    commands:
      - npm install -g vercel
      - vercel --prod --token=$VERCEL_TOKEN
    secrets:
      - vercel_token
    when:
      event:
        - push
      branch:
        - main

部署检查清单

部署前检查

  • 环境变量已配置
  • 构建成功无错误
  • E2E 测试通过
  • ESLint 检查通过
  • 图片资源已优化
  • 死链检查通过

部署后验证

  • 首页正常加载
  • 所有页面可访问
  • 表单提交正常
  • 移动端适配正常
  • HTTPS 证书有效
  • 性能指标达标
  • SEO 元数据正确

性能指标

指标 目标值
LCP < 2.5s
FID < 100ms
CLS < 0.1
TTFB < 600ms
首屏加载 < 3s

回滚策略

Vercel 回滚

# 列出部署历史
vercel ls

# 回滚到指定版本
vercel rollback [deployment-url]

静态服务器回滚

# 保留历史版本
/var/www/novalon-website/
├── current -> releases/20260307-1
├── releases/
│   ├── 20260307-1/
│   ├── 20260306-1/
│   └── 20260305-1/
└── shared/

# 回滚操作
ln -sfn releases/20260306-1 current

监控与告警

推荐工具

工具 用途
Vercel Analytics 性能监控
Sentry 错误监控
Uptime Robot 可用性监控
Google Search Console SEO 监控

告警配置

# Uptime Robot 配置示例
monitors:
  - name: Novalon Website
    url: https://www.novalon.cn
    type: https
    interval: 300
    alert_contacts:
      - email: admin@novalon.cn

安全配置

安全头部

Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:;
Permissions-Policy: camera=(), microphone=(), geolocation=()

HTTPS 配置

  • 使用 TLS 1.2 或更高版本
  • 配置 HSTS
  • 启用 OCSP Stapling
  • 使用强加密套件

性能优化

构建优化

  1. 代码分割

    • 动态导入非首屏组件
    • 路由级别分割

  2. 资源优化

    • 图片压缩和格式转换
    • CSS 压缩
    • JavaScript 压缩

  3. 缓存策略

    • 静态资源长缓存
    • HTML 不缓存
    • API 响应适当缓存

CDN 配置

# CDN 缓存规则
*.js, *.css    -> 缓存 1 年
*.jpg, *.png   -> 缓存 1 年
*.woff, *.woff2 -> 缓存 1 年
*.html         -> 不缓存

故障排查

常见问题

1. 页面 404 错误

  • 检查静态文件是否正确上传
  • 检查 Nginx 配置的 root 路径
  • 检查 SPA 路由配置

2. 样式加载失败

  • 检查 CSS 文件路径
  • 检查 Content-Security-Policy 配置
  • 清除浏览器缓存

3. 表单提交失败

  • 检查 API 路由是否正常
  • 检查环境变量配置
  • 检查 CORS 配置

4. 性能问题

  • 检查图片是否优化
  • 检查 CDN 是否生效
  • 检查服务器响应时间

日志查看

# Nginx 访问日志
tail -f /var/log/nginx/access.log

# Nginx 错误日志
tail -f /var/log/nginx/error.log

# Vercel 日志
vercel logs [deployment-url]

维护计划

定期任务

任务 频率
依赖更新 每月
安全扫描 每周
性能测试 每周
备份验证 每月
SSL 证书更新 到期前 30 天

更新流程

  1. 创建更新分支
  2. 执行依赖更新
  3. 运行测试套件
  4. 部署到预览环境
  5. 验证功能正常
  6. 合并到主分支
  7. 自动部署到生产环境
Reference in New Issue View Git Blame Copy Permalink