HTMLを表示する

Webサーバを起動させ、HTML(静的コンテンツ)を表示してみます。


はじめに

Expressでできることは多岐にわたりますが、まずはApache HTTP Serverなどの代わりとなるようなWebサーバを稼働させ、HTMLを表示させてみます。


準備

carnationディレクトリの中にcarnation.jsというファイル(名前はなんでもいいんですけど)を作成し、下記の(たった4行の)コードを貼り付けて保存してください。

var express = require('express');
var app = express();
app.use(express.static('public'));
app.listen(3000);

次に、同じくcarnationディレクトリの中にpublicというディレクトリを作成し、その中にindex.htmlを作成します。内容はとりあえず下記のソースを貼り付けてください。

<p>Hello World</p>

起動

それでは、起動してみましょう。

$ node carnation.js 

Webブラウザでhttp://127.0.0.1:3000/にアクセスしてみてください。私は久しぶりにHello Worldで感動しました。


解説

では、この崇高なる4行のコードについて解説します。

var express = require('express');

Node.jsにおいてモジュールを呼び出す際の構文です。ここでは’express’モジュールを呼び出しています。

var app = express();

Expressのインスタンスを作成し、変数appに代入しています。

app.use(express.static('public'));

‘public’ディレクトリを、静的(static)コンテンツを格納するディレクトリとして宣言します。

app.listen(3000);

3000番ポートを待ち受けポートとしてサービスを稼働します。もちろん、80番ポートが空いているならそれで稼働させることも可能です。

これにより、http://127.0.0.1:3000/にアクセスすると、’public’ディレクトリ内の’index.html’がめでたく表示されます。
もちろん、正式にサービスとして稼働させる場合は記述を見直す必要がありますが、ただ単に静的なWebぺージを表示するならたったこれだけで可能です、というサンプルでした。