Node.js (2) サーバー構築編
前回のNode.jsとは？の続きからです。
今回から実際にサーバー構築していきます。
server.jsファイルに
const http = require("http")
を書き、モジュールで設定したhttpをrequire（読み込む）しましょう。 こちらのドキュメントにも書かれてますが、要はクライアントとサーバーでやり取りできるようにする設定ですね。
次にwebサーバーを作っていきます。
const server = http.createServer()
server設定するのにhttpモジュールとcreateServer関数を使用します。
（この関数はあらかじめ用意されています）
この中に引数を取り、アロー関数で記載していきます。
// webサーバーを作る。
const server = http.createServer((req, res) => {
// ブラウザからアクセスが来た時の処理
res.writeHead(200, { "Content-Type": "text/html" });
req,resはリクエストとレスポンスになっていて、情報にアクセスするとreqとresが受け取れます。
もちろん、リクエストとレスポンスはブラウザからアクセスが来た命令になります。
次に、resの中にwriteHead()という関数があります。
resが来たときにwriteHead()を返しますよという意味です。
HeadはHeader情報ですね。HTMLで言うヘッダー情報（言語やdiscription）です。
まず200を返します。200はアクセス成功したステータスコード。
404や500のエラーはよく見ますよね。
第２引数に{ "Content-Type": "text/html" }でhtmlのtextを処理します。
この後に
res.write("<h1>Hello World</h1>");
でresの中にHTMLのような記述でbody要素に書き込みます。
最後に
res.end();
で書き込みを終了します。
ここまでできたらサーバーを起動させましょう。
関数の外に
server.listen();
listen()と言う関数にPORT番号を指定します。
PORTは港と言う意味で、どこに船を留めるか見たいな意味合いです。
大体3000~8000で指定できますが、今回は8000でやってみます。
上の方に設定します。
const PORT = 8000;
そしてlisten()の第２引数にconsole.log("server running!")を入れて
このようになります。
const http = require("http");
const PORT = 8000;
// webサーバーを作る。
const server = http.createServer((req, res) => {
// ブラウザからアクセスが来た時の処理
res.writeHead(200, { "Content-Type": "text/html" });
res.write("<h1>Hello World</h1>");
res.end();
});
server.listen(PORT, () => {
console.log("server running!");
});
npm run devをターミナルに打ち込んで、起動させます。
server running!が表示されていたらOKです。
localhost:8000でも表示されているか試してみましょう。
chromeにlocalhost:8000を打ち込んでenterを押すと表示されます。
これで無事にres.write("<h1>Hello World</h1>");ここが返されているのがわかりました。
でも<h1>Hello World</h1>こんな感じで打ち込んでいたらめちゃめちゃ大変！
と言うことで、index.htmlファイルを作り、そこにHTMLを記載していきます。
!を押して雛型を作り、<h1>HTMLファイルだよ</h1>でタイトルをつけてみます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>HTMLファイルだよ</h1>
</body>
</html>
そしてこのファイルをサーバーで読み込みます。
server.jsに戻り、
const html = require("fs").readFileSync("./index.html")
こちらを設定します。fsというのはファイルを処理してくれるもので、あらかじめ用意されています。
で、.readFileSync()この関数内に"./index.html"を入れてファイルを読み込んでくれます。
（Syncは非同期処理の意味）
そしてこのhtmlを
res.write(html);
ここに書き込みます。
これでもう一度npm run devで起動させます。
(一度サーバーを落としましょう）
するとうまくHTMLファイルを表示できました。
できましたが、いちいちサーバー落として起動させるのめんどいですよね？
便利なものがあります！
ターミナルにnpm install -g nodemon を打ち込んでインストールします。
nodemonを入れることにより、リロードしたら勝手に変えてくれるモジュールになります。
インストールされたらpackage.jsonの
"scripts": {
"dev": "node server.js"
},
ここを
"scripts": {
"dev": "nodemon server.js"
},
に変更してください。
これで再度、npm run devで再起動しHTMLファイルを変更してリロードするだけで変更されます。
あとは例えば、
if (req.method === "GET") {
}
if(req.method === "POST") {
}
を入れてGETメソッド、POSTメソッドで取得情報を変えるというのも可能です。
という感じでサーバーを自作で作れるのがNode.jsの強みです。
が、単体で使うことは少なく、expressというフレームワークを使い、効率よく書いていくのが一般的です。
（他にも色々フレームワークがあります）
とりあえず今回はNode.jsとは何か？というのと、どういう処理をしてサーバー構築するのかをまとめました。
expressについてはまた改めて書きたいと思います。
Discussion