node.js, express, apache, proxy server： 個人的メモ
June 2, 2016 – 7:49 pmサーバーサイドのJavaScript環境node.jsに興味を持ち、いろいろ学習している。
Web上に公開されている入門サイトを参考に、node.js上で動作するWebアプリのフレームワークexpressを用いたWebサーバ作成の基本を学んだ。作成したWebサーバを、apacheのproxy機能を活用して外部に公開する手続きも試してみた。
一連の学習内容をmemoしておいた。
node.js そのもとでの express の動作環境を構築したのち、REST形式のWebサーバーの簡単なシステムを実装した。実装にあたっては、Web技術の学習サイト「ドットインストール」のExpress 入門を参考にした。
なお、以下の実装にあたっては、ドットインストールとは異なりExpressのバージョンは4.xを用いている。
関連ファイルのディレクトリ構造：
-- +---- server.js | +---- views ---+--- index.ejs | +--- show.ejs | +--- new.ejs | +--- edit.ejs *---- node_modules -+--- express | +--- body-parser | *--- ( ---- )
上記のうち、node_modules の部分は、ここに必要なモジュールが配置されていることを簡略的に表現している。
以下、上記のディレクトリ構造に示されているソースを示す。
server.js
var express = require('express'); var bodyParser = require('body-parser'); var methodOverride = require('method-override'); var app = express(); app.set('views', __dirname + '/views'); app.set('view engine', 'ejs' ); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: true})); app.use(methodOverride(function(req, res){ if (req.body && typeof req.body === 'object' && '_method' in req.body) { // look in urlencoded POST bodies and delete it var method = req.body._method; delete req.body._method; return method; } }) ); var posts = [ {title: 'title0', body: 'body0'}, {title: 'title1', body: 'body1'}, {title: 'title2', body: 'body2'} ]; app.get('/', function(req,res) { res.render('index', {posts:posts}); }); app.get('/posts/:id([0-9]+)', function(req,res) { res.render('show', {posts:posts[req.params.id]}); }); app.get('/posts/new', function(req,res) { res.render('new'); }); app.post('/posts/create', function(req,res) { var post = { title: req.body.title, body: req.body.body }; posts.push(post); res.redirect('/'); }); app.get('/posts/:id/edit', function(req,res) { res.render('edit',{posts:posts[req.params.id], id:req.params.id}); }); app.put('/posts/:id([0-9]+)', function(req,res) { posts[req.body.id] = { title: req.body.title, body: req.body.body }; res.redirect('/'); }); app.delete('/posts/:id/', function(req,res) { posts.splice(req.body.id, 1); res.redirect('/'); }); app.listen( 8081, function() { console.log("listening on port no. 8081 " ); });
views/index.ejs
<!doctype html> <html lang='ja'> <head> <title>Blog</title> </head> <body> <h1>Posts</h1> <ul> <% for ( var i=0; i<posts.length; i++ ) { %> <li> <a href="/posts/<%= i %>"><%= posts[i].title %></a> <a href="/posts/<%= i %>/edit/">[Edit]</a> <form method="post" action="/posts/<%= i %>"> <input type="submit" value="del"> <input type="hidden" name="_method" value="delete"> <input type="hidden" name="id" value="<%= i %>"> </form> </li> <% } %> </ul> <a href="/posts/new">Add New</a> </body> </html>
views/show.ejs
<!doctype html> <html lang='ja'> <head> <title>Blog</title> </head> <body> <h1><%= posts.title %></h1> <p><%= posts.body %></p> <p><a href="/">Go Back</a></p> </body> </html>
views/new.ejs
<!doctype html> <html lang='ja'> <head> <title>Add new</title> </head> <body> <h1>Add New</h1> <form method="post" action="/posts/create"> <input type="text" name="title"> <input type="text" name="body"> <input type="submit" value="add"> </form> <p><a href="/posts/new">Add new</a></p> </body> </html>
views/edit.ejs
<!doctype html> <html lang='ja'> <head> <title>Edit</title> </head> <body> <h1>Edit</h1> <form method="post" action="/posts/<%=id %>" > <input type="text" name="title" value="<%= posts.title %>" > <input type="text" name="body" value="<%= posts.body %>" > <input type="hidden" name="id" value="<%= id %>"> <input type="hidden" name="_method" value="put"> <input type="submit" value="Update"> </form> <p><a href="/">Go back</a></p> </body> </html>
nodeコマンドによるサーバーの起動：
$ node server.js listening on port no. 8081
外部に公開するためapacheのproxy設定
/etc/httpd/httpd.confの関連部のみを以下に示す。
# NameVirtualHost *:80 # <VirtualHost *:80> ServerName sample.yamasnet.com ProxyPass / http://localhost:8081/ ProxyPassReverse / http://localhost:8081/ </VirtualHost>
参考にしたサイト：