博客部署和性能优化指南
博客部署和性能优化指南
本指南将帮你把 Taco 部署到生产环境,并进行性能优化,让你的博客访问速度飞快。
🚀 部署方案选择
1. Vercel 部署(推荐)
Vercel 是 Next.js 的官方部署平台,提供最佳的开发体验。
优势
- ✅ 零配置部署
- ✅ 自动构建和部署
- ✅ 全球 CDN 分发
- ✅ 支持自定义域名
- ✅ 免费额度充足
部署步骤
-
连接 GitHub 仓库
# 推送代码到 GitHub git add . git commit -m "准备部署" git push origin main
-
Vercel 控制台配置
- 访问 vercel.com
- 点击 "New Project"
- 选择你的 GitHub 仓库
- Framework Preset 选择 "Next.js"
-
环境变量配置
# .env.local(生产环境) NEXT_PUBLIC_SITE_URL=https://yourdomain.com NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX # Google Analytics(可选)
-
自动部署
# 每次推送都会自动重新部署 git push origin main
2. Netlify 部署
另一个优秀的静态站点托管平台。
配置文件
创建 netlify.toml
:
[build]
command = "pnpm build"
publish = ".next"
[build.environment]
NODE_VERSION = "18"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
3. 自建服务器部署
使用 Docker 进行容器化部署。
Dockerfile
FROM node:18-alpine AS deps
WORKDIR /app
COPY package*.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install --frozen-lockfile
FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm install -g pnpm && pnpm build
FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
EXPOSE 3000
ENV PORT 3000
CMD ["node", "server.js"]
docker-compose.yml
version: '3.8'
services:
blog:
build: .
ports:
- "3000:3000"
environment:
- NODE_ENV=production
- NEXT_PUBLIC_SITE_URL=https://yourdomain.com
restart: unless-stopped
⚡ 性能优化
1. 图片优化
Next.js Image 组件
确保使用 Next.js 的 Image 组件:
import Image from 'next/image'
// 自动优化的图片组件
<Image
src="/hero-image.jpg"
alt="Hero Image"
width={1200}
height={600}
priority
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
图片格式优化
在 next.config.js
中配置:
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
formats: ['image/webp', 'image/avif'],
domains: [
'images.unsplash.com',
'your-cdn-domain.com'
],
minimumCacheTTL: 60 * 60 * 24 * 30, // 30天缓存
}
}
图片懒加载
<Image
src="/large-image.jpg"
alt="Large Image"
width={800}
height={600}
loading="lazy" // 懒加载
placeholder="blur" // 模糊占位符
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ..."
/>
2. 代码优化
代码分割
// 动态导入组件
import { lazy, Suspense } from 'react'
const HeavyComponent = lazy(() => import('./HeavyComponent'))
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<HeavyComponent />
</Suspense>
)
}
Bundle 分析
# 安装分析工具
npm install --save-dev @next/bundle-analyzer
# 分析构建结果
ANALYZE=true pnpm build
在 next.config.js
中配置:
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer({
// 其他配置
})
3. 缓存策略
静态资源缓存
在 next.config.js
中设置:
const nextConfig = {
async headers() {
return [
{
source: '/images/:path*',
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=31536000, immutable'
}
]
},
{
source: '/(.*)',
headers: [
{
key: 'X-Frame-Options',
value: 'DENY'
},
{
key: 'X-Content-Type-Options',
value: 'nosniff'
}
]
}
]
}
}
ISR(增量静态生成)
// 为文章页面启用 ISR
export async function getStaticProps({ params }) {
const post = await getPost(params.slug)
return {
props: { post },
revalidate: 3600, // 每小时重新生成
}
}
4. 字体优化
预加载关键字体
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
preload: true,
})
export default function RootLayout({ children }) {
return (
<html lang="zh-CN" className={inter.className}>
<body>{children}</body>
</html>
)
}
字体回退策略
/* 在 globals.css 中设置字体回退 */
.font-main {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-display: swap;
}
📊 性能监控
1. Core Web Vitals
确保你的博客通过 Core Web Vitals 指标:
- LCP (Largest Contentful Paint) < 2.5s
- FID (First Input Delay) < 100ms
- CLS (Cumulative Layout Shift) < 0.1
2. 性能监控工具
Lighthouse CI
# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [push]
jobs:
lhci:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- run: npm install && npm run build
- run: npm install -g @lhci/cli@0.11.x
- run: lhci autorun
Real User Monitoring
// 添加到 _app.js 或 layout.js
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals'
function sendToAnalytics(metric) {
// 发送到分析服务
gtag('event', metric.name, {
value: Math.round(metric.value),
metric_id: metric.id,
metric_value: metric.value,
metric_delta: metric.delta,
})
}
// 监控所有重要指标
getCLS(sendToAnalytics)
getFID(sendToAnalytics)
getFCP(sendToAnalytics)
getLCP(sendToAnalytics)
getTTFB(sendToAnalytics)
3. 错误监控
Sentry 集成
npm install @sentry/nextjs
// sentry.client.config.js
import * as Sentry from '@sentry/nextjs'
Sentry.init({
dsn: process.env.SENTRY_DSN,
tracesSampleRate: 1.0,
})
🔒 安全优化
1. 安全头部
// next.config.js
const securityHeaders = [
{
key: 'X-DNS-Prefetch-Control',
value: 'on'
},
{
key: 'Strict-Transport-Security',
value: 'max-age=63072000; includeSubDomains; preload'
},
{
key: 'X-XSS-Protection',
value: '1; mode=block'
},
{
key: 'X-Frame-Options',
value: 'SAMEORIGIN'
},
{
key: 'Permissions-Policy',
value: 'camera=(), microphone=(), geolocation=()'
},
{
key: 'X-Content-Type-Options',
value: 'nosniff'
},
{
key: 'Referrer-Policy',
value: 'origin-when-cross-origin'
}
]
const nextConfig = {
async headers() {
return [
{
source: '/(.*)',
headers: securityHeaders,
}
]
}
}
2. Content Security Policy
const ContentSecurityPolicy = `
default-src 'self';
script-src 'self' 'unsafe-eval' 'unsafe-inline' *.google-analytics.com;
child-src *.youtube.com *.google.com *.twitter.com;
style-src 'self' 'unsafe-inline' *.googleapis.com;
img-src * blob: data:;
media-src 'none';
connect-src *;
font-src 'self' *.gstatic.com;
`;
const securityHeaders = [
{
key: 'Content-Security-Policy',
value: ContentSecurityPolicy.replace(/\n/g, ''),
}
]
🌍 SEO 优化
1. 结构化数据
// 在文章页面添加 JSON-LD
const structuredData = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: post.title,
image: post.banner?.img,
author: {
'@type': 'Person',
name: 'Your Name'
},
publisher: {
'@type': 'Organization',
name: 'Your Blog Name',
logo: {
'@type': 'ImageObject',
url: 'https://yourdomain.com/logo.png'
}
},
datePublished: post.date,
dateModified: post.lastModified || post.date
}
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(structuredData)
}}
/>
)
2. Sitemap 生成
// app/sitemap.xml/route.js
import { MetadataRoute } from 'next'
import { getAllPosts } from '@/lib/posts'
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const posts = await getAllPosts()
const postEntries: MetadataRoute.Sitemap = posts.map((post) => ({
url: `${process.env.NEXT_PUBLIC_SITE_URL}/blog/${post.slug}`,
lastModified: post.lastModified || post.date,
changeFrequency: 'weekly',
priority: 0.7,
}))
return [
{
url: process.env.NEXT_PUBLIC_SITE_URL,
lastModified: new Date(),
changeFrequency: 'daily',
priority: 1,
},
...postEntries,
]
}
📈 Analytics 集成
1. Google Analytics 4
// lib/gtag.js
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID
export const pageview = (url) => {
window.gtag('config', GA_TRACKING_ID, {
page_path: url,
})
}
export const event = ({ action, category, label, value }) => {
window.gtag('event', action, {
event_category: category,
event_label: label,
value: value,
})
}
2. 自定义事件追踪
// 追踪文章阅读时间
useEffect(() => {
const startTime = Date.now()
return () => {
const readTime = Date.now() - startTime
event({
action: 'read_time',
category: 'engagement',
label: post.slug,
value: Math.round(readTime / 1000)
})
}
}, [])
✅ 部署检查清单
部署前确保完成以下检查:
基础检查
- 代码构建无错误
- 所有页面能正常访问
- 响应式设计在各设备上正常
- 图片和资源文件正常加载
性能检查
- Lighthouse 分数 > 90
- 首页 LCP < 2.5s
- 图片已优化(WebP格式)
- 代码已压缩和分割
SEO检查
- 每个页面有独特的 title 和 description
- 添加了 Open Graph 标签
- 生成了 sitemap.xml
- 配置了 robots.txt
安全检查
- 添加了安全头部
- HTTPS 证书配置
- 移除了开发调试代码
- 环境变量正确配置
🎉 部署完成
恭喜!你的 Taco 现在已经部署到生产环境并经过了性能优化。
下一步建议
- 定期监控网站性能
- 设置错误报警
- 备份重要数据
- 定期更新依赖
你的博客现在应该能够提供快速、安全、用户友好的访问体验了!🚀