10.2.3 Next.js 项目怎么部署——Next.js 部署示例：生产构建与端口配置

Next.js 部署的核心：先构建，后运行。

部署流程概览

步骤一：编写 Dockerfile

在项目根目录创建 Dockerfile：

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app

# 安装依赖
COPY package*.json ./
RUN npm ci

# 复制源码并构建
COPY . .
RUN npm run build

# 生产阶段
FROM node:18-alpine AS runner
WORKDIR /app

ENV NODE_ENV=production

# 复制构建产物
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

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

关键配置说明

配置	作用
AS builder	多阶段构建，减小最终镜像体积
npm ci	比 npm install 更快更可靠
standalone	Next.js 13+ 的独立输出模式

启用 Standalone 模式

在 next.config.js 中添加：

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

module.exports = nextConfig

步骤二：构建并推送镜像

本地构建

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

# 测试运行
docker run -p 3000:3000 my-nextjs-app:v1.0.0

推送到镜像仓库

# 登录阿里云镜像仓库
docker login registry.cn-hangzhou.aliyuncs.com

# 打标签
docker tag my-nextjs-app:v1.0.0 registry.cn-hangzhou.aliyuncs.com/your-namespace/my-nextjs-app:v1.0.0

# 推送
docker push registry.cn-hangzhou.aliyuncs.com/your-namespace/my-nextjs-app:v1.0.0

镜像仓库选择

• 阿里云 ACR：国内访问快，免费额度
• 腾讯云 TCR：与腾讯云服务集成好
• Docker Hub：国际通用，国内访问慢

步骤三：在 1Panel 中部署

创建容器配置

配置项	值	说明
镜像	registry.cn-hangzhou.aliyuncs.com/xxx/my-nextjs-app:v1.0.0	完整镜像地址
容器名	nextjs-frontend	便于识别
端口映射	3000:3000	外部:内部
重启策略	always	崩溃自动重启

环境变量配置

变量名	值	说明
NODE_ENV	production	生产模式
NEXT_PUBLIC_API_URL	https://api.example.com	后端 API 地址

健康检查配置

配置项	值
检查方式	HTTP GET
路径	/api/health 或 /
端口	3000
间隔	30s
超时	10s

步骤四：配置反向代理

在 1Panel 的 网站 → 网站 中创建反向代理：

配置项	值
域名	www.example.com
代理地址	127.0.0.1:3000
HTTPS	开启，申请免费证书

Nginx 配置示例

server {
    listen 80;
    server_name www.example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name www.example.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    location / {
        proxy_pass http://127.0.0.1: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;
    }
}

验证部署

检查容器状态

# 查看容器日志
docker logs nextjs-frontend

# 查看容器状态
docker ps | grep nextjs

测试访问

# 本地测试
curl http://localhost:3000

# 域名测试
curl https://www.example.com

常见问题

问题	原因	解决方案
启动失败	缺少 standalone 配置	添加 output: 'standalone'
静态资源 404	未复制 static 目录	检查 Dockerfile COPY 命令
环境变量不生效	使用了 NEXT_PUBLIC_ 前缀	构建时注入，或改用服务端变量
内存溢出	内存不足	增加服务器内存或优化代码

AI 协作指南

向 AI 描述 Next.js 部署问题时：

我的 Next.js 应用部署后访问显示 502，
使用 App Router，Next.js 版本 14.x，
容器日志显示：[具体错误信息]
请帮我分析原因。

关键术语：standalone、多阶段构建、反向代理、NEXT_PUBLIC_ 环境变量