Node.jsとExpressで簡易Webサーバーを作ってみる
どうもフロントエンドエンジニアのoreoです。
サーバーサイドのJavaScript実行環境であるNode.jsとそのフレームワークであるExpressを使って、簡単なWebサーバーを作成しました！
1 前準備
1-1 Node.jsのインストール
👇からインストールします。
1-2 プロジェクトディレクトリの作成
任意のディレクトリを作成し、そのディレクトリ内で、npm initを実行します。いろいろと質問されますが、スキップしたい場合は、npm init -yとします。ここでの質問内容を元にpackage.jsonが作成されます。
1-3 Expressのインストール
npm install express --saveを実行します。saveオプションを付けるとインストールしたExpressのバージョン情報が、packge.jsonに記載されます。
2 GetリクエストでJSONを取得する
2-1 ファイル作成
以下のようなapp.jsを作成します。
//expressモジュールの読み込み
const express = require('express')
//expressのインスタンス化
const app = express()
//8080番ポートでサーバーを待ちの状態にする。
//またサーバーが起動したことがわかるようにログを出力する
app.listen(8080, () => {
console.log("サーバー起動中");
});
//GETリクエストの設定
//'/get'でアクセスされた時に、JSONとログを出力するようにする
app.get('/', (req, res)=> {
res.json({ "pet": "dog"});
console.log('GETリクエストを受け取りました')
res.end();
})
2-2 GETリクエストを投げてみる
ターミナルでnode app.jsを実行し、サーバーを起動させます。サーバーが起動されると、「サーバー起動中」とログが出力されます。
curl -X GET http://localhost:8080/を実行してGETリクエストを投げると、{ "pet": "dog""}を取得できます(以下、右側のターミナル)。curlコマンドでは-XオプションでHTTPメソッドを指定できます。
また、サーバーを立ち上げているターミナルには「GETリクエストを受け取りました」のログが出力されます(以下、左側のターミナル)。
続いて、telnetコマンドでGETリクエストを投げてみます。telnet localhost 8080でwebサーバーにアクセスします。
以下のHTTPリクエストを投げてみます(最後に改行することを忘れないように)。
GET / HTTP/1.1
Host: localhost
curlコマンドと同様にJSONが取れました。ステータスコードなど、HTTPレスポンスのヘッダ情報も確認できます。
3 POSTリクエストで送信したJSONを確認する
3-1 ファイル作成
npm install body-parser --saveを実行して、HTTPリクエストを解析するbody-parserモジュールをインストールします。
2-1で作成したapp.jsを以下のように変更します。
const express = require("express");
const app = express();
//body-parserモジュールを読み込み初期化する
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
//HTTPリクエストのボディをjsonで扱えるようになる
app.use(bodyParser.json());
app.listen(8080, () => {
console.log("サーバー起動中");
});
//POSTリクエストの作成
app.post("/", (req, res) => {
//HTTPリクエストのボディを出力
console.log(req.body);
console.log("POSTリクエストを受け取りました");
res.end();
});
3-2 POSTリクエストを投げてみる
2-2同様に、ターミナルでnode app.jsを実行し、サーバーを起動させます。サーバーが起動されると、「サーバー起動中」とログが出力されます(以下、左側のターミナル)。
curl -X POST http://localhost:8080/ -H "Content-type: application/json" -d '{ "pet" : "cat" }'を実行するとサーバーに対して、{ "pet" : "cat" }がPOSTされ、それが確認できます(以下、左側のターミナル)。
curl -X POST http://localhost:8080/ -H "Content-type: application/json" -d '{ "pet" : "cat" }'では、-Hオプションで、HTTPリクエストのヘッダーに、"Content-type: application/json"つまり送信するデータがJSONであることを伝え、また-dで送信するJSONを記載しています。
続いて、telnetコマンドでPOSTリクエストを投げてみます。telnet localhost 8080でwebサーバーにアクセスします。
以下のHTTPリクエストを投げてみます。Content-TypeでHTTPリクエストのボディのデータ種類を設定し、Content-Lengthでボディの文字数を記載します(書かないとこけます)。また、HTTPヘッダーとHTTPボディの前に改行を入れることを忘れないでください。
POST / HTTP/1.1
Host: localhost
Content-Type: application/json
Content-Length: 17
{ "pet" : "cat" }
curlコマンドと同様にJSONをサーバーに送信し、それを確認することができました。
4 最後に
非常に簡単にWebサーバーを構築できて感動しました。普段フロントばかり触っているので、サーバーサイドができるようになると夢が広がります。また、curlやtelnetなどあまり使わないコマンドの勉強もできて有意義でした。別の機会でここら辺をもっと深堀したいと思います！
Discussion