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

问题描述 投票:0回答:2

这是我的目录结构

  • 应用程序
    • 前端
    • 后端

我主目录中没有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 要做什么。我没有足够的经验来知道这是否真的是我的问题。不幸的是,我真的不知道我需要去这里的方向,并且当我搜索这个问题时我很难找到教程或任何帮助。随着我的进展,我对这个过程和细节有了更多的了解,但我绝对可以使用一个很好的解释来说明我需要做什么、如何做以及为什么需要这样做。我知道我要求很多,但任何事情都会有帮助。谢谢你。

node.js express heroku next.js
2个回答
3
投票

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

我也遇到了和你一样的问题。我意识到部署 NextJS 应用程序并不像部署 Create-React-App 应用程序那么简单。我最终按照NextJS团队的官方建议进行部署,即让Vercel为其服务。

这实际上非常简单。我在几分钟内成功部署了 NextJS 应用程序。创建一个 Vercel 帐户,添加新应用程序并部署它。

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

可能还有其他方法和解决方法,但根据 Vercel(顺便说一下,他是 NextJS 的创建者)的说法,使用 Vercel 部署它是最简单的方法。


0
投票

不确定这是否还需要。但我正在开发一个具有类似设置的项目。我有相同的目录结构,并且使用 express.js 后端和 next.js 前端。

我在“Render.io”上部署了我的 Express 后端(Heroku 拿走了他们的免费层:哭泣:),并将我的根目录声明为服务器/后端文件夹,并类似地将客户端/前端文件夹声明为 Vercel 上的根目录用于 next.js 部署。这对我有用。

PS。不要忘记更改对新域的所有“localhost:{PORT}”引用,以便进行正确的 api 调用。

© www.soinside.com 2019 - 2024. All rights reserved.