Next.js standalone模式打包
部署文件准备清单
需要把以下 3 个部分 复制到服务器的同一个目录(例如 /var/www/my-app)中。
1. 核心运行文件 (Standalone)
- 来源: 项目根目录 standalone 文件夹内的所有内容。
- 目标: 服务器部署目录根目录。
- 说明: 这包含了
server.js、package.json 和精简后的 node_modules。
- 说明: 这包含了
2. 静态资源文件 (Static)
- 来源: 项目根目录 static 文件夹。
- 目标: 服务器部署目录下的 static。
- 说明: 必须手动拷贝。否则页面没有 CSS 样式,JS 交互也会失效。
3. 公共资源文件 (Public)
- 来源: 项目根目录 public 文件夹。
- 目标: 服务器部署目录下的 public。
- 说明: 必须手动拷贝。你的地图文件
/maps/china.json就住在这里,不拷过去地图会报 404。
- 说明: 必须手动拷贝。你的地图文件
一键准备命令 (在本地项目根目录执行)
可以直接在终端运行下面这组命令,它会自动把所有需要的文件汇总到 standalone 文件夹里,打包成一个可以直接部署的成品:
# 1. 也是最关键的一步:先把 .next/static 复制进去
# (如果 .next/standalone/.next 不存在请先创建它)
mkdir -p .next/standalone/.next
cp -r .next/static .next/standalone/.next/
# 2. 把 public 文件夹复制进去
cp -r public .next/standalone/
# --- 至此,.next/standalone 已经是一个完整的部署包了 ---
# (可选) 3. 可以在本地测试一下是否正常运行
# cd .next/standalone
# node server.js
服务器上的最终目录结构
部署完成后,你的服务器目录结构应该是这样的,缺一不可:
/var/www/my-app/ <-- 部署根目录
├── server.js <-- 启动文件
├── package.json
├── .env <-- (如果有环境变量)
├── node_modules/ <-- (自动生成)
├── .next/
│ ├── server/ <-- (自动生成)
│ └── static/ <-- 🟢 [重要] 里面是 css/js 文件
└── public/ <-- 🟢 [重要] 里面是 maps/china.json
启动服务
node server.js
默认端口 3000。访问页面,地图应该能正常显示了。
