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

【问题标题】：How To Deploy React App w/ Shared Code In Monorepo To Heroku如何在 Monorepo 中将带有共享代码的 React 应用程序部署到 Heroku
【发布时间】：2021-07-21 07:13:59
【问题描述】：

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

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

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

如果我使用 Git 只推送 'frontend' 子目录 (git subtree push --prefix frontend heroku master)，Heroku 构建当然会失败，因为它无法在 /shared 中找到源文件——那些甚至没有推送到服务器。
我尝试使用monorepo buildpack，如here 所述，但结果相同。构建失败，在 /shared 中找不到源文件。
我已经尝试了评论here中的“hacky”解决方案：在package.json中设置"postinstall": "npm install --prefix frontend。尽管它似乎已构建，但访问 https://myap123.herokuapp.com 和 https://myap123.herokuapp.com/frontend 会产生 404。
我还尝试了评论here中的解决方案：将release: cd frontend && npm install && npm run build放入procfile中。相同的行为：它似乎已构建，但无法从浏览器访问 (404)。

虽然有很多关于从 monorepo 部署项目的资源，以及关于在 React 和 Node 项目之间共享代码的许多其他资源，但我一直找不到任何对两者都有效的东西：共享代码、和将引用该代码的项目部署到 Heroku。此时，我只专注于尝试部署前端。

任何帮助将不胜感激。

【问题讨论】：

标签： reactjs heroku create-react-app monorepo

【解决方案1】：

简单的答案（来自this thread）是Heroku 没有提供在子目录中运行的正确方法。任何解决方案都是 hack，具体取决于您的项目布局。

就我而言，我通过将 package.json 放在 repo 的根目录中来实现它：

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

这不需要 procfile。如果是 typescript 项目，请确保后端的 package.json 的 script 标签有 "build": "tsc"。

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

【讨论】：