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

Question

这是我的目录结构

• 应用程序
  • 前端
  • 后端

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

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

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

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

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 进行部署是最简单的方法。