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

※この記事は
http://qiita.com/kuniken/items/799197256ab3a1e46bd4
で投稿した内容と同じものです。

前回→今からはじめるReact.js〜propsとstate、それからrefs〜

サーバサイドの実装(今回は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〜仮想環境を作成する〜

カテゴリー: 國田健史 | タグ: , | 投稿日: | 投稿者:

solutionware について

クラウド型アプリケーション開発のソリューションウェア https://solutionware.jp/ 【サービス一覧】 クラウド型顧客管理システムの企画・開発 マーケティングオートメーションシステムの企画・開発 各種クラウド型業務システムの企画・開発 スマートフォン/タブレットアプリ(iOS、Android)の企画・開発 Salesforceインプリ、kintoneアプリ、フルスクラッチなど、ご用命にお応えいたします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

five × 5 =