質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

303閲覧

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

miu1

総合スコア4

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2023/05/31 23:25

編集2023/05/31 23:41

実現したいこと

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など

project

1// プロジェクト構成 2 3root-project 4 - .vscode 5 - back-end 6 - dist 7 - src 8 - app.ts 9 - eslintrc.js 10 - package.json 11 - tsconfig.json 12 - webpack.config.js

package.json

1{ 2 "name": "back-end", 3 "version": "0.0.0", 4 "private": true, 5 "scripts": { 6 "start": "node dist/bundle.js", 7 "build": "webpack --config webpack.config.js", 8 "dev": "webpack serve --config webpack.config.js" 9 }, 10 "dependencies": { 11 "cookie-parser": "^1.4.4", 12 "cors": "^2.8.5", 13 "debug": "^2.6.9", 14 "ejs": "^2.6.1", 15 "express": "^4.16.1", 16 "helmet": "^7.0.0", 17 "http-errors": "^1.6.3", 18 "jade": "^1.11.0", 19 "morgan": "^1.9.1" 20 }, 21 "devDependencies": { 22 "@types/cookie-parser": "^1.4.3", 23 "@types/cors": "^2.8.13", 24 "@types/debug": "^4.1.8", 25 "@types/express": "^4.17.17", 26 "@types/http-errors": "^2.0.1", 27 "@types/morgan": "^1.9.4", 28 "@types/node": "^20.2.5", 29 "@typescript-eslint/eslint-plugin": "^5.59.7", 30 "eslint": "^8.41.0", 31 "eslint-config-prettier": "^8.8.0", 32 "eslint-config-standard-with-typescript": "^34.0.1", 33 "eslint-plugin-import": "^2.27.5", 34 "eslint-plugin-n": "^15.7.0", 35 "eslint-plugin-promise": "^6.1.1", 36 "html-webpack-plugin": "^5.5.1", 37 "prettier": "^2.8.8", 38 "rimraf": "^5.0.1", 39 "source-map-loader": "^4.0.1", 40 "ts-loader": "^9.4.3", 41 "ts-node": "^10.9.1", 42 "typescript": "^5.0.4", 43 "webpack": "^5.84.1", 44 "webpack-cli": "^5.1.1", 45 "webpack-dev-server": "^4.15.0", 46 "webpack-node-externals": "^3.0.0" 47 } 48}

tsconfig.json

1{ 2 "compilerOptions": { 3 "target": "es2016", 4 "module": "commonjs", 5 "rootDir": "src", 6 "sourceMap": true, 7 "outDir": "dist", 8 "esModuleInterop": true, 9 "forceConsistentCasingInFileNames": true, 10 "strict": true, 11 "skipLibCheck": true 12 }, 13 "include": ["src/**/*.ts"], 14 "exclude": ["node_modules"] 15}

webpack.config.js

1const path = require("path"); 2const nodeExternals = require("webpack-node-externals"); 3 4module.exports = { 5 mode: "development", 6 entry: "./src/app.ts", 7 target: "node", 8 output: { 9 path: path.resolve(__dirname, "dist"), 10 filename: "bundle.js", 11 }, 12 devtool: "source-map", 13 externals: [nodeExternals()], 14 resolve: { 15 extensions: [".ts", ".js"], 16 }, 17 module: { 18 rules: [ 19 { 20 test: /\.ts$/, 21 use: "ts-loader", 22 exclude: /node_modules/, 23 } 24 ], 25 }, 26 devServer: { 27 static: { 28 directory: path.join(__dirname, "dist"), 29 }, 30 compress: true, 31 port: 5000, 32 devMiddleware: { 33 publicPath: "/dist", 34 }, 35 hot: true, 36 // historyApiFallback: true, 37 }, 38};

app.ts

1// express-generatorで作成したapp.jsをsrc/app.tsに変更し、コードをTypeScript化したもの 2 3import express, { Request, Response, NextFunction } from "express"; 4import cookieParser from "cookie-parser"; 5import createError from "http-errors"; 6import logger from "morgan"; 7 8const app = express(); 9 10app.use(logger("dev")); 11app.use(express.json()); 12app.use(express.urlencoded({ extended: false })); 13 14app.use(cookieParser()); 15 16// テスト用Hello World 17app.get("/", (req, res) => { 18 res.status(200).send("Hello, World!"); 19}); 20 21const port = 5000; 22 23app.listen(port, () => { 24 console.log(`Server is running on port ${port}`); 25}); 26 27/* 一旦コメントアウト 28// catch 404 and forward to error handler 29app.use((req: Request, res: Response, next: NextFunction) => { 30 next(createError(404)); 31}); 32 33// error handler 34app.use((err: any, req: Request, res: Response, next: NextFunction) => { 35 // set locals, only providing error in development 36 res.locals.message = err.message; 37 res.locals.error = req.app.get("env") === "development" ? err : {}; 38 39 // render the error page 40 res.status(err.status || 500); 41 res.render("error"); 42}); 43 */

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miu1

2023/06/01 00:58

ありがとうございます。 なるほどです、なのでwebpack-dev-serverは動かず、 npm run build, npm run startしたものはnodeで動いていたんですね。 バックエンドはnodemonとか使う必要がありそうです。
guest

回答1

0

自己解決

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からは削除できないので注意が必要です。

投稿2023/06/01 01:17

編集2023/06/01 01:19
miu1

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。