如何将使用@nuxtjs/apollo 模块的nuxt 应用程序部署到heroku？

Posted 2023-03-10

【中文标题】如何将使用@nuxtjs/apollo 模块的nuxt 应用程序部署到heroku？

【英文标题】：How to deploy a nuxt application that uses the @nuxtjs/apollo module, to heroku?

【发布时间】：2020-04-17 12:01:49

【问题描述】：

我正在学习 nuxtjs。我用它来构建一个待办事项应用程序，在后端（express）上实现 graphql 来设置我的 API。 当我想实现apollo时，我发现我必须使用@nuxtjs/apollo模块，它在nuxt.config.js中有一堆选项需要设置，但只有一个是必需的，所以我刚刚将以下代码添加到我的 nuxt.config.js 文件中：

modules: ["@nuxtjs/apollo"],
apollo: 
  clientConfigs: 
    default: 
      httpEndpoint: "http://localhost:3000/graphql"
    
  
,

它在我的本地机器上运行良好。当我尝试将它部署到 heroku 时，我遇到了一些问题。

我认为 api 调用未正确完成，在 heroku 仪表板的应用程序日志中，我看到以下行： Error Network error: request to http://localhost:3000/graphql failed, reason: connect ECONNREFUSED 127.0.0.1:3000 所以我想我必须在我的 nuxt.config.js 文件中更改 httpEndpoint 的值。 我还注意到，在 Heroku 中，每次重新启动应用程序时主机和端口都会发生变化，所以我会得到一个这样的 uri：http://172.18.254.242:24570/

我知道我需要在我的 nuxt.config.js 文件中更改 httpEndpoint 的值，但究竟是什么价值？我不知道。

我在官方文档中搜索了很多但没有找到任何解决方案，我也尝试了我在 google 和 *** 上找到的所有解决方案但没有任何运气。

我想知道我应该在 httpEndpoint 中传递什么值才能让我的应用正常运行。

【参考方案1】：

按照here 的建议启用 dyno 元数据后，您应该可以通过 process.env.HEROKU_APP_NAME 访问应用名称。端口号应可通过process.env.PORT 获得。所以你也许可以自己构建 url：

https://$process.env.HEROKU_APP_NAME.herokuapp.com:$process.env.PORT/graphql

【讨论】：

运行文章建议的命令后，得到如下回复：Enabling runtime-dyno-metadata for sleepy-inlet-14340... done。我猜一切都好，所以我将代码中的值编辑为：https://$process.env.HEROKU_APP_NAME.herokuapp.com:$process.env.PORT/graphql。提交、推送和部署。该应用程序仍然无法运行，但我在浏览器的控制台上收到以下信息：网络错误：undefined.herokuapp.com:undefined/graphql 不是有效的 URL。。因此，由于某种原因，该应用程序无法识别 process.env 变量。知道有什么问题吗？

我重新部署了应用程序，现在不知何故它已部分修复，控制台现在给我：Network error: https://sleepy-inlet-14340.herokuapp.com:undefined/graphql is not a valid URL.，所以现在它不仅仅重新调整 PORT 变量。

你可以set the port yourself。