部署完整堆栈节点应用程序npm / package.json体系结构

Question

我有一个包含后端（Node / Express）和前端客户端的存储库 ，如下所示：

├── build
├── config
├── coverage
│   └── lcov-report
├── dist
│   └── static
├── server (node/express server)
│   ├── coverage
│   ├── docs
|   ├── src
│   ├── etc
│   └── package.json
|
├── src (Vue.js : client code)
│   ├── api
│   ├── assets
│   ├── components
│   ├── router
│   └── store
└── static
└── package.json

我有两个package.json文件，一个用于客户端，另一个用于服务器。

1. 我面临着在Heroku等服务上部署的问题，因为他们不希望在一个存储库中有两个不同的npm包（我认为）。 如何使用此设置部署到Heroku（或其他人）？
2. 为应用程序的两个部分提供1个package.json文件会更明智吗？

在同一个package.json中同时拥有前端和后端部分的优点和缺点是什么？

Answer 1

您可以使用heroku-postbuild并在您推送到Heroku的单个git 仓库中为您的客户端和服务器维护单独的package.json文件。

例如，在我的一个项目中，目录结构如下所示：

|-- package.json (for node/express server)
|-- Procfile
|-- www
    |--client
       |-- package.json (for Ionic/Angular client app)
       |-- ...
    |--server
       |--- ...
    |-- server.js (top level node.js/express script for server)

在我的顶级package.json中，我有：

"scripts": {
    "start": "node www/server.js",
    "heroku-postbuild": "cd www/client && npm install && npm run build"
 },

在我的客户端package.json中我有：

 "scripts": {
    "build": "ionic-app-scripts build",
    ...
 },

最后在我的Procfile中我有：

web: npm start

使用此解决方案，Heroku运行我的服务器并在每个Heroku构建上构建我的客户端代码。

我认为客户端和服务器package.jsons应该保持独立，原因有几个。 首先，您真的不希望所有服务器端代码都捆绑到您的客户端。

Answer 2

我有一个类似的问题部署到heroku。 我使用一个名为concurrently的包通过服务器端package.json中的启动脚本启动客户端和服务器端。 我还使用node的内置代理功能，通过向客户端package.json添加一行，将任何请求从客户端发送到服务器。

顺便说一下，我为客户端使用create-react-app，这就是为什么有些东西看起来有点奇怪。

我的文件夹结构是

Server folder
   Server package.json
   Client folder
      Client package.json

服务器package.json：

"scripts": {
  "start": "concurrently \"npm run server\" \"npm run client\"",
  "server": "cross-env NODE_ENV=production node server.js",
  "server-dev": "nodemon --watch ./ --exec babel-node -- server.js",
  "client": "node start-client.js",
  "dev": "concurrently \"npm run server-dev\" \"npm run client\"",
  "lint": "eslint ."
 },

客户端package.json：

"proxy": "http://localhost:3001",

我假设Heroku只是寻找一个启动脚本并运行它。 我认为你的服务器和客户端之间有一定程度的分离是一个好主意，所以我不建议尝试在一个package.json中使用它。

如果你想要，你可以通过谷歌搜索关键词来搜索在线教程：heroku concurrently server client

顺便说一句，如果你这样设置，你不需要CORS

干杯

Answer 3

我遇到过类似的问题。 我发现最简单的解决方案是拥有两个独立的Git存储库，一个用于后端，一个用于前端。 然后每个存储库的根文件夹中只有一个package.json。

然后，您可以创建第三个存储库并使用Gi​​t子模块来包含后端和前端存储库。 您可以使用“组合”存储库来执行开发工作，但是您将部署单个存储库。 这提供了与部署工具最大的兼容性，同时允许您仍然维护单个存储库以便于开发。