将NextJS前端和后端部署到Heroku

Question

这是我的目录结构

• 应用
  • 前端
  • 后端

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

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

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

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

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