bootstrap やら swagger やらに任せっきりで サーバーサイド JavaScript がどこまで行えるかを正しく把握していなかったので、Node.jsの理解の補填がてら覚書ます。
ゴール
- Node.jsでのサーバ構築内容を把握する
- HTTPメソッドの定義（& 動確）方法を把握する
環境整備
-
WSL を構築します。
- 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.jsconst 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.jsconst 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 -
利用手順
-
*.httpファイルを開きます。 -
Send Requestを実行します。
-
-
利用イメージ
FAQ
-
RequestError: connect ECONNREFUSED 127.0.0.1:5000.とエラー表示されて動かないんだが？項目 備考 原因 ドメイン解決できていないためサーバーのポートを通過できてません。 解決方法 ドメイン解決します。
具体的には、C:\Windows\System32\drivers\etc\hostsに localhost を足します。解決イメージ 