將 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}`));