将GitHub仓库部署至Railway.app遇应用错误：未正确监听$PORT？

云上老周

2026-8-13

问题描述

部署项目至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}&amp;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"
  }
}

部署日志

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.

解决方案

核心问题分析

生产环境误用开发服务器：当前start脚本运行webpack-dev-server，这是本地开发工具，仅监听localhost:8000，不会响应railway分配的$PORT环境变量，导致外部无法访问。
缺少静态文件托管服务：webpack打包后的文件需要通过生产级静态服务器托管，而非开发服务器。
环境变量加载问题：部署日志显示.env文件加载失败，railway需通过平台控制台设置环境变量，无需上传.env文件。

具体修复步骤

修改package.json脚本

安装静态服务器依赖：npm install serve --save

更新scripts配置，区分开发和生产启动命令：

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist",
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode=production", // 明确生产模式打包
  "dev": "webpack-dev-server --mode=development", // 开发环境命令
  "start": "npx serve -s dist -l $PORT" // 生产环境用serve托管dist，监听$PORT
}

调整webpack.config.js
- 添加path依赖，指定打包输出目录：
```
const path = require('path'); // 顶部新增
```
- 移除entry中的开发服务器相关入口，保留业务代码入口：
```
entry: [
  './assets/js/script.js',
],
```
- 配置output的path为dist目录：
```
output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist'),
},
```
- 可注释或移除开发环境专属配置（devServer、HotModuleReplacementPlugin），避免生产打包冗余。
在railway设置环境变量
- 进入railway项目控制台，找到「Variables」选项。
- 添加KEY变量，值为你的API密钥。
验证并重新部署
- 本地运行npm run build，确认dist目录生成bundle.js和index.html。
- 提交代码到仓库，railway会自动触发重新构建部署。

内容的提问来源于stack exchange，提问作者Sohail Shams

将GitHub仓库部署至Railway.app遇应用错误：未正确监听$PORT？

webpack.config.js #

package.json #

核心问题分析 #

具体修复步骤 #

webpack.config.js

package.json

核心问题分析

具体修复步骤