Heroku无法获取/。

28

我是Heroku的新手,相信我正在遵循Heroku网站上通过node.js进行部署所述步骤 - https://devcenter.heroku.com/articles/getting-started-with-nodejs - 但尽管提示部署成功,当我访问新生成的herokuapp.com网站时,浏览器仅显示以下内容:

无法获取/

执行时未出现任何错误。

git push heroku master

我的Procfile非常简单

web: node app.js

我还不太了解dynos,但似乎有一个正在运行:

heroku ps === web(1X):node app.js web.1:up 2014/07/03 23:55:00(~ 18分钟前)

然后:

heroku open 打开APP-NAME... 完成

但是https://APP-NAME.herokuapp.com/只显示了“Cannot GET /”消息。

9个回答

33

我将dist目录添加到.gitignore文件中,因此我没有将dist提交到版本库并推送到Heroku。因此,Heroku找不到任何要提供的内容。

我更新了我的.gitignore文件,进行了提交和推送,现在我的应用程序在Heroku上显示得很好。


1
我认为dist文件夹将始终包含新的更改,因此不应该提交。如果我错了,请纠正我。 - Louie Miranda

8

近三年了,但我是为了提供参考而回答的。

  • 通常 /dist 是一个构建过程生成的目录,它是临时的并且在我们的源代码中会经常变化,所以/dist 不被版本控制
  • 在你的 package.json 文件中,你可以添加一个名为 postinstall 的脚本,用于执行构建过程。比如说,假设你有一个叫做 build 的 gulp 任务...那么 "postinstall": "gulp build"
  • 如果你还使用 bower 管理项目依赖,可以通过运行 npm install --save bower 和 "postinstall": "./node_modules/bower/bin/bower install && gulp build"来实现。

这只是一个针对你的 package.json 的简单示例。

{
   "dependencies: {
    "bower":"^1.8.0",
    "grunt":"^1.0.1",
   },
   "scripts": {
    "start": "node ./www.js",
    "build": "grunt dist",
    "postinstall": "./node_modules/bower/bin/bower install && npm run build"
   }
}

显然,您可能已经完成得更好了……我只是为下一次咨询参考。

相关的IT技术内容请提供给我翻译。

6
确保你已经准备好了以下两件事情:
1. 在你的 package.json 文件中,包含 heroku-postbuild 这一行,例如我的是这样的(如果你需要进行多个安装,则可能会有所不同):
```json "scripts": { "heroku-postbuild": "npm install" } ```
2. 检查建立应用程序的 Node.js 版本是否符合 Heroku 支持的版本。
        "scripts": { 
        "heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
      },
  1. 在你的index.js文件中,加入一个针对生产环境的条件。
    if (process.env.NODE_ENV === "production") {
      app.use(express.static("build"));
      app.get("*", (req, res) => {
        res.sendFile(path.resolve(__dirname,  "build", "index.html"));
      });
    }

Express将提供生产资产,如我们的main.js文件或main.css文件。

最后,当Express检测到请求是用于资产时,如果不识别该路由,则会提供index.html文件。


2
我想你还没有将文件添加到git中。无论你在本地编辑了哪个文件,都需要执行git add xyz.extgit commit -m "Message"git push heroku master -u-u会保存“heroku master”参数,以便未来添加时只需键入git push)。
简而言之,每次被要求部署应用程序时,您都需要执行git addgit commitgit push。希望这可以帮助您。

1
我有点尴尬,因为我的错误是在没有提交更改的情况下运行git push heroku master。

1
我不知道为什么它可以工作,但我将我的Angular应用程序的位置从[root]client/dist更改为[root]/dist,这与server.js在同一目录级别。

1

我曾经遇到过同样的问题,最终我解决了它。

我的代码有两个文件夹。一个是用于存放后端nodejs文件的服务器文件夹,另一个是用于存放前端文件的客户端文件夹。这就是问题所在。

我在服务器文件夹中使用了git init,然后进行了git commitgit push。它没有在构建时给我任何错误,但在heroku logs中显示404

经过5个小时的研究,我发现Heroku Cannot GET /意味着它无法访问前端文件,因为我只部署了服务器文件夹(傻瓜!)。

我删除了服务器文件夹,并将所有后端文件移动到与客户端文件夹相同的级别,更改了一些客户端文件路径。重新进行了git initgit commitgit push。哇!一切都按预期工作了!

所以,请确保您的服务器文件与客户端文件夹处于同一级别,并部署整个代码文件夹。

希望这可以帮助你!


在我的情况下,我构建了前端并将其作为静态文件在express(后端)中提供服务,关键是将新文件推送到heroku,因为heroku只有我的后端代码。 - Bodunrin David

0
在server.js中加入以下两行代码对我很有帮助: var distDir = __dirname + "/dist/"; app.use(express.static(distDir)); 我的dist文件夹结构如下:

enter image description here


0

我遇到了这个错误,最终发现我的问题是因为我发送给express.static()的路径由于我的目录结构而错误。

通过记录路径并进行修复,我成功地解决了这个问题。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接