将 NextJS 前端和 Express 后端部署到 Heroku

Question

这是我的目录结构

• 应用程序
  • 前端
  • 后端

我在主目录中没有 package.json 文件，但前端和后端都有 package.json 文件。

前端是一个功能齐全的 NextJS 应用程序，后端是一个处理 api/数据请求的 Express 服务器。

我有一个用于整个应用程序的存储库。 我的目标是将当前结构中的这个应用程序推送到 Heroku，设置我需要的任何环境变量，并让 Heroku 处理构建细节。 我还没有找到任何专门针对我的实例的教程或任何 SO 问题。

到目前为止，我只是尝试推送整个 repo，但这是我收到的错误消息：

remote: Compressing source files... done.
remote: Building source:
remote:
remote:  !     No default language could be detected for this app.
remote:                         HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
remote:                         See https://devcenter.heroku.com/articles/buildpacks
remote:
remote:  !     Push failed

我假设这是因为根目录中没有 package.json 文件来告诉 Heroku 做什么。 我没有足够的经验来知道这是否真的是我的问题。 不幸的是，我真的不知道我需要去这里的方向，当我搜索这个时，我很难找到教程或任何帮助。 随着我的进展，我逐渐了解了这个过程和细节，但我绝对可以很好地解释我需要做什么，我需要如何做，以及为什么我需要这样做。 我知道我要求很多，但任何事情都有帮助。 谢谢你。

Answer 1

我建议重组项目，使其在根文件夹中有一个 package.json。 让它工作的一个简单方法是让 Express 应用程序为 NextJS 应用程序提供服务。

我和你有同样的问题。 我意识到部署 NextJS 应用程序并不像部署 Create-React-App 应用程序那么简单。 我最终还是听从了 NextJS 团队的官方推荐进行部署，就是让 Vercel 为其服务。

这实际上非常容易。 我设法在几分钟内部署了 NextJS 应用程序。 创建一个Vercel帐户，添加一个新应用程序并部署它。

这样做的缺点是您将使用 Heroku 部署后端，使用 Vercel 部署前端。 但是，如果您使用 GitHub，则每次推送到主分支时，Vercel 都会自动重新部署您的 NextJS 应用程序。 因此，实际上，在第一次部署 Vercel 之后，您甚至不必在其中做太多事情。

可能还有其他方法和变通方法，但根据 Vercel（顺便说一下，他是 NextJS 的创建者）的说法，使用 Vercel 部署它是最简单的方法。