webpack-dev-serverを使っているnodeのHerokuのデプロイ

Question

ローカル下ではnpm run serverと叩くと動くnodeを作っています。

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsc": "tsc -p .",
    "tslint": "tslint -p .",
    "typedoc": "typedoc -p .",
    "webpack": "webpack",
    "server": "webpack-dev-server"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@types/pixi.js": "^5.0.0",
    "ts-loader": "^8.0.3",
    "tslint": "^6.1.3",
    "tslint-config-airbnb": "^5.11.2",
    "typedoc": "^0.19.0",
    "typescript": "^4.0.2",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "pixi-sound": "^3.0.5",
    "pixi.js": "^5.3.3"
  }
}

そのままデプロイしようとするとできなかったので
heroku set: NPM_CONFIG_PRODUCTION=false
を叩きました。

remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:
remote:        Resolving node version 12.x...
remote:        Downloading and installing node 12.20.1...
remote:        Using default npm version: 6.14.10
remote:        
remote: -----> Restoring cache
remote:        - node_modules
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules
remote:        
remote:        > fsevents@1.2.13 install /tmp/build_17cb6e18/node_modules/webpack-dev-server/node_modules/fsevents
remote:        > node install.js
remote:
remote:        
remote:        Skipping 'fsevents' build as platform linux is not supported
remote:        
remote:        > fsevents@1.2.13 install /tmp/build_17cb6e18/node_modules/watchpack-chokidar2/node_modules/fsevents
remote:        > node install.js
remote:
remote:        
remote:        Skipping 'fsevents' build as platform linux is not supported
remote:        added 702 packages in 12.763s
remote:        
remote: -----> Build
remote:
remote: -----> Caching build
remote:        - node_modules
remote:        
remote: -----> Pruning devDependencies
remote:        Skipping because NPM_CONFIG_PRODUCTION is 'false'
remote:        
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:
remote: -----> Compressing...
remote:        Done: 65M
remote: -----> Launching...
remote:        Released v22

ビルドはうまくいきますがそのあとのデプロイがうまくいきません。

web: npm run server

と一応はしているのですがよくわかっていません。webpack-dev-server以外のコマンドが必要でしょうか？また、heroku-postbuildも記述しておりません。

2021-01-08T03:49:27.000000+00:00 app[api]: Build started by user hoge//以下個人情報はhogeとします
2021-01-08T03:49:58.685602+00:00 app[api]: Deploy 8a5ba794 by user hoge
2021-01-08T03:49:58.685602+00:00 app[api]: Release v22 created by user hoge
2021-01-08T03:49:59.169606+00:00 heroku[web.1]: State changed from crashed to starting
2021-01-08T03:50:03.000000+00:00 app[api]: Build succeeded
2021-01-08T03:50:07.435947+00:00 heroku[web.1]: Starting process with command `npm run server`
2021-01-08T03:50:11.691622+00:00 app[web.1]: 
2021-01-08T03:50:11.691722+00:00 app[web.1]: > npm@1.0.0 server /app
2021-01-08T03:50:11.691723+00:00 app[web.1]: > webpack-dev-server
2021-01-08T03:50:11.691723+00:00 app[web.1]:
2021-01-08T03:50:15.277334+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://localhost:20755/
2021-01-08T03:50:15.284599+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from /
2021-01-08T03:50:15.284966+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from www
2021-01-08T03:51:08.052863+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch2021-01-08T03:51:08.079921+00:00 heroku[web.1]: Stopping process with SIGKILL
2021-01-08T03:51:08.234704+00:00 heroku[web.1]: Process exited with status 137
2021-01-08T03:51:08.274212+00:00 heroku[web.1]: State changed from starting to crashed
2021-01-08T03:51:09.976616+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/index.html" host=hoge.herokuapp.com request_id=5e1790bf-88fd-42c9-9817-b932436e7496 fwd="124.145.183.240" dyno= connect= service= status=503 bytes= protocol=https
2021-01-08T03:51:10.240070+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hoge.herokuapp.com request_id=de676b36-6413-4650-b49f-307357c5a70d fwd="124.145.183.240" dyno= connect= service= status=503 bytes= protocol=https
2021-01-08T03:52:08.881651+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/index.html" host=hoge.herokuapp.com request_id=17036e41-c172-4929-be4f-6f59c89a267e fwd="124.145.183.240" dyno= connect= service= status=503 bytes= protocol=https
2021-01-08T03:52:09.180226+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hoge.herokuapp.com request_id=a4c54c66-a4c2-44cf-ba0d-47507d36aaeb fwd="124.145.183.240" dyno= connect= service= status=503 bytes= protocol=https

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
がエラーメッセージらしく、調べたところポート番号をいじればよいとのことだったので

const path = require('path');

module.exports = (env, argv) => {
  return {
    mode: 'production',
    entry: {
      index: path.join(__dirname, 'src', 'index.ts'),
    },
    output: {
      path: path.join(__dirname, 'www'),
      filename: 'npm.js',
      library: 'npm',
      libraryTarget: 'umd'
    },

    module: {
      rules: [
        {
          test: /.ts$/,
          use: [{ loader: 'ts-loader' }]
        }
      ]
    },
    devServer: {
      contentBase: 'www',
      port: process.env.PORT || 5000 //問題の箇所
    },
    resolve: {
      extensions: ['.ts', '.js'],
      modules: [
        "node_modules"
      ]
    },
  }
};

としているのですが改善が見られません。どうすればよろしいでしょうか？

Answer 1

awsへのデプロイで妥協した