Question

我正在使用 react-app-rewired 和 custom-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 只推送“前端”子目录 (git subtree push --prefix frontend heroku master)，Heroku 构建当然会失败，因为它无法在 /shared 中找到源文件 - 那些甚至没有推送到服务器.
我尝试使用 monorepo buildpack 中描述的 here，但结果是一样的。构建失败，在 /shared 中找不到源文件。
我在评论 here: setting "postinstall": "npm install --prefix frontend in package.json 中尝试了“hacky”解决方案。尽管它似乎可以构建，但访问 https://myap123.herokuapp.com 和 https://myap123.herokuapp.com/frontend 会产生 404。
我还尝试了注释 here 中的解决方案：将 release: cd frontend && npm install && npm run build 放入 procfile。相同的行为：它似乎可以构建，但无法从浏览器访问 (404)。

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

任何帮助将不胜感激。

Answer 1

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

就我而言，我通过在 repo 的根目录中放置一个 package.json 来使其工作：

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

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

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

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

1 个答案: