使用客户端和服务器在两个单独的文件夹中将节点应用程序部署到 heroku

Question

我做了很多研究，但我似乎无法完全理解这一点。

我已经构建了一个应用程序。 客户端是使用 Vue-cli 构建的，并从客户端文件夹在port 8080上运行，服务器从port 8081上的单独服务器文件夹运行。 本质上，我有这个：

client
    - package.json
    - node_modules
    - src
    - build
    - index.html

server
    - package.json
    - node_modules
    - app.js
    - auth.js

我不确定如何解析文件夹结构以便将其部署到 Heroku。

根据我所做的一系列研究和这个答案（诚然是一篇很旧的帖子），一个建议是将两者结合起来，但我将如何解决每个文件夹（客户端和服务器）中的两个 package.json 文件)? 我合并它们吗？

另一个建议是创建两个独立的 Heroku 应用程序。 然后我可以将我的axios baseURL 设置为app_name.herokuapp.com吗？

两者中哪一个通常被认为是理想的解决方案？ 我真的被困在这里...

Answer 1

好吧，我遇到了同样的问题。 我们可以给 Heroku 一个脚本，让它在安装依赖heroku-postbuild后运行。

我的存储库文件夹结构

App
|
+-- client               (folder)  (root)
|   |
|   +--src               (folder)
|   +--public            (folder)
|   +--package.json      (file)
|   +--package-lock.json (file)
|
+-- server               (folder)  (root)
|   |
|   +--....              (folders)
|   +--....              (folders)
|   +--index.js          (Server Main File)
|   +--package.json      (file)
|   +--package-lock.json (file)
|
+-- package.json         (Dummy package JSON for detection of heroku)

我的 Git Hub 回购

我已使用以下代码将package.json添加到 Root 文件夹。

{
    "name": "rollcall-rooms",
    "version": "1.0.0",
    "main": "",
    "scripts": {
        "start": "npm start --prefix server",
        "install-client": "cd client && npm install && npm run build && cd ..",
        "install-server": "cd server && npm install && cd .. ",
        "heroku-postbuild": "npm run install-client && npm run install-server"
    }
}

Heroku 中的部署过程

• 克隆你的回购协议。
• 在根文件夹中检测您的package.json并安装所有节点依赖项。
• 现在它将运行脚本heroku-postbuild 。 图杜姆。 你可以在这里施展你自己的魔法。

Answer 2

据我所知，现在进行两次部署是开发许多开发人员的大型项目最常用的解决方案，一部分是你的前端使用 vue.js，它将从远程 api 获取数据，这是你的后端和第二次部署。 确切地说，您必须将 baseURL 更改为app_name.herokuapp.com此外，您可能还必须启用 CORS。

另外，如果您想尝试新事物，我建议您尝试在前端部署中使用surge ；）如此简单、如此快速！

也许您已经知道了，但是 Heroku 设置了自己的端口，因此您需要创建一个.env文件并通过 ssh 或在 Heroku 仪表板中手动分配它。

Answer 3

这个 repo 展示了 Node.js 的设置，服务于在单个 Heroku dyno 上运行的 React 前端： https ://github.com/mars/heroku-cra-node

我能够以此为指导启动并运行。 为了清洁起见，我将文件夹结构修改为与 op 非常相似： client/ server/ package.json.gitignore.env (etc)

Answer 4

我认为 Mark 提出了一个很好的回购协议，但我想强调 Heroku 的工作原理。 正如 Heroku 文档所说"Heroku Node.js support will only be applied when the application has a package.json file in the root directory."

那我该怎么办？

当同时部署客户端和服务器代码时，您可能希望将服务器代码放在文件夹的根目录下，并继续将客户端代码保存在单独的文件夹中。

React 和 Express 应用程序文件夹结构示例：

App
|
+-- client               (folder)  (root)
|   |
|   +--node_modules      (folder)
|   +--src               (folder)
|   +--public            (folder)
|   +--package.json      (file)
|   +--package-lock.json (file)
|         
+-- node_modules         (folder)  (root)       
+-- index.js             (file)    (root)
+-- package.json         (file)    (root)
+-- package-lock.json    (file)    (root)

如您所见，服务器代码都在根文件夹中，而 React 应用程序保存在客户端文件夹中。 从这里开始，您需要确保为您的服务器 package.json 设置正确的脚本。

请记住，服务器的 package.json 是 Heroku 关于如何启动您的应用程序的说明。

这是根服务器的 package.json 中正确脚本的样子

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

Answer 5

我有同样的问题。 我将我的应用程序结构分为使用 express-generator 构建的“api”存储库和使用 create-react-app 构建的“客户端”存储库。 我最终不得不废弃我的整个 api 存储库并将其重写为根目录中名为 index.js 的单个文件，该目录包含所有 express 代码并拥有自己的 package.json。 我遵循了本教程： https ://medium.com/@chloechong.us/how-to-deploy-a-create-react-app-with-an-express-backend-to-heroku-32decfee6d18。 然后我就可以在一个应用程序中将其全部托管在 heroku 上。 您可以将它们分开，但这对我来说太复杂了，然后您必须将它们托管在两个不同的地方，并且可能需要跨源资源共享。 我的新文件结构看起来很像 Henry Lis 帖子中的示例