1 宝塔面板部署NextJS项目

本文详细记录如何使用宝塔面板部署NextJS项目。

1.1 上传NextJS项目代码

将需要部署的NextJS项目代码上传到服务器中,在/www/wwwroot/目录下新建一个目录用于存放你的NextJS项目代码,这里需要注意的是.nextnode_modules不要上传。

1.2 宝塔面板安装NodeJS

宝塔面板切换到 网站 - Node项目 - Node版本管理器,如下图所示

宝塔面板 – 部署NextJS项目-StubbornHuang Blog

在Node版本管理器中安装NextJS所对应的NodeJS版本。

宝塔面板 – 部署NextJS项目-StubbornHuang Blog

1.3 部署NextJS项目

宝塔面板切换到 网站 - Node项目,点击添加Node项目,

宝塔面板 – 部署NextJS项目-StubbornHuang Blog

由于 next 项目需要先build然后再start,我们需要将这两个命令进行合并,取名production,修改nextjs项目的package.json,增加production定义,示例改动如下:

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "production": "next build && next start -p 19996"
  }

增加的就是production这一行,指定项目端口为19996,修改完成之后保存。然后在添加Node项目中会自动识别我们所设置的production启动选项,如下图所示。

宝塔面板 – 部署NextJS项目-StubbornHuang Blog

然后设置项目真实端口,点击确定,如果nodejs版本正确并且项目代码没有问题,则会在指定端口启动nextjs项目,等待项目启动会完成之后则直接在设置页面配置域名以及反向代理,即可在外网进行访问。

参考链接