如何使用 npm 并发包同时运行 Nextjs 应用程序和 Express 服务器？

Posted 2023-03-10

【中文标题】如何使用 npm 并发包同时运行 Nextjs 应用程序和 Express 服务器？

【英文标题】：How to run Nextjs app and Express server concurrently using npm concurrently package?

【发布时间】：2021-10-29 06:16:49

【问题描述】：

如何使用npm并发包同时运行Nextjs app和Express server？

我有一个使用 Node Express 作为后端和 NextJs 作为前端创建的项目。我想同时使用 npm 包来使用 npm run dev 启动 Express 服务器和 NextJs 前端。服务器使用 5000 端口，前端使用 3000 端口，文件夹结构如下。 1.

    |-next-bootstrap-express-app.
       |frontend(NextJs App)
            |.env
            |package.json
            |src
       |server.js
       |package.json

package.json(next-bootstrap-express-app)：

   
  "name": "next-bootstrap-express-app",
  "version": "1.0.0",
  "description": "Next Bootstrap Express App",
  "main": "server.js",
  "scripts": 
    "frontend-install": "npm install --prefix frontend",
    "start": "nodemon server.js",
    "server": "nodemon server.js",
    "frontend": "npm start --prefix frontend",
    "dev": "concurrently \"npm run server\" \"npm run frontend\""
  ,
  "author": "test",
  "license": "ISC",
  "dependencies": 
    "bcryptjs": "^2.4.3",
    "config": "^3.3.6",
    "express": "^4.17.1",
    "express-validator": "^6.12.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.0.2",
    "request": "^2.88.2",
    "concurrently": "^6.2.1"
  ,
  "devDependencies": 
    "nodemon": "^2.0.12"
  

如何同时使用 npm 包启动 Nextjs 3000 客户端和 Express Server 使用端口 5000 进行管理。

【参考方案1】：

在您的 next-bootstrap-express-app 目录的 packages.json 文件中，您可以像这样包含您的前端脚本

"frontend": "cd ./frontend && npm run dev"

然后你可以从 next-bootstrap-express-app 目录运行 npm run dev 命令。

【讨论】：

谢谢。添加前端屏幕并在 nextjs 应用的 package.json 中添加代理`"proxy": "localhost:5000"` 对这个问题进行了排序。