Next.js第十七课 - 部署

前面我们学习了很多 Next.js 的功能和特性，本节来聊聊部署。把应用部署到生产环境是开发流程的最后一步，也是让用户能够访问你应用的关键步骤。

部署概述

Next.js 可以部署到多个平台：

Vercel - 官方平台，零配置
自托管 - Node.js 服务器
Docker - 容器化部署
静态导出 - 纯静态托管
其他平台 - Netlify、Railway、AWS 等

Vercel 是 Next.js 的官方平台，提供最佳的性能和体验。

准备部署

构建应用

在部署前，先在本地测试构建：

bash 复制代码

# 安装依赖
npm install

# 构建生产版本
npm run build

# 测试生产版本
npm start

环境变量

创建 .env.production：

env 复制代码

# 数据库
DATABASE_URL=postgresql://...

# API 密钥
API_KEY=your_production_api_key
API_SECRET=your_production_secret

# 应用配置
NEXT_PUBLIC_APP_URL=https://yourdomain.com

检查清单

部署前检查：

所有环境变量都已配置
构建成功无错误
生产环境下测试正常
数据库迁移已完成
静态资源（图片、字体）已优化

部署到 Vercel

安装 Vercel CLI

bash 复制代码

npm install -g vercel

登录 Vercel

bash 复制代码

vercel login

部署项目

bash 复制代码

vercel

按照提示操作，Vercel 会自动：

检测项目类型（Next.js）
构建项目
部署到边缘网络
提供一个 HTTPS URL

配置环境变量

在 Vercel 控制台中配置环境变量：

进入项目设置
找到 Environment Variables
添加所有环境变量
重新部署项目

自定义域名

在 Vercel 控制台中添加自定义域名：

进入项目设置
找到 Domains
添加你的域名
按照提示配置 DNS

部署到其他平台

部署到 Netlify

创建 netlify.toml：

toml 复制代码

[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

部署到 Railway

Railway 支持 Docker 和直接部署，推荐使用 Docker：

dockerfile 复制代码

# Dockerfile
FROM node:20-alpine AS base

# Install dependencies only when needed
FROM base AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# Production image, copy all the files and run next
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"]

部署到 Docker

构建 Docker 镜像：

bash 复制代码

docker build -t my-nextjs-app .

运行容器：

bash 复制代码

docker run -p 3000:3000 my-nextjs-app

自托管

如果你有自己的服务器，可以自托管 Next.js 应用。

使用 standalone 模式

在 next.config.js 中启用 standalone 模式：

javascript 复制代码

module.exports = {
  output: 'standalone',
}

构建后，会生成一个独立的服务器：

bash 复制代码

npm run build

启动服务器：

bash 复制代码

node .next/standalone/server.js

使用 PM2 管理进程

安装 PM2：

bash 复制代码

npm install -g pm2

启动应用：

bash 复制代码

pm2 start .next/standalone/server.js --name my-nextjs-app

静态导出

如果你的应用完全是静态的，可以导出为静态 HTML。

配置静态导出

在 next.config.js 中配置：

javascript 复制代码

module.exports = {
  output: 'export',
  images: {
    unoptimized: true,
  },
}

构建静态站点

bash 复制代码

npm run build

构建完成后，out 目录包含所有静态文件，可以部署到任何静态托管服务。

部署到静态托管

部署到 Nginx、Apache、GitHub Pages、Netlify 等静态托管服务。

性能优化

启用压缩

在 next.config.js 中启用压缩：

javascript 复制代码

module.exports = {
  compress: true,
}

配置 CDN

Vercel 默认提供 CDN，其他平台需要手动配置。

监控性能

使用 Vercel Analytics 或其他监控工具：

tsx 复制代码

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

CI/CD

GitHub Actions

创建 .github/workflows/deploy.yml：

yaml 复制代码

name: Deploy to Vercel

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}
          vercel-args: '--prod'

实用建议

这里分享几个在部署应用时特别有用的技巧。

使用环境变量

实际开发中,使用环境变量管理敏感信息是最基本也最重要的实践:

env 复制代码

# 推荐这样做 - 使用环境变量
DATABASE_URL=postgresql://...
API_KEY=secret_key

# 避免这种情况 - 硬编码敏感信息非常危险

定期备份

这里有个小建议:定期备份数据库和重要文件,这个习惯能在关键时刻救你一命。

监控应用

这个技巧特别有用------使用日志和监控工具跟踪应用状态,能帮你快速发现和解决问题。

安全配置

最后分享几个安全方面的建议:

始终使用 HTTPS
正确配置 CORS
设置 CSP 头增强安全性
定期更新依赖包修复漏洞

总结

本节我们学习了 Next.js 应用的部署方法，包括 Vercel、自托管、Docker、静态导出等。选择合适的部署方式取决于你的需求和预算。Vercel 是最简单的选择，自托管提供更多控制权。

到这里，我们的 Next.js 教程就结束了。如果你对任何内容有疑问，欢迎在评论区提出来，我们一起学习讨论。祝你在 Next.js 的学习之路上越走越远！

原文地址： blog.uuhb.cn/archives/ne...