Logo
Published on

Next.js 入门到进阶：(八) 部署

Authors
  • avatar
    Name
    xiaobai
    Twitter

将辛辛苦苦开发的应用部署上线，是激动人心的最后一步。Next.js 应用的部署非常灵活，可以适应各种托管环境。

1. 部署到 Vercel (推荐)

Vercel 是 Next.js 的缔造者，因此它为 Next.js 提供了无与伦比的、开箱即用的支持。将 Next.js 应用部署到 Vercel 是最简单、最高效的方式。

Vercel 的优势:

  • 零配置部署: 只需将你的 Git 仓库（GitHub, GitLab, Bitbucket）连接到 Vercel，它会自动检测到你的项目是 Next.js 应用，并进行最佳配置。
  • 全球 CDN: 你的应用会被自动部署到 Vercel 的全球边缘网络 (Edge Network)，确保全球用户都有极快的访问速度。
  • 自动 CI/CD: 当你向 Git 仓库推送代码时，Vercel 会自动构建和部署你的应用。每次 Pull Request 还会生成一个独立的预览 URL，方便团队协作和审查。
  • 完美支持所有特性: Vercel 原生支持 Next.js 的所有功能，包括 SSG, SSR, ISR, API 路由, 图片优化等。

Vercel 部署步骤

  1. 注册 Vercel: 使用你的 GitHub, GitLab 或 Bitbucket 账号在 Vercel 官网 注册。
  2. 导入项目: 在 Vercel 的仪表盘上，点击 "Add New... -> Project"，选择你想要部署的 Git 仓库。
  3. 配置项目 (可选): Vercel 会自动识别出你的项目是 Next.js，并填充好所有构建命令 (npm run build) 和设置。通常你无需做任何修改，直接点击 "Deploy" 即可。
  4. 完成: 等待几分钟，Vercel 就会完成构建和部署，并为你生成一个公开的 URL。大功告成！

2. 部署为 Node.js 服务器

如果你的公司有自己的服务器或使用其他云服务商 (AWS, Google Cloud, Azure)，你可以将 Next.js 应用作为一个独立的 Node.js 服务来运行。

构建应用

首先，你需要为生产环境构建你的应用：

npm run build

这个命令会在 .next 目录下生成一个优化过的、可用于生产的版本。

启动服务

构建完成后，使用 npm start 来启动 Node.js 服务器：

npm start

这会在默认的 3000 端口启动一个高性能的 HTTP 服务器来运行你的 Next.js 应用。

你需要确保服务器环境已经安装了 Node.js。通常，你会使用 PM2 或其他进程管理工具来确保你的 Node.js 服务能够稳定运行和自动重启。

3. 使用 Docker 进行容器化部署

对于更复杂的部署环境，特别是涉及微服务和容器编排（如 Kubernetes）的场景，使用 Docker 是一个非常好的选择。

创建 Dockerfile

在你的项目根目录下创建一个 Dockerfile 文件：

# 1. 安装依赖
FROM node:18-alpine AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install

# 2. 构建应用
FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# 3. 运行应用
FROM node:18-alpine AS runner
WORKDIR /app

ENV NODE_ENV=production

# 自动复制 next.config.js, public, .next 目录
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"]

注意: 为了让 standalone 输出模式正常工作，你需要在 next.config.js 中启用它：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone', // 启用此选项
};

module.exports = nextConfig;

构建并运行 Docker 镜像

# 构建镜像
docker build -t my-nextjs-app .

# 运行容器
docker run -p 3000:3000 my-nextjs-app

现在，你的 Next.js 应用就在 Docker 容器中运行了，可以通过 http://localhost:3000 访问。

总结与展望

你已经完成了从零开始学习 Next.js 的全部核心内容！回顾一下我们的旅程：

  • 了解了 Next.js 的核心理念和优势。
  • 掌握了基于 App Router 的路由、布局和导航。
  • 学会了如何使用 Tailwind CSS 和 CSS Modules 美化应用。
  • 深入理解了服务端组件和客户端组件的数据获取策略 (SSG, SSR, ISR)。
  • 学会了创建 API 路由，构建全栈应用。
  • 最后，掌握了将应用部署到 Vercel 或其他平台的多种方法。

Next.js 的世界远不止于此，还有许多高级主题等待你去探索，例如：中间件 (Middleware)、高级路由、状态管理、测试等等。

但现在，你已经拥有了坚实的基础，完全有能力去构建和交付高质量的、现代化的 Web 应用。

继续编码，不断创造！