使用Docker部署Next.js项目

在之前的文章中，我们使用Docker部署了Spring Boot项目，本节，我们将演示如何从项目打包开始，部署一个Next.js项目。

1.什么是Next.js?

Next.js 是一个基于 React 的开源框架，用于构建服务器端渲染（SSR）和静态生成（SSG）的现代 Web 应用程序。它由 Vercel 公司开发和维护，旨在简化 React 应用的开发流程，提供开箱即用的功能，如路由、数据获取、API 路由、代码拆分、静态导出等。

也就是说，它和传统的Web前端项目不同，传统Web项目往往是可以打包成静态页面的，可以直接访问Index.html。但是Next.js不行，它的生产环境同样需要依赖于Node.js，因为它不仅仅是一个静态页面生成器，还支持服务器端渲染（SSR）和动态路由等功能。这些功能需要在服务器端运行 JavaScript 代码，因此需要 Node.js 环境来支持。

1.项目准备

如果没有项目，请先去创建一个项目，我没开玩笑:)

2.项目上传

将源码上传至服务器，如果你不会，请先去学习如何上传文件到服务器:)
至于项目文件放在哪里，可以自行选择，因为不会作为运行目录，只作存储。

3.镜像构建

编写Dockerfile，这里使用官方提供的或者自定义一下都可以

复制
1# 指定 Dockerfile 语法版本
2# syntax=docker.io/docker/dockerfile:1
3
4# 使用 node:18-alpine 作为基础镜像
5FROM node:18-alpine AS base
6
7# 仅在需要时安装依赖
8FROM base AS deps
9# 参考 https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine 了解为什么可能需要 libc6-compat
10RUN apk add --no-cache libc6-compat
11WORKDIR /app
12
13# 根据首选的包管理器安装依赖
14COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
15RUN \
16  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
17  elif [ -f package-lock.json ]; then npm ci; \
18  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
19  else echo "未找到锁文件。" && exit 1; \
20  fi
21
22# 仅在需要时重新构建源代码
23FROM base AS builder
24WORKDIR /app
25COPY --from=deps /app/node_modules ./node_modules
26COPY . .
27
28# Next.js 会收集完全匿名的遥测数据以了解一般使用情况。
29# 了解更多信息：https://nextjs.org/telemetry
30# 如果你想在构建期间禁用遥测，请取消注释以下行。
31# ENV NEXT_TELEMETRY_DISABLED=1
32
33RUN \
34  if [ -f yarn.lock ]; then yarn run build; \
35  elif [ -f package-lock.json ]; then npm run build; \
36  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
37  else echo "未找到锁文件。" && exit 1; \
38  fi
39
40# 生产环境镜像，复制所有文件并运行 Next.js
41FROM base AS runner
42WORKDIR /app
43
44ENV NODE_ENV=production
45# 如果你想在运行时禁用遥测，请取消注释以下行。
46# ENV NEXT_TELEMETRY_DISABLED=1
47
48RUN addgroup --system --gid 1001 nodejs
49RUN adduser --system --uid 1001 nextjs
50
51COPY --from=builder /app/public ./public
52
53# 自动利用输出跟踪来减少镜像大小
54# 参考：https://nextjs.org/docs/advanced-features/output-file-tracing
55COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
56COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
57
58USER nextjs
59
60EXPOSE 3000
61
62ENV PORT=3000
63
64# server.js 是由 Next.js 构建生成的独立输出文件
65# 参考：https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
66ENV HOSTNAME="0.0.0.0"
67CMD ["node", "server.js"]
68
69

执行构建命名

复制
1                镜像名称      项目根目录以及Dockerfile的位置
2docker build -t aisfox-blog /www/www_root/www.aisfox.com
3

4.容器构建

复制
1               端口映射   镜像名称
2docker run -p 3000:3000 aisfox-blog
3

5.END

结束了，就这么简单:)