Next.js 14 部署运维：从开发到生产的最佳实践

最新推荐文章于 2025-10-26 23:44:05 发布

原创

最新推荐文章于 2025-10-26 23:44:05 发布 · 640 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能 #前端 #React

在完成 Next.js 14 应用的开发后，如何将其高效地部署到生产环境并进行可靠的运维管理是一个关键问题。本文将详细介绍 Next.js 14 的部署策略和运维最佳实践。

部署准备工作

1. 环境配置管理

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    API_URL: process.env.API_URL,
    DATABASE_URL: process.env.DATABASE_URL,
    REDIS_URL: process.env.REDIS_URL,
  },
  // 生产环境特定配置
  productionBrowserSourceMaps: false,
  compress: true,
  poweredByHeader: false,
};

module.exports = nextConfig;

// .env.local
API_URL=http://localhost:3000
DATABASE_URL=postgresql://user:password@localhost:5432/mydb

// .env.production
API_URL=https://api.production.com
DATABASE_URL=postgresql://user:password@production:5432/mydb

2. 构建优化配置

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone', // 生成独立部署包

  experimental: {
    optimizeCss: true,
    turbotrace: {
      logLevel: 'error',
      contextDirectory: __dirname,
    },
  },

  // 静态资源优化
  images: {
    domains: ['assets.example.com'],
    loader: 'default',
    minimumCacheTTL: 60,
  },
};

module.exports = withBundleAnalyzer(nextConfig);

Docker 容器化部署

1. 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.config.js ./
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"]

2. Docker Compose 配置

# docker-compose.yml
version: '3.8'

services:
  nextjs:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NOD

最低0.47元/天解锁文章