13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-10-14

前回→今からはじめる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/
にアクセスしてみてください。

サンプルソース

次回→今からはじめるReact.js〜仮想環境を作成する〜

13
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?