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

时间:2017-11-05 18:07:16

标签: javascript node.js heroku npm

我有a repository,其中包含后端(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文件会更明智吗?
  3. 在同一个package.json中同时拥有前端和后端部分的优点和缺点是什么?

3 个答案:

答案 0 :(得分:3)

您可以使用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应该保持独立,原因有几个。首先,您真的不希望将所有服务器端代码捆绑到您的客户端。

答案 1 :(得分:1)

我有一个类似的问题部署到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只是寻找一个启动脚本并运行它。 我认为在服务器和客户端之间进行一定程度的分离是一个好主意,所以我不建议尝试将它们整合到一个包中.json

如果你想要,你可以通过google搜索关键词来搜索在线教程:heroku concurrently server client

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

干杯

答案 2 :(得分:0)

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

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