---
title: '部署指南'
description: '了解如何将 MultiSite 部署到各种平台'
date: '2024-01-18'
author: 'MultiSite Team'
category: '部署'
tags: ['部署', 'Vercel', 'Netlify', '服务器']
---

# 部署指南

本指南将介绍如何将 MultiSite 部署到不同的平台和环境。

## 构建准备

在部署之前，确保您的项目已经准备就绪：

### 1. 环境变量配置

创建生产环境的环境变量：

```env:
NEXT_PUBLIC_SITE_URL=https://your-production-domain.com
NEXT_PUBLIC_DEFAULT_LANG=zh-CN
NODE_ENV=production
2. 构建测试
在本地测试生产构建：

npm run build
npm run start
Run command
3. 性能优化
确保已启用所有性能优化选项：

// next.config.mjs
const nextConfig = {
  output: 'export', // 静态导出
  trailingSlash: true,
  images: {
    unoptimized: true // 静态导出时需要
  }
};
Vercel 部署
Vercel 是部署 Next.js 应用的最佳选择。

1. 通过 Git 部署
将代码推送到 GitHub/GitLab/Bitbucket
在 Vercel 创建账户
导入您的仓库
配置环境变量
部署
2. 通过 CLI 部署
# 安装 Vercel CLI
npm i -g vercel

# 登录
vercel login

# 部署
vercel --prod
Run command
3. 自定义域名
在 Vercel 控制台中：

进入项目设置
点击 "Domains"
添加您的自定义域名
配置 DNS 记录
Netlify 部署
1. 构建配置
创建 netlify.toml：

[build]
  command = "npm run build"
  publish = "out"

[build.environment]
  NODE_VERSION = "18"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
2. 部署步骤
在 Netlify 创建账户
连接您的 Git 仓库
配置构建设置
部署
传统服务器部署
1. 使用 PM2
# 安装 PM2
npm install -g pm2

# 构建项目
npm run build

# 启动应用
pm2 start npm --name "multisite" -- start

# 保存 PM2 配置
pm2 save
pm2 startup
Run command
2. Nginx 配置
server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}
3. SSL 配置
使用 Let's Encrypt：

# 安装 Certbot
sudo apt install certbot python3-certbot-nginx

# 获取 SSL 证书
sudo certbot --nginx -d your-domain.com

# 自动续期
sudo crontab -e
# 添加: 0 12 * * * /usr/bin/certbot renew --quiet
Run command
Docker 部署
1. Dockerfile
FROM node:18-alpine AS base

# 安装依赖
FROM base AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci --only=production

# 构建应用
FROM base AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN npm run build

# 运行时
FROM base AS runner
WORKDIR /app
ENV NODE_ENV production

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000
ENV PORT 3000

CMD ["node", "server.js"]
2. Docker Compose
version: '3.8'
services:
  multisite:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - NEXT_PUBLIC_SITE_URL=https://your-domain.com
    restart: unless-stopped
CDN 配置
1. Cloudflare
添加您的域名到 Cloudflare
配置 DNS 记录
启用 CDN 和缓存
配置 SSL/TLS
2. 缓存策略
// next.config.mjs
const nextConfig = {
  async headers() {
    return [
      {
        source: '/images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable'
          }
        ]
      }
    ];
  }
};
监控和分析
1. 性能监控
// 添加到 _app.tsx
export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    console.log(metric);
    // 发送到分析服务
  }
}
2. 错误监控
集成 Sentry：

npm install @sentry/nextjs
Run command
// sentry.client.config.js
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  environment: process.env.NODE_ENV
});
部署检查清单
 环境变量已配置
 构建成功无错误
 性能优化已启用
 SSL 证书已配置
 CDN 已设置
 监控已集成
 备份策略已制定
 域名已配置
 SEO 设置已完成
恭喜！您的 MultiSite 应用现在已经成功部署到生产环境。
```