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

Question

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

我构建了一个应用程序。客户端是使用 Vue-cli 构建的，在客户端文件夹的端口 8080 上运行，而服务器则在 端口 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

嗯，我遇到了同样的问题。我们可以给 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)

My Git Hub Repo

我已使用以下代码将 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 并安装所有 Node 依赖项。
• 现在它将运行脚本 heroku-postbuild。 TUDUM。您可以在这里发挥自己的魔力。