部署Next.js开发的工具网站Utils.fun

一个 Next.js 16 项目的构建输出，显示构建成功。部署方式取决于你想部署到哪里。以下是几种常见的部署方案：

1. Vercel 部署（最简单，推荐）

Vercel 是 Next.js 的官方托管平台，支持所有 Next.js 特性：

# 安装 Vercel CLI
npm i -g vercel

# 部署
vercel --prod

或者连接 GitHub 仓库自动部署。

2. 静态导出（Static Export）

如果你的项目不需要服务端功能，可以导出为静态文件：

next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  distDir: 'dist',
}

module.exports = nextConfig

然后重新构建：

npm run build
# 生成 dist 文件夹，可部署到任何静态托管服务

3. Node.js 服务器部署

保留服务端渲染功能，使用 next start：

# 构建
npm run build

# 启动生产服务器
npm start

使用 PM2 管理进程：

npm i -g pm2
# 先进入项目目录
cd D:\Users\Desktop\prjs\utils.fun
# 然后执行 PM2 启动
pm2 start npm --name "utils.fun" -- start

4. Docker 部署

创建 Dockerfile：

FROM node:20-alpine AS base

# 安装依赖
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package*.json ./
RUN npm ci

# 构建
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# 运行
FROM base 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
ENV HOSTNAME="0.0.0.0"

CMD ["node", "server.js"]

注意： 需要先在 next.config.js 中启用 standalone 输出：

const nextConfig = {
  output: 'standalone',
}

5. Nginx 反向代理（生产环境常用）

如果你用 PM2 或 Docker 运行在本地端口，用 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_cache_bypass $http_upgrade;
    }
}

快速选择

场景	推荐方案
个人项目/快速上线	Vercel
纯静态网站	`output: 'export'` + CDN
需要 SSR/API Routes	`next start` + PM2/Docker
企业级生产环境	Docker + K8s/Nginx

常用 PM2 命令

# 查看运行状态
pm2 status

# 查看日志
pm2 logs utils.fun

# 重启
pm2 restart utils.fun

# 停止
pm2 stop utils.fun

# 删除
pm2 delete utils.fun

# 保存配置（开机自启）
pm2 save
pm2 startup

更健壮的 ecosystem 配置（推荐）

创建 ecosystem.config.js 文件：

module.exports = {
  apps: [{
    name: 'utils.fun',
    cwd: 'D:\\Users\\Desktop\\prjs\\utils.fun',  // 项目绝对路径
    script: 'npm',
    args: 'start',
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: '1G',
    env: {
      NODE_ENV: 'production',
      PORT: 3000
    },
    // Windows 下建议加上这个
    exec_mode: 'fork',
    // 日志路径
    error_file: './logs/err.log',
    out_file: './logs/out.log',
    log_date_format: 'YYYY-MM-DD HH:mm:ss Z'
  }]
}

然后运行：

pm2 start ecosystem.config.js

这样配置更清晰，也方便管理。

pm2 save + pm2 startup 配置好后，服务器开机会自动启动项目，但需要注意几个细节：

工作原理

表格

命令	作用
`pm2 save`	保存当前运行的应用列表到 `~/.pm2/dump.pm2`
`pm2 startup`	生成系统启动脚本，让 PM2 随系统开机

系统开机时：

PM2 服务自动启动
PM2 读取 dump.pm2 中保存的应用列表
自动重启所有保存的应用（包括你的 utils.fun）

⚠️ 关键点：PM2 会记住工作目录

当你运行 pm2 start 时，PM2 会记录：

启动命令 (npm start)
工作目录 (cwd: D:\Users\Desktop\prjs\utils.fun)
环境变量等

所以开机自启时，不需要你手动进入目录，PM2 会自动在正确的目录下启动。

Windows 下的完整配置步骤

# 1. 进入项目目录（首次配置时需要）
cd D:\Users\Desktop\prjs\utils.fun

# 2. 确保项目已构建
npm run build

# 3. 用 PM2 启动项目
pm2 start npm --name "utils.fun" -- start

# 4. 保存应用列表
pm2 save

# 5. 生成开机启动脚本（需要管理员权限）
pm2 startup windows

执行 pm2 startup windows 后，会提示你运行一条命令（复制粘贴执行即可）：

# 示例输出（以实际提示为准）
pm2-startup install

验证配置是否成功

# 查看已保存的应用列表
pm2 resurrect --dry-run

# 或者查看 dump 文件内容
cat $env:USERPROFILE\.pm2\dump.pm2

如果搬家/迁移项目

如果项目目录变了，需要重新配置：

# 删除旧配置
pm2 delete utils.fun

# 在新目录重新启动并保存
cd 新路径\utils.fun
pm2 start npm --name "utils.fun" -- start
pm2 save

总结

问题	答案
开机自动启动？	✅ 是
自动进入项目目录？	✅ 是，PM2 记录了 `cwd`
需要手动干预？	❌ 不需要，完全自动
重启后没启动？	检查 `pm2 logs` 或重新执行 `pm2 startup`