@blog.justoneplanet.info

日々勉強

EC2にexpressを入れる

■インストール

yum install openssl-devel gcc-c++ make#前準備
wget http://nodejs.org/dist/v0.6.11/node-v0.6.11.tar.gz
tar xvzf node-v0.6.11.tar.gz
cd node-v0.6.11
./configure
make
make install
curl http://npmjs.org/install.sh | sh
npm install -g express
express sample
cd sample
npm install

./app.js

たまたま80番開いていたので以下のようにして80番で繋がるようにする。

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes');

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// Routes

app.get('/', routes.index);

app.listen(80);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

■起動

node app.js

http://ec2-123-123-123-123.ap-northeast-1.compute.amazonaws.com/などで自分のインスタンスにアクセスすれば見れる。

■socket.ioを使う

./package.json

以下のように編集する。

{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.8"
    , "jade": ">= 0.0.1"
    , "socket.io": "*" 
  }
}

./sampleで以下のコマンドを実行する。

npm install

./app.js

サーバー側のコードをapp.jsの最後尾に付加する。

var io = socketio.listen(app)
   ,count = 0;
io.sockets.on('connection', function(socket){
  count++;
  io.sockets.emit('count change', count);
  socket.on('disconnect', function() {
    count--;
    socket.broadcast.emit('count change', count);
  }
  );  
});

./views/layout.jade

クライアント側の処理を書き加える。

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type='text/javascript', src='http://code.jquery.com/jquery.min.js')
    script(type='text/javascript', src='/socket.io/socket.io.js')
    script(type='text/javascript')
      var socket = io.connect();
      socket.on('count change', function(count) {
        $('#count').text(count);
      }); 
  body!= body

./views/index.jade

表示用に要素を追加する。

#page
  #headerArea
    h1= title
    p Welcome to #{title}
    p 現在このページを見ている人は
    span#count
    人います。

■ejsを使う

既存のhtmlコードを使用するときにhamlにするのは手間なのでejsを使う。

./package.json

以下のように編集する。

{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.8"
    , "jade": ">= 0.0.1"
    , "socket.io": "*" 
    , "ejs": "*" 
  }
}

./app.js

以下のようにして、テンプレートエンジンをjadeからejsに変更する。

/**
 * Module dependencies.
 */

var express  = require('express')
  , socketio = require('socket.io')
  , ejs      = require('ejs')
  , routes   = require('./routes');

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  app.set('view options', {layout : false});
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

せっかくなんでルーティングも変更してみる。

app.get('/', routes.index);
app.get('/hoge', function(req, res) {
  res.render('hoge.ejs', { title: 'My Site' }); 
});

参考

./views/hoge.ejs

あとは以下のようにテンプレートファイルを用意する。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title><%= title %></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect();
socket.on('count change', function(count) {
    $('#count').text(count);
});
</script>
</head>

<body>
<h1><%= title %></h1>
<p>現在このページを見ている人は<span id="count"></span>人います。</p>
</body>
</html>

以下のようなURLでアクセスができるようになる。

http://ec2-123-123-123-123.ap-northeast-1.compute.amazonaws.com/hoge

コメントはまだありません»

No comments yet.

RSS feed for comments on this post.TrackBack URL

Leave a comment