將 node.js express 后端部署到 heroku

Question

這是我第一次在 heroku 上部署並且我不斷收到錯誤，構建成功但是當構建完成時，我嘗試通過 heroku 在瀏覽器中查看 API 響應我得到一個錯誤
加載資源失敗：服務器響應狀態為 500（內部服務器錯誤）

來自 heroku 的日志 -
2021-12-11T19:16:54.702260+00:00 應用程序 [web.1]：npm 錯誤！ 錯誤號 1
2021-12-11T19:16:54.708322+00:00 應用程序 [web.1]：npm 錯誤。 example-create-react-app-express@1.0:0 開始： node server.js
2021-12-11T19:16:54.708419+00:00 應用程序 [web.1]：npm 錯誤！ 退出狀態 1
2021-12-11T19:16:54.708524+00:00 應用程序 [web.1]：npm 錯誤！
2021-12-11T19:16:54.708602+00:00 應用程序 [web.1]：npm 錯誤。 在 example-create-react-app-express@1.0.0 啟動腳本中失敗。
2021-12-11T19:16:54.708721+00:00 應用程序 [web.1]：npm 錯誤。 這可能不是 npm 的問題。 上面可能還有額外的日志記錄 output。
2021-12-11T19:16:54.718471+00:00 應用 [web.1]:
2021-12-11T19:16:54.719294+00:00 app[web.1]: npm ERR：此運行的完整日志可在以下位置找到：
2021-12-11T19:16:54.719298+00:00 應用程序 [web.1]：npm 錯誤。 /app/.npm/_logs/2021-12-11T19_16_54_709Z-debug.log
2021-12-11T19:16:54.908600+00:00 heroku[web.1]：進程以狀態 1 退出
2021-12-11T19:16:55.067169+00:00 heroku[web.1]: State 從開始變為崩潰
2021-12-11T19:16:56.373561+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/api/hello" host=agile-spire-07157.herokuapp .com request_id=ab0c71fb-1be1-4829-b123-e57cc4e7fafd fwd="67.177.196.118" dyno= connect= service= status=503 bytes= protocol=https
2021-12-11T19:17:56.820732+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=agile-spire-07157.herokuapp.com request_id =b9615ee7-190d-44ce-8d97-c099d26149ca fwd="67.177.196.118" 測功機=連接=服務=狀態=503字節=協議=https

非常感謝任何幫助

文件夾結構：

server.js：

const express = require('express');
const axios = require('axios');
require('dotenv').config();
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
app.use(cors());

app.use(express.static(path.join(__dirname, 'client/build')));

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + '/client/build/index.html'));
});

const port = process.env.PORT || 2000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const apiKey = process.env.APIKEY

app.get('/api/hello', (req, res) => {
    const { term, location } = req.query
    const config = {
        method: 'get',
        url: `https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}`,
        headers: {
            'Authorization': `Bearer ${apiKey}`
        }
    };

    axios(config)
        .then(function (response) {
            return JSON.stringify(response.data, null, 2)
        })
        .then(function (jsonResponse) {
            res.send(jsonResponse)
        })
        .catch(function (error) {
            console.log(error);
        });
});

app.listen(port, () => console.log(`Listening on port ${port}`))

package.json 用於服務器：

{
  "name": "example-create-react-app-express",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js",
    "client": "cd ../client && yarn start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  },
  "engines": {
    "node": "14.17.3"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "body-parser": "^1.18.3",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "concurrently": "^4.0.1"
  }
}

Answer 1

所以我想我想通了，它似乎正在工作，這就是我改變的地方：
我在根目錄中添加了一個 Procfile（確保它是大寫的 P）並將其添加到它 -> web: node server.js
（所以只需輸入 web: 節點（無論您的服務器文件名為什么）

如果您將 API 密鑰存儲在 a.env 文件中，那么您必須讓 heroku 知道您正在這樣做。 您可以通過在服務器文件夾中的終端中鍵入此命令來讓 heroku 知道這一點
heroku 配置：設置 <key=value>
如果你做對了，你會得到 heroku 的回復，就是這么說的。

這是我按照說明操作的鏈接，對我有用
https://dzone.com/articles/deploy-your-node-express-app-on-heroku-in-8-easy-s

最終 server.js

const express = require('express');
const axios = require('axios');
require('dotenv').config();
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
app.use(cors());
const port = process.env.PORT || 2000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const apiKey = process.env.APIKEY

app.get('/api/hello', (req, res) => {
    const { term, location } = req.query
    const config = {
        method: 'get',
        url: `https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}`,
        headers: {
            'Authorization': `Bearer ${apiKey}`
        }
    };

    axios(config)
        .then(function (response) {
            return JSON.stringify(response.data, null, 2)
        })
        .then(function (jsonResponse) {
            res.send(jsonResponse)
        })
        .catch(function (error) {
            console.log(error);
        });
});

app.listen(process.env.PORT || 2000, () => console.log(`Listening on port ${port}`))

Package.json 用於服務器：

{
  "name": "example-create-react-app-express",
  "version": "1.0.0",
  "engines": {
    "node": "14.17.3"
  },
  "scripts": {
    "start": "node server.js",
    "client": "cd ../client && yarn start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  },
  "dependencies": {
    "axios": "^0.24.0",
    "body-parser": "^1.18.3",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "concurrently": "^4.0.1"
  }
}