如何在 Monorepo 中将带有共享代码的 React 应用程序部署到 Heroku

Question

我正在使用 react-app-rewired 和 customize-cra 来设置一个带有共享 TypeScript 代码的多项目 monorepo，而不从 create-react-app 弹出（设置在这个答案中描述）。 布局如下：

/my-project
|--- /frontend  <-Contains the create-react-app
|--- /shared    <-Contains some typescript source, used by the CRA
...

它在本地工作得很好。 我唯一不知道的是如何将其部署到 Heroku：

1. If I use Git to just push the 'frontend' subdirectory ( git subtree push --prefix frontend heroku master ), the Heroku build of course fails, because it cannot find the source files in /shared - those weren't even pushed to the服务器。
2. 我尝试使用这里描述的monorepo buildpack ，但结果是一样的。 构建失败，在 /shared 中找不到源文件。
3. I've tried the "hacky" solution in the comment here : setting "postinstall": "npm install --prefix frontend in package.json. Although it seemed to build, accessing https://myap123.herokuapp.com and https: //myap123.herokuapp.com/frontend产量 404。
4. 我还在这里的评论中尝试了解决方案：将release: cd frontend && npm install && npm run build in the procfile。 相同的行为：它似乎已构建，但无法从浏览器访问 (404)。

虽然有很多关于从 monorepo 部署项目的资源，还有很多其他关于在 React 和 Node 项目之间共享代码的资源，但我一直无法找到任何对两者都有效的资源：共享代码，并将引用该代码的项目部署到Heroku。 在这一点上，我只专注于尝试部署前端。

任何帮助将不胜感激。

Answer 1

简单的答案（来自这个线程）是 Heroku 没有提供在子目录中运行的正确方法。 任何解决方案都将是一个 hack，并且会根据您的项目布局而有所不同。

就我而言，我通过将 package.json 放在回购的根目录中来使其工作：

 {
     "scripts": {
       "postinstall": "npm install --prefix backend && npm run build --prefix backend",
       "start": "node backend/dist/app.js"
     }
   }

这不需要 procfile。 如果是 typescript 项目，请确保后端的 package.json 的脚本标签有“build”：“tsc”。

对于前端，我放弃了 Heroku。 相反，我只是将前端部署到 Netlify，它使您可以轻松地从（预构建的）子目录进行部署。 因此，在将 Netlify 用于前端和上述 hack 用于后端之间，我有一个共同工作的堆栈，直到 Heroku 希望能够正确地让您指定一个从中运行的子目录（他们声称他们一直在等待 NPM 工作区，从 NPM 7) 完成。