-
今からはじめるReact.js〜サーバーサイド〜
- 2015年11月12日
- Node.js
- React
※この記事は
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/172936express
実装するにあたり、フレームワークの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〜仮想環境を作成する〜この記事を書いた人 : 國田健史
スタッフブログタグ:
AWS bluebird css CSV docker docker compose electron ES6 es2015 Git Heroku ITコンサルティング JavaScript justinmind less MongoDB Node.js php PostgreSQL Private Space Promise React react-router reactjs Salesforce scss Selenium Builder selenium IDE Selenium WebDriver stylus TypeScript VirtualBox VisualStudioCode vue vuejs webpack システム開発プロジェクト セキュリティ ワイヤーフレーム 上流工程 卒FIT 帳票 要件定義 設計 電力小売業界
一覧へ戻る
AWS bluebird css CSV docker docker compose electron ES6 es2015 Git Heroku ITコンサルティング JavaScript justinmind less MongoDB Node.js php PostgreSQL Private Space Promise React react-router reactjs Salesforce scss Selenium Builder selenium IDE Selenium WebDriver stylus TypeScript VirtualBox VisualStudioCode vue vuejs webpack システム開発プロジェクト セキュリティ ワイヤーフレーム 上流工程 卒FIT 帳票 要件定義 設計 電力小売業界