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

Question

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

node.jsexpressherokunext.js

5

这是我的目录结构

app
- frontend
- backend

主目录下没有 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该怎么做。我没有足够的经验知道这是否真的是我的问题。不幸的是，我不知道我需要走什么方向，当我搜索时，很难找到教程或任何帮助。随着我学习过程的深入，我开始了解流程和细节，但我还需要一个好的解释来说明我需要做什么、如何做以及为什么需要这样做。我知道我要求很多，但任何帮助对我都很有用。谢谢。

- Matthew Wolman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yamo93 · Accepted Answer

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

我遇到了与您相同的问题。我意识到部署NextJS应用程序并不像部署Create-React-App应用程序那样直截了当。最终，我按照NextJS团队的官方建议进行了部署，即让Vercel提供服务。

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

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

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