使用客户端和服务器在两个单独的文件夹中将节点应用程序部署到 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 应用程序。然后我可以将我的axiosbaseURL设置为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添加到根文件夹。

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)

Heroku 中的部署流程

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

Answer 2

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

另外，如果您想尝试新事物，我建议您尝试使用Surge进行前端部署；）如此简单且快速！

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