Node.jsによるWebサーバの作成(基本的な事柄)

JavaScript

Node.jsによるWebサーバの作成(基本的な事柄)

macOS 10.15.7 / node v20.15.1 / express 4.18.2

ディレクトリ構成

Webサーバ側のディレクトリ構成の例を示す。本章で説明する処理に対応している。
(黒字がティレクトリ、青字がファイルである)
my_server.js
Webサーバ本体。常駐プロセスとしてリクエストを監視し、メッセージを受信したら URLに応じて処理の振り分け(ルーティング)を行う。
reference ディレクトリ
ドキュメントルートに相当する。URLのファイル部分、ページが参照する CSSファイル、JavaScriptファイル、イメージファイルなどは、このディレクトリを起点にしてパスを解決する。このディレクトリの下のファイルは全てネットワーク上に公開されることになるので、内部のみで使用する非公開のファイルはここ以外の場所に置くこと。
source ディレクトリ
サーバ側の処理に必要なファイルを格納する。

サーバ処理

環境設定とリクエストの監視
ドキュメントルート指定に関しての補足

静的 HTMLページの表示

[image1.png]
test1.html
静的 HTMLページを表示するには HTMLファイルをドキュメントルート(reference)の下に配置するだけでよい。ページの送信は expressモジュールの機能により自動的に行われる。

CSS、JavaScript、画像ファイルを参照する

[image2.png]
test2.html
CSS、JavaScript、画像ファイルを参照するには、それぞれのファイルをドキュメントルート(reference)の下に配置するだけでよい。
date_time.js
document.css

受信メッセージのルーティング

サーバ側で何らかの処理(DBやファイルの入出力、データ変換、HTMLページの編集など)を行う場合メッセージのルーティング処理を実装する。例としては、動的 HTMLページの作成や Ajaxインタフェースにおけるデータの送受信が挙げられる。
具体的には、expressモジュールの getメソッド(または postメソッド)を作成し、引数に URLを指定し、対応するサーバ処理をコールバック関数に記述する。 指定のメッセージを受信したら当該メソッドが起動する。コールバック関数に引き数のリクエストオブジェクトからはコマンドパラメータを取得することができる。クライアントに返すデータはレスポンスをオブジェクトに設定し、endメソッド(または sendメソッド)で返信する。
getメソッドの基本パターン
postメソッドもパラメータが格納されるプロパティの名前が違うだけで構造は同じである。
(注)ドキュメントルートの下の HTMLファイルと、ルーティングのメソッドに指定したファイル名が同じ場合は、前者が選択され、後者は無視される。

動的 HTMLページの表示

[image3.png]
サーバのルーティング処理
動的に編集する HTMLソースファイルはローカルディスクから読み込む。ここでは、メッセージのパラメータとして送られてきた文字列(こんばんは)と、現在の日付時刻をページに表示するよう HTMLタグを編集している。
HTMLを編集するためのモジュールはいくつかあるようだが、仕組み的には、ここで示した方法と同じであろう。

Ajaxインタフェースにおけるデータの送受信

[image4.png]
サーバのルーティング処理
test4.htmlから HTTPリクエストを受け取る。受信メッセージのパラメータをもとに作成したパス名のファイルからテキストを読みこみ、そのままクライアントへ返す。
HTMLのソースコード(test4.html
XMLHttpRequestオブジェクトを利用して指定した URLにリクエストメッセージを送信する。レスポンスを受信すると onloadイベントハンドラが起動するので、そこで受信したデータをページに設定する。

Webサーバの起動方法

コンソールから Webサーバをフォアグラウンドで起動する。
終了するときは Ctrl+C を入力する。
コンソールから Webサーバをバックグラウンドで起動する。JavaScriptファイル名の後ろに「&」をつける。プロセスID(PID)2199 で起動した。
終了するときは PIDを指定して killコマンドを実行する。