将 github 回购协议部署到铁路。 应用程序结果 - 应用程序错误您的应用程序是否正确侦听 $PORT？

Question

我正在将我的项目部署到 railway.app 并收到此错误 Application Error Is your app correctly listening on $PORT?。

它是 JS 和 jQuery 的混合，但后来我添加了 webpack.config.js，这样我就可以隐藏我的 api 密钥。 现在在开发中完美运行，但我在部署时遇到以上错误。 有人可以帮忙解决这个问题吗？

我的 webpack.config.js

require('dotenv').config({ path: './.env' }); 
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const Dotenv = require('dotenv-webpack')
const api_key = process.env.KEY;

module.exports = {
entry: [
  'webpack-dev-server/client?http://0.0.0.0:80',
    'webpack/hot/only-dev-server',
  './assets/js/script.js',
],
  output: {
    
    filename: 'bundle.js',
    
  },
  devtool: 'source-map',
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      },
      
      { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
    ]
  },
  devServer: {
    contentBase: "./assets/",
   
    hot: true,
    open: true,
    port: 8000,
    watchContentBase: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './assets/index.html',
      filename: 'index.html',
      inject: 'body',
      inlineSource: 'output.bundle.js',
  
      apiUrl: `https://maps.googleapis.com/maps/api/js?key=${api_key}&libraries=places`,

    }),
    new Dotenv()
  ]
}

package.json

{
  "homepage": "xxxxxxxxxx",
  "name": "xxxxxxxxxxn",
  "version": "1.0.0",
  "description": "xxxxxxxx",
  "main": "./assets/js/script.mjs",
  "type": "commonjs",
  
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --mode=development"
  },
  "repository": {
    "type": "git",
    "url": "xxxxxxxxxx"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "xxxxxxxxxx"
  },
  "dependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babel-loader": "^8.0.6",
    "dotenv-webpack": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  },
  "devDependencies": {
    "css-loader": "^5.2.7",
    "gh-pages": "^4.0.0",
    "style-loader": "^2.0.0"
  }
}

railway.app 部署日志

npm WARN config production Use `--omit=dev` instead.
> explore-copenhagen@1.0.0 start
> webpack-dev-server --mode=development
Failed to load ./.env.
ℹ ｢wds｣: Project is running at http://localhost:8000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./assets/
ℹ ｢wdm｣: Hash: 6e346835de0c05dad8d4
Version: webpack 4.38.0
Time: 2807ms
Built at: 11/09/2022 9:55:10 AM
Asset      Size  Chunks             Chunk Names
bundle.js   617 KiB    main  [emitted]  main
bundle.js.map   684 KiB    main  [emitted]  main
index.html  10.4 KiB          [emitted]
Entrypoint main = bundle.js bundle.js.map
[0] multi (webpack)-dev-server/client?http://localhost:8000 (webpack)/hot/dev-server.js webpack-dev-server/client?http://0.0.0.0:80 webpack/hot/only-dev-server ./assets/js/script.js 76 bytes {main} [built]
[./assets/css/style.css] 1.33 KiB {main} [built]
[./assets/js/script.js] 11.1 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:80] (webpack)-dev-server/client?http://0.0.0.0:80 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8000] (webpack)-dev-server/client?http://localhost:8000 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.77 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.63 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/webpack/hot/only-dev-server.js] (webpack)/hot/only-dev-server.js 2.52 KiB {main} [built]
+ 31 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./assets/index.html] 10.7 KiB {0} [built]
[./node_modules/lodash/lodash.js] 531 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.

Answer 1

确保您使用的是 PORT 环境变量。 我在webpack.config.js文件中看到，您始终使用端口 8000 而不是 PORT 环境变量。

例如，由于使用 static 端口，我在 Node.js 应用程序中遇到了同样的问题，始终是端口 4000：

app.listen(4000, () => console.log(`Server running on port ${PORT}`));

是一个小修复，使用环境变量

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