在同一個 Heroku 應用程序/dyno 上部署后端和前端

Question

在我的項目的根目錄下，我有一個frontend和backend文件夾。 這兩個文件夾都包含一個package.json ，列出了它們的依賴項。 部署應用程序時，如何告訴 Heroku 在兩個文件夾上運行npm install ？ Heroku 似乎希望默認情況下只有一個package.json文件。 我必須對 Procfile 做些什么嗎？ Heroku 文檔似乎並沒有說明我的具體問題。

感謝您的幫助！

Answer 1

我剛剛成功完成了使用過程中的Heroku postbuild一步創建靜態文件這一目標，如在此描述的博文。 我有一個 React 前端（可以是任何東西）和 Express API 后端。 每個進程在 dev 中有自己的端口，但在 Heroku 上部署只使用一個端口。

1. 將工作前端放在 root 的子目錄中（例如/frontend ）。
2. 將工作后端放在 root 的子目錄中（例如/api - 博客文章假定后端保留在根目錄中 - 無論哪種方式都可以）。

3. 通過將此行添加到/frontend/package.json （將 5000 替換為您的后端端口）， /frontend/package.json后端的代理 API 請求：

   "proxy": " http://localhost:5000 ",

4. 將以下內容添加到后端的api/app.js （或api/index.js ）（確保最后一部分是在您定義適當的后端 [或 api] 路徑之后）：

 const path = require('path') // Serve static files from the React frontend app app.use(express.static(path.join(__dirname, '../frontend/build'))) // AFTER defining routes: Anything that doesn't match what's above, send back index.html; (the beginning slash ('/') in the string is important!) app.get('*', (req, res) => { res.sendFile(path.join(__dirname + '/../frontend/build/index.html')) })

5. 使用如下內容編輯根目錄的/package.json文件（請注意，使用 concurrently 包可以輕松地使用npm run dev在本地運行整個應用程序，但這里只需要heroku-postbuild ）：

 "scripts": { "frontend": "cd frontend && npm start", "api": "cd api && nodemon app.js", "dev": "concurrently --kill-others-on-fail \\"npm run api\\" \\"npm run frontend\\"", "heroku-postbuild": "cd frontend && npm install && npm run build" },

6. 確保將所有后端包依賴項安裝在根目錄中，否則會出錯。
7. 確保你的/Procfile有類似web: node api/app.js

Answer 2

您可以在Procfile 中為您的項目定義多個入口點：

web: cd front && npm i && npm start
server: cd backend && npm i && npm start

但是，您至少必須升級到 Hobby。 這是 7 美元/dyno/月。

Answer 3

似乎可以在項目的根目錄下放一個package.json文件，並使用腳本在兩個文件夾中調用npm i 。

https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process

類似於cd front && npm i && cd ../back && npm i

但是我應該說，如果它們在不同的端口上運行，它可能不起作用，因為每個 procfile 似乎只有一個 Web 進程可用。 最后一點是確認。