将NextJS前端和Expresss后端部署到Heroku [英] Deploying NextJS front end and Expresss back end to Heroku

问题描述

这是我的目录结构

• APP
  • 前端
  • 后端

我在主目录中没有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要做什么。我没有足够的经验知道这到底是不是我的问题。不幸的是，我真的不知道我需要去的方向，当我搜索这个的时候，我真的很难找到教程或任何帮助。在我前进的过程中，我对过程和细节有了更多的理解，但我绝对可以用一个好的解释来说明我需要做什么，我需要如何做，以及为什么我需要做这件事。我知道我的要求很高，但任何事都有帮助。谢谢您。

推荐答案

我建议重新构建项目，使其在根文件夹中有一个Package.json。让它工作的一个简单方法是让Express应用程序为NextJS应用程序提供服务。

我和你有同样的问题。我意识到部署NextJS应用程序不像部署Create-Reaction-App应用程序那么简单。我最终遵循了NextJS团队的官方部署建议，即让Vercel为其服务。

实际上非常简单。我设法在几分钟内部署了NextJS应用程序。创建Vercel帐户，添加新应用并部署它。

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

可能还有其他方法和解决方法，但根据Vercel(顺便说一句，他是NextJS的创建者)，将其与Vercel一起部署是最简单的方法。

这篇关于将NextJS前端和Expresss后端部署到Heroku的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！