部署完整堆棧節點應用程序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子模塊來包含后端和前端存儲庫。 您可以使用“組合”存儲庫來執行開發工作，但是您將部署單個存儲庫。 這提供了與部署工具最大的兼容性，同時允許您仍然維護單個存儲庫以便於開發。