Docker打包并部署Next.js

前言

前一段时间公司需要快速开发一个AI项目，所以就不需要后端介入，让我们直接Next.js加ORM写出来。这样确实不错，不用对接口，要什么你自己写，大大提升开发效率。

开发好了就需要部署，我就试了试。

跟传统的Web项目有点不一样。传统的 Web 项目在打包部署时，通常会将项目构建（build）生成的静态文件复制到一个 Nginx 容器中。该容器将自身 80 端口映射到宿主机的一个端口，然后宿主机上的 Nginx 实例通过反向代理将外部流量转发到这个宿主机端口，这样用户就可以通过网址来访问了。

Next.js 项目打包后，通常会将 build 阶段生成的 .next 文件夹、public 文件夹以及 package.json 等文件，一起复制到 Node.js 环境的容器中。接着，在容器内执行 npm run start 命令来启动应用。最后，将容器的启动端口（默认是 3000）映射到宿主机的一个端口，并利用宿主机上的 Nginx 实例作为反向代理，将外部流量转发到这个映射的宿主机端口。这样用户就可以通过网址来访问了。

正文

主要的有三个文件 .dockerignore、Dockerfile、docker-compose.yml。在跟目录下传教这个三个文件

.dockerignore文件

.dockerignore 复制代码

.git
.gitignore
node_modules
.next
README.md
Dockerfile
.dockerignore

Dockerfile文件

sh 复制代码

FROM node:20-alpine as builder

WORKDIR /app

#复制package.json文件 和 pnpm-lock.yaml文件
COPY package.json pnpm-lock.yaml ./

RUN npm install -g pnpm

RUN npm config set registry https://registry.npmmirror.com/

#安装依赖
RUN --mount=type=cache,target=/root/.pnpm-store pnpm install

#复制项目文件
COPY . .

#构建项目
RUN pnpm run build

FROM node:20-alpine as runner

WORKDIR /app

RUN npm install -g pnpm

RUN npm config set registry https://registry.npmmirror.com/

ENV NODE_ENV=production

# 从builder复制package.json和lock文件
COPY --from=builder /app/package.json /app/pnpm-lock.yaml /app/.env.production /app/.env ./
# 复制 .next 文件夹
COPY --from=builder /app/.next ./.next
# 复制 public 文件夹
COPY --from=builder /app/public ./public
# 只安装生产依赖
RUN --mount=type=cache,target=/root/.pnpm-store pnpm install --prod

EXPOSE 3000

CMD ["pnpm", "start"]

docker-compose.yml文件

yml 复制代码

version: '3.8'

services:
  nextjs-app:
    build: .
    image: docker-next-app
    container_name: nextjs-app
    ports:
      - 3000:3000
    restart: always

最后，配置Nginx

.conf 复制代码

server {
    # 监听 80 端口，等待 HTTP 请求
    listen 80;
    # 你的域名
    server_name xxx.top;

    location / {
        # 将所有请求反向代理到 Next.js 应用
        # 这里的 3000 是你在 Docker Compose 文件中映射的宿主机端口
        proxy_pass http://localhost:3000;

        # 添加一些必要的请求头，以确保 Next.js 应用能正确处理请求
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

当你更新代码需要发版的时，只需要到服务器拉取项目代码，然后运行docker compose up -d --build。你嫌弃麻烦可以写一个脚本，这样只需要运行那个脚本就可以了。还可以用现成的部署工具可以看这篇文章国产 Dev/Ops 工具 Jpom 的前端项目自动化部署实践，只要点击一下按钮就可以了。

结语

感兴趣的可以去试试