236 lines
4.5 KiB
Markdown
236 lines
4.5 KiB
Markdown
---
|
||
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 应用现在已经成功部署到生产环境。
|
||
```
|