node.jsのExpressでローカルサーバーを構築

getUserMedia APIを利用してウェブカムの情報をvideo要素に表示する

本エントリーは「to-R JavaScript Advent Calendar 2015」5日目のエントリー、node.jsのExpressでローカルサーバーを構築する方法を解説します。

前回は、getUserMedia APIを利用してウェブカムの情報をvideo要素に表示する方法について解説しましたが、WebRTC開通までの工程として今回はnode.jsのExpressでローカルサーバーを構築する方法を解説します。

WebRTCではWebSocketによる通信を行う必要があり、WebSocketはnode.jsを利用すると非常に簡単に利用できます。

そのため、まずサーバーをnode.jsで用意しておきたいと思います。

Expressはnode.jsでサーバー構築が簡単にできるアプリケーションです。(サーバ構築というよりWebアプリケーション開発を簡単にするソフトです)

node.jsのインストールは「タスクランナーgulp入門」のnode.jsのインストールなどを参考にしてください。

Expressのインストール

適当なフォルダ(webRTCなど)を作成してターミナルで開き、npm initを用いてpackage.jsonを生成します。

 npm init

「entry point: (index.js)」と聞かれたらapp.jsなど適当なファイル名を入力しましょう。

つぎにExpressをインストールしましょう。
ターミナルなどを開いて以下のコマンドを入力します。

npm install express --save

サーバー構成

今回は以下のようにサーバー構成で作成します。WebRTC内にhtdocsフォルダを作成してそこをアプリケーションのルートフォルダに設定します。

webRTC
├── app.js
├── htdocs
│   └── index.html
├── package.json
├── node_modules

app.jsの内容

app.js内には以下の様な内容を記述しておきます。

expressの設定とアプリケーションのルートフォルダのみの非常にシンプルな設定です。

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

アプリケーションの起動

以下のコマンドでアプリケーションを起動することができ、「Expressサーバーがポート3000で起動しました。モード:development」と表示されるはずです。

node app.js

これで、ブラウザでhttp://localhost:3000にアクセスすればindex.htmlの内容が表示されてるはずです。

次回はsocket.ioを利用した双方向チャットを作成してみたいと思います。

関連エントリー

5分でわかるWebRTCの仕組み - html5minutes vol.01

スポンサードリンク

«getUserMedia APIを利用してウェブカムの情報をvideo要素に表示する | メイン | node.jsとsocket.ioで簡易チャットを作成する»