将 Next JS 前端和 Express 后端部署到 Heroku

Question

这是我的目录结构

• 应用程序
  • 前端
  • 后端

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

前端是一个功能齐全的 NextJS 应用，后端是一个处理 api/data 请求的 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 部署它是最简单的方法。