在同一个 Heroku 应用程序/dyno 上部署后端和前端 [英] Deploy the backend and frontend on the same Heroku app/dyno

问题描述

在我项目的根目录下，我有一个 frontend 和 backend 文件夹.这两个文件夹都包含一个 package.json 列出它们的依赖项.部署应用程序时，如何告诉 Heroku 在两个文件夹上运行 npm install?Heroku 似乎希望默认情况下只有一个 package.json 文件.我必须对 Procfile 做些什么吗?Heroku 文档似乎没有详细说明我的具体问题.

At the root of my project, I have a frontend and backend folder. Both folders contain a package.json that list their dependencies. How do I tell Heroku to run npm install on both folders when deploying the application? It seems like Heroku expects to have a single package.json file by default. Do I have to do something with a Procfile? The Heroku documentation doesn't seem to tell much about my specific question.

感谢您的帮助！

推荐答案

我刚刚使用在 heroku postbuild 步骤中创建的静态文件成功完成了这个目标，如本 博文.我有一个 React 前端(可以是任何东西)和 Express API 后端.每个进程在 dev 中有自己的端口，但在 Heroku 上部署只使用一个端口.

I just successfully completed this goal using static files created during a heroku postbuild step, as described in this blogpost. I have a React frontend (could be anything though) and Express API backend. Each process has its own port in dev, but deploying on Heroku uses just one total.

1. 将工作前端放在 root 的子目录中(例如 /frontend).
2. 将工作后端放在根目录的子目录中(例如 /api -- 博文假定后端保留在根目录中 -- 无论哪种方式都可以).

3. 通过将此行添加到 /frontend/package.json(用您的后端端口替换 5000)从前端到后端的代理 API 请求:

1. Put the working frontend in a subdirectory of root (such as /frontend).
2. Put the working backend in a subdirectory of root (such as /api -- the blogpost assumes the backend remains in the root directory -- either way is fine).

3. Proxy API requests from the frontend to the backend by adding this line to /frontend/package.json (replacing 5000 with your backend port):

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

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

将以下内容添加到后端的api/app.js(或api/index.js)中(确保最后一部分是在您定义之后适当的后端 [或 api] 路径):

Add the following to api/app.js (or api/index.js) in the backend (be sure the last part is AFTER you define the appropriate backend [or api] paths):

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'))
})

1. 使用如下内容编辑根目录的 /package.json 文件(请注意，使用并发包可以轻松地使用 npm run devnpm run dev，但这里只需要 heroku-postbuild):

1. Edit the root directory's /package.json file with something like the following (note that using the concurrently package allows an easy way to run the whole app locally with npm run dev, but only heroku-postbuild is required here):

  "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"
  },

1. 确保将所有后端包依赖项安装在根目录中，否则会出错.
2. 确保您的 /Procfile 具有类似于 web: node api/app.js
的内容

1. Make sure you install all backend package dependencies in the root directory, or you will get errors.
2. Make sure your /Procfile has something like web: node api/app.js

这篇关于在同一个 Heroku 应用程序/dyno 上部署后端和前端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！