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。

根据我已经完成的一系列研究和this回答（诚然这是一个很老的帖子），一个建议是将两者结合起来，但我如何解决这两个package.json文件呢？我在每个文件夹（客户端和服务器）？我合并它们吗？

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

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

Answer 1

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

此外，如果你想尝试新的东西我建议你尝试surge进行前端部署;）这么简单快速！

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

Answer 2

此存储库显示Node.js的设置，该设置为运行在单个Heroku dyno上的React前端提供服务：https://github.com/mars/heroku-cra-node

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

Answer 3

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

那我该怎么办？

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

React and Express Application文件夹结构示例：

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 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上。您可以将它们分开，但是这对我来说似乎太复杂了，然后您必须将它们托管在两个不同的地方，并且可能需要跨源共享资源。我的New文件结构看起来很像Henry Lis帖子中的示例

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

4 个答案: