Yasin

Yasin

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。访问页面,地图应该能正常显示了。