VS CodeでTypeScript×Express.jsのAPIをWebPackの開発サーバーで実行できるようにしたい。

Question

実現したいこと

VS CodeでTypeScript×Express.jsのAPIをWebPackの開発サーバーで実行できるようにしたいです。　

back-end/srcにメインのapp.tsを配置してテスト用のメソッドを用意しています。

まずコマンドから実行できるかのテストをしています。

・cd back-end、npm run build、npm run startコマンド実行後、localhost:5000にアクセスするとHello Worldを表示できる。

・サーバーを停止してから、npm run devコマンド実行後、localhost:5000にアクセスするとコマンド実行自体は成功する(警告もなし)が、ブラウザアクセス時にCannot GET / となる。

のようになり、npm run dev時にうまくいきません。

原因わかるかたいらっしゃいましたら、アドバイスいただきたいです。
よろしくお願いいたします。

プロジェクト構成、設定ファイル、app.tsなど

// プロジェクト構成

root-project
    - .vscode
    - back-end
        - dist
        - src
            - app.ts
    - eslintrc.js
    - package.json
    - tsconfig.json
    - webpack.config.js 

{
  "name": "back-end",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node dist/bundle.js",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack serve --config webpack.config.js"
  },
  "dependencies": {
    "cookie-parser": "^1.4.4",
    "cors": "^2.8.5",
    "debug": "^2.6.9",
    "ejs": "^2.6.1",
    "express": "^4.16.1",
    "helmet": "^7.0.0",
    "http-errors": "^1.6.3",
    "jade": "^1.11.0",
    "morgan": "^1.9.1"
  },
  "devDependencies": {
    "@types/cookie-parser": "^1.4.3",
    "@types/cors": "^2.8.13",
    "@types/debug": "^4.1.8",
    "@types/express": "^4.17.17",
    "@types/http-errors": "^2.0.1",
    "@types/morgan": "^1.9.4",
    "@types/node": "^20.2.5",
    "@typescript-eslint/eslint-plugin": "^5.59.7",
    "eslint": "^8.41.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-standard-with-typescript": "^34.0.1",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-n": "^15.7.0",
    "eslint-plugin-promise": "^6.1.1",
    "html-webpack-plugin": "^5.5.1",
    "prettier": "^2.8.8",
    "rimraf": "^5.0.1",
    "source-map-loader": "^4.0.1",
    "ts-loader": "^9.4.3",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.4",
    "webpack": "^5.84.1",
    "webpack-cli": "^5.1.1",
    "webpack-dev-server": "^4.15.0",
    "webpack-node-externals": "^3.0.0"
  }
}

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "src",
    "sourceMap": true,
    "outDir": "dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

const path = require("path");
const nodeExternals = require("webpack-node-externals");

module.exports = {
  mode: "development",
  entry: "./src/app.ts",
  target: "node",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  devtool: "source-map",
  externals: [nodeExternals()],
  resolve: {
    extensions: [".ts", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      }
    ],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: 5000,
    devMiddleware: {
      publicPath: "/dist",
    },
    hot: true,
    // historyApiFallback: true,
  },
};

// express-generatorで作成したapp.jsをsrc/app.tsに変更し、コードをTypeScript化したもの

import express, { Request, Response, NextFunction } from "express";
import cookieParser from "cookie-parser";
import createError from "http-errors";
import logger from "morgan";

const app = express();

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use(cookieParser());

// テスト用Hello World
app.get("/", (req, res) => {
  res.status(200).send("Hello, World!");
});

const port = 5000;

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

/* 一旦コメントアウト
// catch 404 and forward to error handler
app.use((req: Request, res: Response, next: NextFunction) => {
  next(createError(404));
});

// error handler
app.use((err: any, req: Request, res: Response, next: NextFunction) => {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});
 */

Comments

[hoshi-takanori]

webpack-dev-server はフロントエンドで動く js コードを自動的にビルドしてブラウザでホットリロードしてくれるやつで、バックエンド用ではなかったはず…。
https://js.studio-kingdom.com/webpack/api/webpack_dev_server#combining_with_an_existing_server

[miu1]

ありがとうございます。
なるほどです、なのでwebpack-dev-serverは動かず、
npm run build, npm run startしたものはnodeで動いていたんですね。

バックエンドはnodemonとか使う必要がありそうです。

Answer 1

webpack-dev-serverはフロントエンド用ということがわかりました。

次の手順で実施し、実行できました。
①nodemonをインストール

cd back-end
npm install --save-dev nodemon

②package.jsonのscriptに次のコマンドを追加
"dev": "nodemon --exec ts-node src/app.ts"
③実行

npm run dev

しかし注意点として、
npm runを実行するためには、
コンソールにwebpack-cliが必要とコンソールに通知がありました。
そしてwebpack-cliにはwebpack-dev-serverが必要ともありました。

そのため、webpack-dev-serverは使用しなくても、devDependenciesからは削除できないので注意が必要です。