如何将全栈应用程序部署到 heroku 或 netlify？需要哪些文件？

Question

我有一个在 LocalHost 上运行良好的全栈应用程序，但是一旦它被部署到网络（Heroku 或 netlify），应用程序就会停止正常工作。我的问题是我需要做哪些必要的更改才能使后端正常工作并继续使用 API 以更新前端等。我已经尝试更改 express 上的端口：

const PORT = process.env.PORT || 5000;
app.listen(PORT, "0.0.0.0", err => {
  if (err) {
    console.error(err)
  } else {
    console.log(`Running on port ${PORT}`)

} })

我需要为端口添加自己的 .env 文件，还是 heroku 会自动添加？提前致谢！

Answer 1

如果您打算使用 heroku 并假设您已经设置了 heroku 帐户并且已经安装并连接了 heroku 终端（如果您遇到问题请告诉我）

那么您需要以下内容：

Procfile - 这个文件告诉 heroku 使用什么脚本运行你的服务器。确保将其命名为 Procfile 并且没有扩展名。

它可以包含类似下面的代码

web: yarn heroku-start - 注意这里我使用 yarn 作为我的包管理器，如果你使用的是 npm，你可以很容易地用 npm 替换它。我也在调用 heroku-start，这是在我的 package.json
中定义的脚本
这里是 pacakge.json 的示例（我只包含了重要的行）

{
 ...
  "scripts": {
    "dev": "nodemon -w src --exec \"babel-node src --presets env,stage-0\"",
    "build": "babel src -s -D -d dist --presets env,stage-0",
    "start": "pm2 start dist",
    "prestart": "yarn -s build",
    "heroku-prestart": "yarn global add pm2 && pm2 install pm2-logrotate",
    "heroku-start": "node dist",
    "heroku": "yarn -s build && git add . && git commit -m \"Rebuilt dist folder\" && git push heroku mj/bug/memory-leak:master",
    "lint": "eslint src",
    "heroku-postbuild": "echo Skip build on Heroku"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "eslint": "^4.13.0"
  },
  "eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 9,
      "sourceType": "module"
    },
    "env": {
      "node": true
    },
    "rules": {
      "no-console": 0,
      "no-unused-vars": [
        "warn",
        {
          "argsIgnorePattern": "^_"
        }
      ]
    }
  },
  "heroku-run-build-script": true
}

我正在使用 babel 构建我的项目。请不要对我拥有的脚本数量感到不知所措，有些是无用的。但是，您应该注意脚本下的这一行 "heroku-start": "node dist" - 这是我的运行我在 heroku 上的应用程序的脚本。你可以说类似 node index.js 我正在使用 dist 因为 babel 正在构建我的应用程序以使其可用于旧的 ecma 版本同时允许我使用新的 ecma 版本，脚本 build 是什么生成我的 dist 文件夹。

我还包括了我的 devDependences 以防你感兴趣。

您还需要 app.json - 这个文件基本上描述了您的 heroku 应用程序。

这是一个示例

{
  "name":"myApp",
  "description":"my cool app",
  "repository":"https://github.com/mycoolapp/",
  "logo":"http://node-js-sample.herokuapp.com/node.svg",
  "keywords":["node","express","anothertag"],
  "image":"heroku/nodejs"
}

完成后，您可以将项目上传到 heroku，它应该运行没问题。您可以在 github 上的 heroku 和您的 master 分支之间设置一个挂钩，以便在您推送到 maser 或合并到它时自动部署。

下一个：

我注意到你的代码有问题，我不建议在 heroku 上使用 0.0.0.0，这里有一些关于为什么 https://help.heroku.com/P1AVPANS/why-is-my-node-js-app-crashing-with-an-r10-error

的解释

这是您的新代码

const PORT = process.env.PORT || 5000;
app.listen(PORT, function(err) {
  if (err) {
    console.error(err)
  } else {
    console.log(`Running on port ${PORT}`)
}
}

也不要使用箭头函数，因为某些浏览器和 heroku 可能无法正确构建它（这就是我使用 babel 的原因）。

最后，这是一个关于在 heroku 上创建 nodejs 应用程序的好教程。

https://appdividend.com/2018/04/14/how-to-deploy-nodejs-app-to-heroku/

祝你好运。

Answer 2

如果您要使用 netlify，您只能托管静态文件，这意味着如果您要这样做，您可能需要明智地将后端与前端代码分开在 heroku 中托管后端和你在 netlify 上的前端你还需要一个 procfile 来告诉 heroku 如何处理你的应用程序，如果你要在同一台服务器上构建与你的后端的反应希望这能帮助那些想知道 netlify/heroku 部署

的人

如何将全栈应用程序部署到 heroku 或 netlify？需要哪些文件？

How to deploy full-stack app to heroku or netlify? Which files are necessary?

javascript

heroku

node.js

express

netlify