サーバサイドの実装(今回はReact.jsは出てきません)

Node.js

いいかげん、サーバーサイドを実装します。 Node.jsでサーバーを起動できるようにします。 Node.jsはノンブロッキング（非同期）IOという特徴があります。クライアントサイドから来たリクエストごとにスレッドを立てるわけでなく、サーバー側で処理が終わったものからどんどんクライアントサイドに返却していきます。下記のサイトが参考になりました。 http://satoshun00.hatenadiary.com/entry/2012/08/02/172936

express

実装するにあたり、フレームワークのexpressを利用したいと思います。 npmでインストールします。 npm install express --save 作業ディレクトリ直下にserverディレクトリを作成し、その直下にserver.jsというファイルを作成しました。内容は以下の通りです。

//server.js
var express = require('express');
var app = express();

//ポートの指定
app.set('port', process.env.PORT || 5000);

//ルートパスの指定
var clientPath = __dirname.replace("/server", "/client");
app.use('/', express.static(clientPath));

//redirect NOT FOUND page
//app.use(function(req, res, next){
//  res.status(404);
//  res.sendFile(clientPath + '/404.html');
//});

//エラーが発生した場合の指定
app.use(function(err, req, res, next) {
    console.log(err.stack);
    res.status(500).send(err.message);
});

//指定したポートでリクエスト待機状態にする
app.listen(app.get('port'), function () {
    console.log('server listening on port :' + app.get('port'));
});

前半は、 expressのインスタンスを作って、ポートの指定および、クライアント側ソースの起点を指定する感じですね。コメントアウトしているところは、ユーザーの指定したURLがどのアドレスにも一致しなかった際の処理を記述しています。後半はエラーが発生した場合の処理があり、最後にリクエスト待機状態にしています。では、サーバーを起動してみましょう。 node server/server.js とコマンドを実行します。上記のソースの場合、 server listening on port :5000 とターミナルに表示されたら、 http://localhost:5000/ にアクセスしてみてください。

サンプルソース

https://github.com/kunitak/react-tutorial/tree/day6 次回→今からはじめるReact.js〜仮想環境を作成する〜

この記事を書いた人 : 國田健史

その他のスタッフブログ:

一覧へ戻る

今からはじめるReact.js〜サーバーサイド〜

サーバサイドの実装(今回はReact.jsは出てきません)

Node.js

express

サンプルソース

JOIN OUR TEAM