Node.jsでWebサーバーを構築

はじめに

Node.jsはサーバー側でJavaScriptを実行するための実行環境です。
これまでブラウザ上でしか利用できなかったJavaScriptをサーバー側で実行でき、フロントエンドとサーバーサイドの言語をJavaScriptで統一できる便利な環境です。

JavaScriptはさておいても、手軽にローカルにWebサーバーを立ち上げる事が出来るのでテスト環境に適していると思います。

Node.jsのインストールとWebサーバーの構築をまでをまとめてみました。

インストール

nodejs.org/en/サイトを開き[Download Node.js]をクリックするとダウンロードされます。

ダウンロードしたファイルを実行し、画面に従いインストールします。
特に設定する項目はないので、[Next]で進んで行けば良いと思います。

[スタート]-[Node.js]-[Node.js command prompt]がインストールされていますので、これを起動して「> node -v」コマンドでインストールを確認します。
バージョンが表示されたらOKです。

Node.js単体でWebサーバー構築

WebサーバーはNode.js単体でも構築できますが、Express.jsを使用するとより簡潔に構築することが出来ます。

ここでは両方試してみたいと思います。
まずはNode.js単体で。

フォルダ作成

作業用のフォルダを作成します。
ここではC:直下に「C:\node-app\node-test01」というフォルダを作成しました。
このフォルダで作業していきます。

JavaScriptファイルを作成

先ほど作成したフォルダの中にJavaScriptファイルを作成し、以下のコードを記述します。
ファイル名は、なんでも良いですが「index.js」にしました。

index.js
const http = require("http");   // httpモジュール読み込み

// サーバー構築
const server = http.createServer((req, res) => {

    // レスポンスの実装
    // 第１引数：HTTPリクエストの成功・失敗を表すステータスコードを入れる
    // 第２引数：ヘッダー情報を入れるデータを指定
    res.writeHead( 200, {
        "Content-type": "text/html"
    });

    // 本文を指定
    const responseMessage = "<h1>Hello World</h1>";
    res.end(responseMessage); 

    // ログ。[``]はテンプレートリテラル
    console.log(`sent a response : ${responseMessage}`);
});

// ポートを指定
const port = 3000;
server.listen(port);

// ログ
console.log(`Thos server has started and is listening on port number: ${port}`);

1行目：requeire(“http”)
httpモジュールを読み込んでいます。
httpモジュールはHTTPサーバーやHTTPクライアント機能を構築するためのNode.jsの組み込みモジュールです。

4行目：http.createServer()
サーバ構築メソッドです。
createServerは、指定したポートでリクエストを待機するHTTPサーバーを作成します。
リスエストを処理するコールバック関数を引数として受け取り、新しいhttp.Serverオブジェクトを返します。

４行目：(req, res) => {}
http.createServer()に渡すリクエストを処理するコールバック関数の定義です。
第１引数（req）：クライアントからのリクエストに関する情報（ヘッダー、URLなど）が格納されています。
第２引数（res）：クライアントにレスポンスを送信するためのオブジェクトで、レスポンスを行うためのメソッドを提供します。

９行目：res.writeHead()
http.createServer()に渡すコールバック関数の中身の定義です。
writeHead()はHTTPサーバーを構築する際にクライアントへ送信するレスポンスの「ステータスコード」と「ヘッダー情報」を記述するために使用されるメソッドです。
第１引数：ステータスコード。一般的にHTTPリクエストが成功した際に返すステータスコード200を指定します。
第２引数：ヘッダーオブジェクトを渡します。今回はHTMLファイルであることを示す”Content-type”のみ設定しました。

１５行目：res.end()
クライアントへの応答を終了しリクエストの処理を完了します。
引数にはレスポンスボディ（応答の本体）を指定できます。
ここでは、「Hello World」を指定しています。

２３行目：server.listen()
待機状態にするポートを指定しています。
ここでは3000番。

以上で準備が整いました。

サーバー起動

[スタート]-[Node.js]-[Node.js command prompt]からコマンドプロンプトを起動します。

作業用フォルダ「C:\node-app\node-test01」に移動します。
コマンドは「cd C:\node-app\node-test01」です。

コマンド「node index.js」でサーバーを起動します。

表示されているメッセージはindex.jsの最終行に書かれたログです。
これでサーバーが起動し、クライアントからのリクエスト待ちになります。

ブラウザから呼び出し

ブラウザを起動しURLに「http://localhost:3000」と入力します。

「Hello World」が表示されれば成功です。

サーバー停止

コマンドプロンプトで「Ctrl+C」を押すと終了します。

Express.jsを使用してWebサーバーを構築

フォルダ作成

作業用のフォルダを作成します。
ここではC:直下に「C:\node-app\node-test02」というフォルダを作成しました。

Visual Studio Codeで作業

扱うファイルが増えるのと、コマンドプロンプト面倒なのでVisual Studio Codeで作業をしていきます。

Visual Studio Codeを起動し、メニューの[ファイル]-[フォルダを開く]で作業用フォルダを開きます。

メニューの[表示]-[ターミナル]でターミナルを開きます。

ターミナルのディレクトリが作業用フォルダになっているのが確認できるはずです。

フォルダの初期化

作業用フォルダ「C:\node-app\node-test02」をnode.js用に初期化します。
先ほどサーバーを構築したhttpモジュールはnode.jsで標準で提供されていますがExpress.jsはパッケージをインストールする必要があり、node.jsはnpmでパッケージを管理します。

まずnpmでパッケージを管理するための初期設定を行います。
ターミナルでコマンド「npm init -y」を実行します。

作業フォルダ内に「package.json」というファイルが作成されます。
package.jsonはモジュールの依存関係やバージョンを管理するためのファイルです。

httpモジュールをインストール

今回使うhttpモジュールはExpress.jsです。
npmを使ってインストールします。
ターミナルでコマンド「npm install express」を実行します。

node_modulesフォルダとpackage-lock.jsonファイルが作成されます。

node_modulesフォルダにはExpressなどのnpm通じてインストールされたライブラリや依存パッケージが格納されています。

package-lock.jsonはプロジェクトが依存する各パッケージの正確なバージョン、ハッシュ値、依存関係ツリー構造を記録するファイルです。
複数の開発者がプロジェクトを共有したり、デプロイメントを行う際に依存関係の齟齬が生じることを防ぎ、どの環境でもアプリケーションが同じように動作することを保証します。

サーバー構築

.jsファイルを作成し下記のコードを入力します。
ファイル名はapp.jsにしました。

app.js
var express = require('express');   // expressモジュールを使用

var app = express();  // Expressアプリケーションのインスタンスを作成

// ミドルウェア関数の登録
app.use(express.static('./'));

// HTTPサーバー起動
var port = 3000;
app.listen(port,function(){
	console.log("Expressサーバーがポート%dで起動しました。モード:%s",port,app.settings.env)
});

以下、処理の概要です。

6行目の処理

app.use()は、
HTTPリクエストを受け取り特定のパスやミドルウェア関数を実行する機能です。
ちなみにapp.get()だと特定パスに対するGETメソッドのリクエストのみ処理し、app.use()はすべてのHTTPメソッドに対応しミドルウェアとして機能します。

express.static(‘./’)は、
画像、CSS、JavaScriptファイルなどの静的ファイルをブラウザに配信するためのミドルウェア関数です。

なので、app.use(express.static(‘./’))は、
app.use()によりexpress.static()というミドルウェア関数を実行します。
これにより指定されたディレクトリ（’./’）内のファイルがクライアント（ブラウザ）からのアクセスに対してそのまま提供されるようになります。

9行目の処理

app.listen()メソッドはHTTPサーバーを起動し、特定のポート（今回は3000）着信接続を待ち受けます。
第１引数：サーバーが待機するポート番号を指定。今回は3000。
第2引数：サーバーが正常に起動した後に実行されるコールバック関数。今回はコンソールにメッセージを出力しています。

HTMLファイル作成

app.jsを実行するとサーバーが起動し、ブラウザからのアクセス待ちになります。
ブラウザから呼び出すHTMLファイルを作成します。
ファイル名はindex.htmlにしました。

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Expressによるサーバー構築</title>
    </head>
    <body>
        Hello Express!
    </body>
</html>

npm startの設定

サーバーに実行は「node app.js」でも実行できますが、npmコマンドを使って実行できるように設定します。

package.jsonを編集します。

“scripts”: {} の中を下記のように変更します。

scriptsを編集
// 変更前
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},

    ↓　下記のように変更します。

// 変更後
"scripts": {
    "start": "node app.js"
},

変更後のpackage.jsonは以下です。

package.json
{
  "name": "test02",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^5.1.0"
  }
}

実行

Visual Studio Codeのターミナルで「npm start」を実行します。

app.jsのapp.listen()でサーバーを起動した時にコールバック関数で指定したコンソールログ「Expressサーバーがポート3000で起動しました。モード:development」が表示されたので、正常に起動したことが分かります。

ブラウザを起動してindex.htmlを呼び出します。
URLは「http://localhost:3000」または「http://localhost:3000/index.html」

サーバー終了

Visual Studio Codeのターミナルで「Ctrl＋C」を押すと終了します。

コメント

タイトルとURLをコピーしました