More than 1 year has passed since last update.

Node.jsでWebサーバーを稼働させてHTTPメソッドを確認する

Last updated at 2023-07-11Posted at 2023-07-11

bootstrap やら swagger やらに任せっきりでサーバーサイド JavaScript がどこまで行えるかを正しく把握していなかったので、Node.jsの理解の補填がてら覚書ます。

Bootstrap · 世界で最も人気のあるフロントエンドフレームワーク

API Documentation & Design Tools for Teams | Swagger

Node.js とは | Node.js

ゴール

Node.jsでのサーバ構築内容を把握する
HTTPメソッドの定義（& 動確）方法を把握する

環境整備

WSL を構築します。

WSL を使用して Windows に Linux をインストールする
- bashの調整はここでは割愛します。
- 以降コマンドはwslコンソール上のコマンドを指します。
  （Ubuntuでもそのまま使えるね）
パッケージマネージャを更新します。
```
sudo apt-get update
sudo apt-get upgrade -y
```
Node.js をインストールします。
```
sudo apt install npm -y
```

ファイルの整備

package.json

パッケージマネージャ経由で express と nodemon をインストールします。
```
npm init -y
npm i express mongoose
```

scripts を修正します。

 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
+  "start": "node ./src/server.js",
+  "server": "nodemon ./src/server.js"
 },

src/server.js

server.js を作成します。
```
mkdir -p src
touch src/server.js
```

server.js を編集します。（Port: 5000）

const express = require("express");
const port = 5000;
const app = express();
app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

疎通確認

package.jsonを開き、
デバッグ を選択し、server を選択します。
直接コマンドで稼働させても良いかと。
```
npm run server
```

HTTPメソッド

応答を返すWebサーバーの作成

controller を作成します。

mkdir -p backend/controller
touch backend/controller/todoRoutes.js

const getTodos = (req, res) => {
  res.status(200).json({ message: "Get todos" });
};
const setTodo = (req, res) => {
  res.status(200).json({ message: "Set todo" });
};
const updateTodo = (req, res) => {
  res.status(200).json({ message: `Update todo ${req.params.id}` });
};
const deleteTodo = (req, res) => {
  res.status(200).json({ message: `Delete todo ${req.params.id}` });
};
module.exports = {
  getTodos,
  setTodo,
  updateTodo,
  deleteTodo,
};

routes を作成します。

mkdir -p backend/routes
touch backend/routes/todoRoutes.js

const express = require("express");
const router = express.Router();
const {
  getTodos,
  setTodo,
  updateTodo,
  deleteTodo,
} = require("../controllers/todosController");
router.route("/").get(getTodos).post(setTodo);
router.route("/:id").put(updateTodo).delete(deleteTodo);
module.exports = router;

server.js を修正します。

  const app = express();
+ app.use("/api/todos", require("./backend/routes/todoRoutes"));
  app.listen(port, () => {

動作確認

curlコマンドを用いる場合

動作方法その1

事前準備（jqインストール）

sudo apt install jq

jq は、軽量で柔軟なコマンドライン JSON プロセッサです。

今回はレスポンスを見やすく整形するために使います。

CRUD

Create

curl -X POST http://localhost:5000/api/todos -m 3 | jq

{
  "message": "Set todo"
}

Read

curl -X GET http://localhost:5000/api/todos -m 3 | jq

{
  "message": "Get todos"
}

Update

curl -X PUT http://localhost:5000/api/todos/1 -m 3 | jq

{
  "message": "Update todo 1"
}

Delete

curl -X DELETE http://localhost:5000/api/todos/2 -m 3 | jq

{
  "message": "Delete todo 2"
}

test.http を用いる場合

動作方法その2

事前準備（REST Clientインストール）

拡張機能で rest で検索します。
REST Client をインストールします。

CRUD

ファイル作成
```
mkdir -p test
touch test/test.http
```

ファイル編集

GET http://localhost:5000/api/todos/ HTTP/1.1
###
POST http://localhost:5000/api/todos/ HTTP/1.1
###
PUT  http://localhost:5000/api/todos/1 HTTP/1.1
###
DELETE  http://localhost:5000/api/todos/2 HTTP/1.1

利用手順
1. *.http ファイルを開きます。
2. Send Request を実行します。
利用イメージ

FAQ

RequestError: connect ECONNREFUSED 127.0.0.1:5000. とエラー表示されて動かないんだが？

項目	備考
原因	ドメイン解決できていないためサーバーのポートを通過できてません。
解決方法	ドメイン解決します。具体的には、`C:\Windows\System32\drivers\etc\hosts` に localhost を足します。
解決イメージ

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up