MultiSite/content/en/configuration.md

236 lines
4.5 KiB
Markdown
Raw Permalink Normal View History

2025-09-12 17:03:28 +08:00
---
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 应用现在已经成功部署到生产环境。
```