错误：在 heroku 中部署使用 webpack 的节点应用程序

Question

我创建了一个项目，我的项目完美地在 localhost 上运行。我添加了一个 Procfile web: node src/server/index.js 更改了端口

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Our app is running on port ${ PORT }`);
});

用

更改了 package.json 脚本

"heroku-postbuild": "webpack -p --config ./webpack.prod.config.js --progress"

我仍然在 heroku 中看到以下错误。

2021-03-12T02:50:03.077192+00:00 app[web.1]: Your API key is XXXXXXXXXXXXXXXXXXXXXXX
2021-03-12T02:50:03.865164+00:00 heroku[web.1]: State changed from starting to up
2021-03-12T02:50:06.000000+00:00 app[api]: Build succeeded
2021-03-12T02:50:18.822287+00:00 heroku[router]: at=info method=GET path="/" host=deepa-nlp-app.herokuapp.com request_id=039d1ecd-ba3a-4370-8a55-5f9e55a0aa1e fwd="73.231.143.76" dyno=web.1 connect=0ms service=95ms status=500 bytes=436 protocol=https
2021-03-12T02:50:18.829600+00:00 app[web.1]: TypeError: path must be absolute or specify root to res.sendFile
2021-03-12T02:50:18.829611+00:00 app[web.1]:     at ServerResponse.sendFile (/app/node_modules/express/lib/response.js:425:11)
2021-03-12T02:50:18.829612+00:00 app[web.1]:     at /app/src/server/index.js:26:7
2021-03-12T02:50:18.829612+00:00 app[web.1]:     at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2021-03-12T02:50:18.829613+00:00 app[web.1]:     at next (/app/node_modules/express/lib/router/route.js:137:13)
2021-03-12T02:50:18.829613+00:00 app[web.1]:     at Route.dispatch (/app/node_modules/express/lib/router/route.js:112:3)
2021-03-12T02:50:18.829614+00:00 app[web.1]:     at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2021-03-12T02:50:18.829615+00:00 app[web.1]:     at /app/node_modules/express/lib/router/index.js:281:22
2021-03-12T02:50:18.829615+00:00 app[web.1]:     at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2021-03-12T02:50:18.829616+00:00 app[web.1]:     at next (/app/node_modules/express/lib/router/index.js:275:10)
2021-03-12T02:50:18.829616+00:00 app[web.1]:     at SendStream.error (/app/node_modules/serve-static/index.js:121:7)

这是我的项目文件结构enter image description here

这里是 server/index.js

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

const API_KEY = process.env.API_KEY;
const port = process.env.PORT || 8081;

const app = express();
app.use(cors());
// to use json
app.use(bodyParser.json());
// to use url encoded values
app.use(
  bodyParser.urlencoded({
    extended: true,
  })
);

app.use(express.static("dist"));

app.get("/", function (req, res) {
  res.sendFile("dist/index.html");
});

app.post("/analyze-sentiment", async (req, res) => {
  const response = await axios.get(
    `${req.body.BASE_URL}${API_KEY}&lang=${req.body.LANG}&url=${req.body.urlToAnalyzeInput}`
  );
  res.send(response.data);
});

app.listen(port, () => {
  console.log(`NLP app listening on port ${port}`);
  if (process.env.API_KEY) {
    console.log(`Your API key is ${process.env.API_KEY}`);
  } else {
    console.error("Please include a valid API key");
  }
});

我的项目使用 webpack，文件分为客户端、服务器和测试。

Webpack.prod.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Dotenv = require("dotenv-webpack");
const WorkboxPlugin = require("workbox-webpack-plugin");

module.exports = {
  entry: "./src/client/index.js",
  output: {
    libraryTarget: "var",
    library: "Client",
  },
  mode: "production",
  module: {
    rules: [
      {
        test: "/.js$/",
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/client/views/index.html",
      filename: "./index.html",
    }),
    new Dotenv(),
    new WorkboxPlugin.GenerateSW(),
    new MiniCssExtractPlugin({ filename: "[name].css" }),
  ],
};

这是我的 package.json

{
  "name": "project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "start": "node src/server/index.js",
    "build-prod": "webpack --config webpack.prod.js",
    "build-dev": "webpack-dev-server  --config webpack.dev.js --open"
  },
"keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "axios": "^0.21.1",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "node-fetch": "^2.6.1",
    "node-sass": "^4.14.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "engines": {
    "node": "12.16.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/preset-env": "^7.12.16",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.2",
    "dotenv-webpack": "^6.0.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^26.6.3",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "sass-loader": "^7.3.1",
    "style-loader": "^0.23.1",
    "terser-webpack-plugin": "^5.1.1",
    "webpack-dev-server": "^3.7.2",
    "workbox-webpack-plugin": "^6.1.0"
  }

Answer 1

添加了这行代码以按照福特https://stackoverflow.com/a/56653096/6741178 的建议部署代码，现在我可以部署我的应用了：D

"build": "webpack --mode production --config ./webpack.prod.js"