将节点应用程序部署到heroku，客户端和服务器位于两个单独的文件夹中答案

【问题标题】：Deploying node app to heroku with client and server in two separate folders将节点应用程序部署到heroku，客户端和服务器位于两个单独的文件夹中
【发布时间】：2018-08-07 18:01:54
【问题描述】：

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

我已经构建了一个应用程序。客户端是使用 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。

根据我所做的大量研究和this 的回答（诚然是一篇很老的帖子），一个建议是将两者结合起来，但我将如何解决我在每个文件中拥有的两个 package.json 文件文件夹（客户端和服务器）？我合并它们吗？

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

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

【问题讨论】：

标签： javascript node.js express heroku

【解决方案1】：

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

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

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

【讨论】：

好的，这是有道理的。两次部署意味着 Heroku 中有两个独立的应用程序，对吧？这种方式的网络请求是否比在一个 repo 中同时拥有服务器和客户端更慢？
如果client 和server 都使用第三个common 功能，部署方法是什么？
如果你有一个通用的功能，你应该把这个逻辑封装在一个库中，例如，将这个功能发布为一个 NPM 包，并分别安装在你的前端和后端项目中。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我认为 Mark 提出了一个很好的 repo，但我想强调 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)

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

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

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

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

【讨论】：

那么，如果我最终使用前端和后端子文件夹来构建代码，我该如何进行重构呢？我只是将后端文件夹中的文件解压缩并将其移动到根目录还是需要重做后端部分？

【解决方案4】：

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

【讨论】：