【Node.js】最初の一歩！Webサーバーを起動する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Node.jsの最初の一歩ということで、プロジェクトの作成からWebサーバーの起動までの流れをご紹介しています。

Node.jsの環境は構築できたけど、Webサーバーの起動はどうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

npmプロジェクトを初期化する

まずはプロジェクトを初期化してpackage.jsonを作成します。（package.jsonはプロジェクトの情報や必要なライブラリなどが記載されたファイルです。）

ディレクトリはどこでも構いませんので、コマンドプロンプトやターミナルを開いて対象のディレクトリまで移動します。

$ cd /Node/sample

私はWindows環境なのでコマンドプロンプトになります。上記の例では「Cドライブ」>「Node」>「sample」にディレクトリを移動しています。

対象のディレクトリに移動出来たら、プロジェクトを初期化するコマンドを実行します。

$ npm init

実行すると対話式でプロジェクトを作成することができます。とりあえずは何も入力せずに最後までエンターを連打していただいて大丈夫です。

This utility will walk you through creating a package.json file.

It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields

and exactly what they do.
Use `npm install ` afterwards to install a package and

save it as a dependency in the package.json file.
Press ^C at any time to quit.

package name: (sample)

version: (1.0.0)

description:

entry point: (index.js)

test command:

git repository:

keywords:

author:

license: (ISC)

About to write to C:\Node\sample\package.json:
{

  “name”: “sample”,

  “version”: “1.0.0”,

  “description”: “”,

  “main”: “index.js”,

  “scripts”: {

    “test”: “echo \”Error: no test specified\” && exit 1″

  },

  “author”: “”,

  “license”: “ISC”

}

Is this OK? (yes)

最終行の「Is this OK?」に対してエンターを押下すると、プロジェクトフォルダの配下に「package.json」なるファイルが作成されます。「package.json」が作成されましたら無事プロジェクトの初期化は完了です。

続いてWebサーバーを起動する際に実行するファイルを作成していきます。

Webサーバーを生成するスクリプトファイルを作成する

上記で作成したプロジェクトに移動します。

$ cd /Node/sample

現在対象のディレクトリ配下には「package.json」のみが存在する状態かと思います。そこに「server.js」というファイルを新規作成します。いつもJSファイルを作る手順で問題ありません。「server.js」はWebサーバーを起動する際に実行するファイルになります。

/Node/sample/server.js

では、上記に作成した「server.js」にWebサーバーを起動するためのスクリプトを作成していきます。

まずはプログラミング学習の最初の一歩である「Hello World!」をブラウザに表示してみます。（「Hello World!」で始めるのが嫌な場合は好きな文字列に変更していただいて大丈夫です！）

新しい言語はとにかく慣れが必要です。できればコピペではなく自分の指でスクリプトを打ち込んでみてくださいね。

const http = require('http');
const server = http.createServer((request, response) => {

    response.writeHead(200, { 'Content-Type': 'text/html' });

    response.end('Hello World!');

});
server.listen(8080);

スクリプトは入力できたでしょうか。実行してページの表示を確認してみましょう。

Node.jsでは下記のコマンドでWebサーバーを起動することができます。まずは入力・実行して結果を確認してみましょう。

$ node server.js

実行してもコマンドプロンプトには何も表示されません。カーソルが一行下に移動したと思いますが、それで問題ありません。スクリプトにエラーがなければWebサーバーは起動しています。

実行結果を確認するために下記のURLにアクセスしてみてください。「Hello World!」という文字列がブラウザに表示されるはずです。

http://localhost:8080/

無事指定した文字列は表示されたでしょうか。これで最初の一歩であるWebサーバーの起動を達成することができました！

では上記で入力したスクリプトが何をしているのか、詳しく見ていきましょう。

スクリプトの内容について

上記で記述したスクリプトの内容を簡単にご説明します。スクリプトの各行にコメントを記載しておりますので、参考にしていただければと思います。



//httpモジュールを読み込む

const http = require('http');
//httpのcreateServerメソッドでWebサーバーを構築

const server = http.createServer((request, response) => {
    //この中にWebサーバー側の処理を記述する
    //responseオブジェクトのwriteHeadメソッドでヘッダ情報の書き出し

    response.writeHead(200, { 'Content-Type': 'text/html' });

    //responseオブジェクトのendメソッドで処理を完了（引数が指定されている場合はそれを書き出す）

    response.end('Hello World!');

});
//localhostの8080ポートで待機（ブラウザからアクセスできるようになる）

server.listen(8080);