常連

### 実現したいこと
- [ ] cssファイルを読み込む
- [ ] jsファイルを読み込む
### 前提
ゲームのbuttonを作っています。
ですが、<link type="text/css" rel="stylesheet.css">でindex.ejsにCSSが読み込めませんでした。
また、<script  type="text/javascript" language="javascript" src="game.js"></script>
私なりに調べてみたところ、Node.jsが理由で、CSSが読み込まれないと思われるのですが、ネットに記載されている方法を試してみてもできませんでした。
ご協力お願いします。

### 該当のソースコード

```index.js
'use strict';
const express = require('express');
const app = express();
const http = require('http');
const path = require('path');
app.use(express.static(path.join(`${__dirname}views`)));
app.get('/', (req, res) => {
  res.render('index.ejs');
});
const server = http.createServer(app);
const port = 3000;
server.listen(port, () => {
  console.log(`Server is running on port ${port}!`);
});
```

```index.ejs
<!DOCTYPE html>
<html lang="ja" dir="ltr">  
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テスト</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
  </head>
  <body> 
    <p id="watch">button</p>
    <script  type="text/javascript" language="javascript" src="/js/game.js">
</script>
  </body>
</html>
```

```file
index.ejs
views - css - stylesheet.css
      - index.ejs
      -js - game.js
```
### 補足情報
[replit](https://replit.com)を使用しています。


Node.jsでcss ,jsファイルを読み込みたいです。

### 実現したいこと
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を表示できる。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-06-01/adcf82e3-fe37-4e54-a710-6d20cd1f3d44.png)

・サーバーを停止してから、npm run devコマンド実行後、localhost:5000にアクセスするとコマンド実行自体は成功する(警告もなし)が、ブラウザアクセス時にCannot GET / となる。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-06-01/ac8eb27c-e6d9-44c8-bac7-4a61f053fd6e.png)

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

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

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

```project
// プロジェクト構成

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

```package.json
{
  "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"
  }
}
```

```tsconfig.json
{
  "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"]
}
```

```webpack.config.js
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,
  },
};
```

```app.ts
// 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");
});
 */
```



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

現在案件でnode.js Expressを使用しています。（サーバーはApache）

そこで気になったのが

Expressの処理がレスポンスを行わずに終了した場合、内部のプロセスを終了する記述は必要でしょうか?

もし、プロセス終了に関する記述のない場合、EXPRESS内部に実行中のプロセスが同時に存在し、新しいリクエストが受け付けられなくなるなどということはありますでしょうか?



（node.js）ExpressにはSQLサーバーのようなクローズの概念、また、同時接続数はありますか

### 実現したいこと。
- [ ]Javascript 非同期処理の中でsubmit処理を中断させたい

### 前提
jspページで従業員登録や更新、削除ができる画面を作成中です。
従業員番号がすでに登録されている場合フォーム送信を中断し
エラー文を表示する機能を実装したのですがエラー文が一瞬表示された後
画面遷移が中断されず遷移してしまいます。

非同期処理の中で画面遷移を阻止する方法知りたいです。


### 発生している問題・エラーメッセージ
event.preventDefault()で画面遷移を防ぐはずが中断されず遷移してしまう。
### 該当のソースコード

```javascript

//入力されたEMPNOを送信し重複してないかを判定する
	return new Promise(resolve =>{

		fetch('http://localhost:3000/judgeEmpNo',{
			method: 'POST',
	  		headers: { 'Content-Type': 'application/json' },
	  		signal:signal,
                        //ここで編集中の従業員番号を送信
	  		body: JSON.stringify({empNo:empNo})
		})
		.then(response => response.json())
		.then(data =>{
			console.log(data);

			if(!data.length <= 0){
			//重複しているかどうかを従業員IDで判断
				if(!(Number(data[0].empId) == Number(empId))){
                //ここで画面遷移を中断させたい
                event.preventDefault();
					error.textContent='そのempNoはすでに登録されています';
				}else{
					error.textContent='';
					resolve();
				}
			}else{
				error.textContent='';
				resolve();
			}
		})
//node express側

//empNoが重複してないかチェックする

app.post('/judgeEmpNo',(req,res)=>{
	console.log('from / judgeEmpNo');
	let empNo = req.body.empNo;
	empNo = Number(empNo);
	connection.query(`select empId from Employee where empNo=${empNo}`,(err,result,field)=>{
		if (err) throw err;
		console.log(result);
		res.json(result);
	});
	
});

```

### 試したこと

送信ボタンの要素にdisable=Trueをして無効化しようとしたが失敗した
フォームのonSubmitで関数を実行し戻り値をfalseにして無効化しようとしたが失敗した。


### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


Javascript 非同期処理の中で画面遷移を阻止する方法

### 実現したいこと

・ユーザーのアイコン画像とホーム画像を自由に設定できるようにしたい。
・mongodbに画像のパスのみを保存して、画像自体はAWSのS3に保存したい。


### 前提

フロントエンド：React
バックエンド：Node.js (Express)
データベース：MongoDB
でSNSアプリを作っています。

ユーザーがアイコン画像とホーム画像を自由に設定できるようにしたいのですが、直接データベースに保存すると、処理に時間がかかるというコメントを以前どこかで拝見しました。
そのため、現在は画像の相対パスのみをMongoDBに保存し、画像自体は静的ファイルにして配置しています。

しかし、将来的に画像自体もデータベース上に保存したいため、AWSのS3に画像を保存して相対パスはMongoDBに保存するのが適していると初学者ながら、考えました。

React
↓↑
Node.js (Express)
↓↑
MongoDB
…………………………
↓↑　(画像関連の処理のときのみ)
AWS (S3)

このような場合のMongoDBとAWS(S3)の接続方法を教えていただきたいです。

初学者でお見苦しい質問かと思いますが、ご教授いただければ幸いです。
よろしくお願いいたします。



画像をS3に保存したいのですが方法がわかりません。

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
https://reffect.co.jp/node-js/express-js-connect-mysql
上のサイトでmodemonをインストールし、express.jsからMySQLへの接続をしていました。
npx modemon app.js　ターミナルで左のコマンドを実行したら以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ

```
//ターミナル
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 3306,
  fatal: true
```

### 該当のソースコード

```ここに言語名を入力
//app.js
const express = require('express')
const app = express()
const port = 3000;

const mysql = require('mysql');

const con = mysql.createConnection({
	host: 'localhost',
	user: 'root',
	password: '',
});

con.connect(function(err) {
	if (err) throw err;
	console.log('Connected');
});


app.get('/', (req,res) =>{
  res.send('hello world')
})

app.listen(port, () => console.log(`exaple app listening on port ${port}`))


```

### 試したこと

npm installをしてみましたがどう解決するのかわかりません。
教えて下さいお願いいたします

express.jsからMySQLへの接続でError: connect ECONNREFUSED 127.0.0.1:3306がわかないです

現在、expressを用いて簡単なファイルアップロード機能の実装をしております。複数のファイルをformDataを用いて送信し、node.jsのmulterで受信するというものです。

```ここに言語を入力
var upload = multer({ dest: 'uploaded/' });
router.post('/', upload.array('files[]'), function(req, res){
  var filepath = req.body.filepath;
  var files = req.files;
  
  for(var i=0; i<filepath.length; i++){
    console.log(filepath[i]);
    console.log(files[i]);
  }
  
  res.send("ok");
});
```

このlengthに対して「Cannot read property 'length' of undefined」がブラウザで表示されます。しかしサーバサイドではファイル数であるlengthが数字として確認できており正常に動いております。

なぜブラウザ側ではエラー表示されてしまうのでしょうか？
わかる方よろしくお願いします。

なぜ「Cannot read property 'length' of undefined」が表示されるかわからない

### 実現したいこと

Node.js+expressで構築したAPIサーバーで同時リクエストを並列処理したい。

(例)
リクエストを受け付けてからレスポンスを返すまでに3秒かかる処理があるとする。
3台のクライアントが同時に該当のURIにリクエストを送信した際に、下記のような順番で処理をしてほしい。

- [ ] ① クライアント1のリクエストを受け付け・処理を開始
- [ ] ② クライアント2のリクエストを受け付け・処理を開始
- [ ] ③ クライアント3のリクエストを受け付け・処理を開始
- [ ] (3秒の処理)
- [ ] ④ ①の処理が完了・レスポンスを返す
- [ ] ⑤ ②の処理が完了・レスポンスを返す
- [ ] ⑥ ③の処理が完了・レスポンスを返す


### 前提

Node.js+expressでAPIサーバーを構築しています。

同時リクエストに対して、並列で処理を行いレスポンスを返却したいのですが、上手く実装できず、ご質問させていただきます。

### 該当のソースコード

```JavaScript
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

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

app.get('/', (req, res) => {
    console.log("accept request");
    
    let resMsg = '';

    setTimeout(() => {
        // 3秒後にレスポンスメッセージが決まり、レスポンスが送信可能
        resMsg = 'THIS IS RESPONSE MESSAGE';
        console.log("send response");
        res.send(resMsg);
    }, 3000);
})
```

### 試したこと

上記コードで起動したサーバーの該当URIとportに同時に3回リクエストを送った際、
3つの処理が同期的に処理され、コンソールログは下記のようになってしまいます。(acceptとsendのログの間に3秒間の間があり、全体で9秒かかっている)

```
Listening on port 3000...
accept request
send response
accept request
send response
accept request
send response
```

実現させたい動きは、1番目のレスポンスを送信する前に2番目のリクエストを受け付けるようにすることです。
その場合コンソールログは、下記のようになることを想定しております。(ほぼ同時にacceptログが3回出て3秒後にsendログが3回出力され、全体の処理も3秒程度で完了する)
```
Listening on port 3000...
accept request
accept request
accept request
send response
send response
send response
```

Node.jsではノンブロッキングI/O処理によって、大量リクエストの並列処理が可能という情報があり、上記コードで実現できると思っていたのですが上手くいかず、、
そもそもレスポンスを返す前に、同じURIのリクエストを受け付けることが可能なのでしょうか。。
実現方法をご教示いただけますと幸いです。

### 補足情報（バージョン）

|Module|Ver.|
|:--|:-|
|Node.js|v14.18.1|
|express|4.18.2|
