Heroku 应用程序不起作用（部署问题？）答案

【问题标题】：Heroku application doesn't work (Deployment problem?)Heroku 应用程序不起作用（部署问题？）
【发布时间】：2021-10-28 08:34:32
【问题描述】：

我使用 Heroku 部署了一个使用 JavaScript、Express 和 Node.js 的应用程序，当我在 localhost 中手动测试代码时一切正常，但在 Heroku 中查看它时，该应用程序根本没有任何功能。

这是构建日志：

-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 14.x...
       Downloading and installing node 14.17.5...
       Using default npm version: 6.14.14
       
-----> Restoring cache
       - node_modules
       
-----> Installing dependencies
       Installing node modules (package.json)
       audited 50 packages in 0.703s
       found 0 vulnerabilities
       
       
-----> Build
       
-----> Caching build
       - node_modules
       
-----> Pruning devDependencies
       audited 50 packages in 0.738s
       found 0 vulnerabilities
       
       
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 33.1M
-----> Launching...
       Released v18
       https://note-taker-io.herokuapp.com/ deployed to Heroku

【问题讨论】：

标签： javascript node.js express heroku

【解决方案1】：

在您的前端 JS 代码中，您声明了用于与 DOM 交互的变量，如果 window.location.pathname === '/notes'，请参见此处：

let noteTitle;
let noteText;
let saveNoteBtn;
let newNoteBtn;
let noteList;

if (window.location.pathname === '/notes') {
  noteTitle = document.querySelector('.note-title');
  noteText = document.querySelector('.note-textarea');
  saveNoteBtn = document.querySelector('.save-note');
  newNoteBtn = document.querySelector('.new-note');
  noteList = document.querySelectorAll('.list-container .list-group');
}

这里的问题是，在您的首页，锚标记会将您带到/notes.html，而不是/notes：

<a class="btn btn-primary btn-lg mt-4" href="./notes.html" role="button">Get Started</a>

因此，您的变量保持未声明，因此它们未定义。如果您在 /notes.html 上，您甚至可以在开发控制台中键入变量的名称来检查这一点。

如果您在 ./notes 上，前端似乎工作正常。所以只需将 href 属性从“./notes.html”更改为“./notes”：

<a class="btn btn-primary btn-lg mt-4" href="./notes" role="button">Get Started</a>

【讨论】：

非常感谢！，我如此专注于后端，以至于我什至没有想到前端可能是问题的根源，这绝对是一个教训，我再次重申，非常感谢您的洞察力！。