前言

前面提到nextjs是一个基于react的全栈框架，能够实现ssr的服务端渲染。

本章重点讲解如何将next项目使用docker引擎本地部署next的【服务端渲染版】程序。

一、前提条件：

1.（必要）首先你的电脑安装了docker，可以通过dos界面或者powershell查看：

2.（可选）检查是否安装了docker desktop，这个只是一个图形化监控软件，取消docker命令操作而已，熟悉docker命令的可以直接使用命令操作：

3.（可选）检查是否配置了镜像加速器，为后面在进行docker操作的时更高效。

（1）找到电脑上的.docker目录中的daemon.json的文件（通常在C://Users/admin/.docker/）。

（2）打开daemon.json文件后，添加镜像的配置参数registry-mirrors，可用记事本编辑。

（3）这里使用的是个人阿里云镜像加速器的id号，这个可以在阿里云平台复制下来，配置之后保存然后重启docker即可。

4.（必要）确保电脑安装了node环境

5.（必要）确保能够执行npx命令并成功创建next项目到本地，例如：

npx create-next-app my-nextjs-project

二、实现流程

1.创建一个next项目（过程省略），以下是示例项目的目录结构：

2.确保nextConfig中的output选项是standalone

2.创建Dockerfile文件，大小写都可以（dockerfile也行）

3.在Dockerfile文件中补充内容，docker构建镜像过程中会一行一行执行（示例）：

# 第一阶段：依赖安装和构建
FROM node:18-alpine AS builder

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 其他配置文件
COPY package.json ./
COPY tsconfig.json ./
COPY next.config.mjs ./
COPY postcss.config.mjs ./
COPY tailwind.config.ts ./
COPY uno.config.ts ./

# 安装依赖
RUN yarn install

# 复制源代码
COPY src ./src
COPY styles ./styles

# 创建空的 public 目录（如果不需要可以删除这部分）
RUN mkdir -p public

# 创建生产环境配置文件（如果需要的话）
RUN echo "NODE_ENV=production" > .env.production

# 构建应用
RUN yarn build

# 第二阶段：生产环境
FROM node:18-alpine 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

# 启动命令
CMD ["node", "server.js"]

4.打开终端，做几个命令操作：
（1）cd到项目所在目录（示例）。

cd E:\项目文件\api-platform\api-server

（2）可以查看此时的镜像列表images。

docker images

（3）开始基于当前项目目录构建镜像image，【api-server】是【自定义的镜像名称】。

docker build -t api-server

（4）等待构建完成之后，运行镜像的容器即可，运行命令：

docker run -d -p 3005:3000 api-server

  3005是自定义端口，3000是next程序端口。

三、结果测试

1.如果第一次直接构建报错，可以先pull下来node:18-alpine。

docker pull node:18-alpine

2.构建完成之后，当运行终端显示如下情况说明构建成功！

3.运行命令后，可以查看容器状态，确保容器运行无误后，之后即可成功访问https://localhost:3005打开该next项目的网站了：

docker run -d -p 3005:3000 api-server

docker ps

https://localhost:3005

到这里，一个next项目的本地docker部署+运行就完成了！！！