2012年04月13日

[Web] node.jsで静的ファイルを扱うためにnginxをインストール

node.jsとnginxの組み合わせが良さそうということで、
下記のサイトを参考にしてnginxをインストールしてみることにしました。

インフラエンジニアway
http://heartbeats.jp/hbblog/nginx/

自分がやった手順は、

(1) CentOS用のインストールパッケージをダウンロード(さくらPVSのOSは「CentOS-6」)
$ wget http://nginx.org/packages/centos/6/noarch/RPMS/nginx-release-centos-6-0.el6.ngx.noarch.rpm

(2) ダウンロードしたパッケージからインストール
# rpm -ivh nginx-release-centos-6-0.el6.ngx.noarch.rpm

(3) リポジトリを確認
# less /etc/yum.repos.d/nginx.repo

(4) インストール
# yum install nginx

(5) 起動
# service nginx start

(6) 確認
前回の記事 で設定したURLにアクセス。
「Welcome to nginx!」と表示されれば成功。

(7) 静的ファイルを置く
置き場所は↓
/usr/share/nginx/html

(8) デーモンの確認
一旦起動したらそのまま起動し続けて欲しいので、デーモンが設定されているのかを確認したい。
yumを使ってインストールしたら、「/etc/init.d/nginx」というファイルが生成されているので
中身を確認します↓

$ less /etc/init.d/nginx

うーん、デーモンは有効になっているんだろうか。
後日調べてみよう。

posted by be-style at 21:24| Comment(0) | Web

2012年04月12日

[Web] さくらVPSに新しいホスト名を設定する

さくらVPSで、無事node.jsを起動できたところで、
IPアドレスを見せるのは嫌だし、デフォルトのホスト名は使いたくないなーということで
新しくホスト名をつけることにしました。

まずは、お名前.comでドメインを取得します。

ドメインを取得したら、お名前.comの管理画面の「ホスト登録・変更・削除」を押して、
さくらVPSに使うドメインで「登録」を選択します↓

20120411vpsdomain005.png

ホスト作成画面になるので、

・希望するホスト名を入力
・さくらVPSで提供されたIPアドレス

を入力して[確認画面へ進む]を押して、新しいホスト名を登録します↓

20120411vpsdomain006.png

次に、さくらインターネットの管理画面にログインした後、

上メニューの契約情報 > 左メニューのドメインメニュー > 左メニューのネームサーバ新規登録

と選択します。
先ほどお名前.comで登録した「ホスト名」を入力して、[送信する]を押します↓

20120411vpsdomain001.png

成功すると、↓の画面になるので、ドメインメニューに進みます。

20120411vpsdomain002.png

ゾーン編集ボタンを押します↓

20120411vpsdomain003.png

ゾーン設定画面になるので、さくらVPSで提供されたIPアドレスを登録します↓

20120411vpsdomain004.png

続いて、さくらVPSの管理画面に移ります。
ホスト名を変更します↓

20120411vpsdomain007.png

DNS逆引きレコード変更画面になるので、先ほど登録したホスト名をさくらVPS側でも設定します↓

20120411vpsdomain008.png

問題が無ければ、確認画面になります↓

20120411vpsdomain009.png

↓の画面になれば新しいホスト名への変更は成功です

20120411vpsdomain010.png

ホスト名やゾーンの登録には時間がかかることがありました(数時間程度)ので、ご注意ください。
posted by be-style at 20:35| Comment(0) | Web

2012年04月08日

[Web] node.jsを使ってみる(さくらVPS編)

前回の「[Web] node.jsを使ってみる(Winローカル編)」の続きです。

(1) ローカル環境でnode.jsを動かす
(2) さくらVPSでnode.jsを動かす ← 今回はこれ
(3) AndroidアプリとさくらVPSのnode.jsを連携させる

================================================================
(1) さくらのVPSを登録する
登録したのは、1GBプラン。

さくらのVPS
http://vps.sakura.ad.jp/

サービス仕様
http://vps.sakura.ad.jp/specification.html

サービス仕様の「標準OSのインストール構成」を見ると、
「ウェブサーバ」と「DBサーバ」は自分でインストールする必要がありそうです。

まずは上記ホームページから仮登録を申請。
2週間無料で利用できるので、仮登録のまま作業を開始。

登録完了メールが届いたら、管理画面にログインします。

管理画面 > 契約情報 > 契約サービスの確認 > さくらのVPS(v3) 1G > サーバ設定 > VPSコントロール

で、ウェブブラウザにコンソール画面が表示されました。
ただ、キー入力に対する反応がイマイチだったので、Puttyを使ってログインしました。

Putty
http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html
→ putty-0.62-installer.exe をダウンロード

Puttyではデフォルトの文字コードがEUC-JPになっていました。
UTF-8に直します↓

20120407sakuravps003.png


(2) ログインまわりのセキュリティ設定
さくらのVPSを借りたら真っ先にやるべきssh設定
http://blog.myfinder.jp/2010/09/vpsssh.html

「3.ユーザの公開鍵を登録」は、Puttyを使って行いました。

PuTTY で鍵交換方式による SSH 接続
http://www.kuins.kyoto-u.ac.jp/news/47/putty-gen.html

はじめに、「PuTTYgen」を使って公開鍵と秘密鍵を作ります。

id_rsa.ppk <-- 秘密鍵
id_rsa.pub <-- 公開鍵

SSHサーバへの転送コマンドは、

C:\Program Files (x86)\PuTTY>pscp id_rsa.pub [ユーザー名]@[ドメイン名].sakura.ne.jp:id_rsa.pub
※[ユーザー名]と[ドメイン名]は適宜書換えてください

↓が表示されれば成功
id_rsa.pub | 0 kB | 0.3 kB/s | ETA: 00:00:00 | 100%

さくらVPSにログインして転送されているか確認
$ ls
id_rsa.pub <-- 転送されてる

OpenSSH で使用できるように変換
$ ssh-keygen -i -f id_rsa.pub >> authorized_keys

.sshディレクトリを作成
$ mkdir .ssh

パーミッションを変更
$ chmod 700 .ssh

SSHディレクトリを作って、公開鍵を移動
% cd .ssh
% mv ../authorized_keys .
% chmod 600 authorized_keys

転送した公開鍵を削除
$ cd ../
$ rm id_rsa.pub

参考サイトをもとに、公開鍵を使ってPuttyでログイン。

↓はじめにこれが表示されて、ログイン成功
Authenticating with public key "rsa-key-20120407"
Passphrase for key "rsa-key-20120407":

参考サイトにあるように、「Pageant」で自動パスフレーズ入力を設定しておくと便利でした。

参考サイトの「4.sshdの設定変更」から続けます。
「5.sudoの設定」まで出来たら、最低限の設定は完了です。


(3) Webサーバー(apache)のインストール
下記サイトの手順をそのまま。


さくらのVPS を使いはじめる 4 – Apache のインストールと初期設定
http://bit.ly/HUj9JU

↑node.js を使うので、apacheは不要でした


(4) DBサーバー(MySQL)のインストール
下記サイトの手順をそのまま。

さくらのVPS を使いはじめる 5 – MySQL のインストールと初期設定
http://bit.ly/I51vFE


(5) node.jsのインストール
node.jsとnpmのインストールは下記サイトを参考にしました。

さくらの VPS に node.js + npm + Socket.IO をインストールする手順
http://jmblog.jp/archives/709

前回の記事の「参考サイトにあるとおり、3つをインストールします。

$ npm install mysql
$ npm install express
$ npm install ejs


(6) 開発
前回の記事と同じものを作ります。

さくらVPS内のディレクトリ構成↓
/home/[ユーザー名]/node/node_modules
/node/base62.js
/node/server.js
/views/index.ejs
/views/layout.ejs
/views/result.ejs
違うのは、server.jsで

var HOSTNAME = 'localhost';

var HOSTNAME = '[提供されたIPアドレス]';

に書換えるだけでした。

参考サイトと同じ動作ができれば完了です。

http://[提供されたIPアドレス]:8124/

まとめると短い手順ですが、色々とあって3日かかりました。
posted by be-style at 15:43| Comment(0) | Web

[Web] node.jsを使ってみる(Winローカル編)

Androidアプリにインターネットを使った機能を追加したいなぁと考えています。
今はOpenFeintGoogleAppEngineを使っています。

GoogleAppEngineでも独自機能を作ることはできるのですが、最近node.jsをよく聞くので試してみようと思います。
まずはnode.jsについてまったく知らないので探してみました。

サーバサイドJavaScriptの本命「Node.js」の基礎知識
http://www.atmarkit.co.jp/fwcr/rensai2/nodejs01/01.html

なるほど。使ってみたい。
ということで、ざっとした流れ。

(1) ローカル環境でnode.jsを動かす ← 今回はこれ
(2) さくらVPSでnode.jsを動かす
(3) AndroidアプリとさくらVPSのnode.jsを連携させる

===========================================================================
(1) Windows端末にnode.jsをインストールする
以下のサイトを参考にnode.jsをインストール。
目的はnode.jsだけなので、Socket.IOはインストールしませんでした。簡単!

Windows+Node.js+Socket.IO
http://www.koikikukan.com/archives/2012/01/10-015555.php

これはまだコマンドラインだけで確認できる状態です。
今後のことを考えてWebページに表示したいなぁということで、
良さげなサイトがありました。

node.jsとMySQLで割と普通のデータベースウェブアプリを作ってみるチュートリアル
http://sakuratan.biz/archives/3101


(2) モジュールのインストール
(1)でnode.jsをインストールしたときにnpmも一緒にインストールされていました。
なので、node.jsをインストールしたディレクトリで以下のコマンドを実行して、
参考サイトに書いてある必要なモジュールをインストールしました。

ディレクトリ
C:\Program Files (x86)\nodejs

コマンド
npm install mysql
npm install express
npm install ejs

いざ開発!の前に、MySQLをインストールしてデータベースとテーブルを用意する必要があります。


(3) MySQLのインストール
参考サイトではMySQLのインストールが割愛されていたので調べてみました。

MySQL バージョン 5.5 のダウンロードとインストールと設定 (Windows の場合)
http://www.kkaneko.com/rinkou/mysql/mysqlinstall.html

この手順のとおり進めてMySQLをインストールできました。
ネットって便利。

MySQLのリファレンスはこれを参考にしてます。

MySQLクイックリファレンス
http://www.bitscope.co.jp/tep/MySQL/quickMySQL.html


(4) データベースとテーブルを作成する
(3)でインストールした後、スタートメニューに「MySQL 5.5 Command Line Client」が追加されるので
それをクリックすると、ローカル環境でMySQLの操作ができるコマンドラインが現れます↓

20120408nodejs001.png

ログインしたら、参考サイトにあるとおりにデータベースを作成します。

CREATE DATABASE nodejs_url_shortener;

データベースを切替えます。

use nodejs_url_shortener;

テーブルを作成します。

CREATE TABLE shorten_urls (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
long_url VARCHAR(256) UNIQUE NOT NULL COLLATE utf8_bin);
↓エラー
ERROR 1071 (42000): Specified key was too long; max key length is 767 bytes

あれ?
原因はこれのようです↓
http://d.hatena.ne.jp/takihiro/20080306/1219295452

修正した↓

CREATE TABLE shorten_urls (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
long_url VARCHAR(255) UNIQUE NOT NULL COLLATE utf8_bin);

【参考】
データベースサーバー構築(MySQL)
http://fedorasrv.com/mysql.shtml


(5) テスト用ユーザーを作成する
今後のことを考えて、rootのまま操作するのは嫌だなぁということで、テスト用ユーザーを作りました。

MySQLのユーザー管理
http://linux.kororo.jp/cont/server/mysql_user.php

MySQLのコマンドラインで以下を実行。

GRANT ALL PRIVILEGES ON nodejs_url_shortener.*
TO 'test'@'localhost'
IDENTIFIED BY '[パスワード]';

ユーザー追加を確定。

FLUSH PRIVILEGES;

追加されたかを確認。
SELECT host,user,password FROM mysql.user;
+-----------+------+-------------------------------------------+
| host | user | password |
+-----------+------+-------------------------------------------+
| localhost | root | *XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX |
| localhost | test | *XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | <-- 成功
+-----------+------+-------------------------------------------+


(6) node.jsとMySQLを連携させる
準備が整いました。
参考サイトの「MySQL との連動」から続けます。

現在でのディレクトリ構成↓

C:\Program Files (x86)\nodejs\base62.js
\nodejs\server.js
\nodejs\views\index.ejs
\views\layout.ejs
\views\result.ejs
参考サイトのserver.jsは、現バージョンでは一部書き換える必要があります。

require('sys'),

require('util'),

express.bodyDecoder();

express.bodyParser()

[node.js]MySQLからデータを取得(node-mysql v0.9.4)
http://d.hatena.ne.jp/mitsuto/20110921/p1
をもとに、↓の修正。

var client = new Client();

var client = mysql.createClient();

この修正を行わないと、
Error: deprecated: connect() is now done automatically.
というエラーが出て、データベースへの接続がうまくいきません。

ということで、参考サイトのserver.jsを修正したバージョン↓
※[パスワード]部分は適宜書換えてください
-------------------------------------------------------------
// サーバのアドレスとポート
var HOSTNAME = 'localhost';
var PORT = 8124;

// MySQL データベース名、ユーザー名、パスワード
var DBNAME = 'nodejs_url_shortener';
var DBUSER = 'test';
var DBPASSWD = '[パスワード]';

var sys = require('util'),
express = require('express'),
ejs = require('ejs'),
Client = require('mysql').Client,
mysql = require('mysql'),
base62 = require('./base62');

var app = express.createServer();
app.use(express.bodyParser());
app.register('.ejs', ejs);

// ルート GET
app.get('/', function(req, res) {
res.render('index.ejs');
});

// ルート POST
app.post('/', function(req, res) {
// テンプレート変数
var locals = {
error: null,
short_url: null
};
// パラメータをチェック
if (!req.body.url) {
locals.error = 'Missing url parameter';
} else if (req.body.url > 255) {
locals.error = 'url parameter too long';
}
if (locals.error) {
res.render('result.ejs', {
locals: locals
});
return;
}
// idを短縮URLに変換して出力
function render_short_url(id) {
locals.short_url = 'http://' + HOSTNAME;
if (PORT != 80) {
locals.short_url += ':' + PORT;
}
locals.short_url += '/' + base62.int_to_base62_string(id);
res.render('result.ejs', {
locals: locals
});
}

// データベースに短縮URLを登録して表示
var client = mysql.createClient({
database: DBNAME,
user: DBUSER,
password: DBPASSWD
});

client.query(
'INSERT INTO shorten_urls (long_url) VALUES (?)',
[req.body.url],
function(err, results) {
// キー重複は無視
if (err && err.number != Client.ERROR_DUP_ENTRY) {
client.end();
throw err;
}

// インサート成功
if (!err) {
render_short_url(results.insertId);
return;
}

// インサート失敗時はlong_urlをキーで検索する
client.query(
'SELECT id FROM shorten_urls WHERE long_url = ?',
[req.body.url],
function(err, results, fields) {
if (err) {
client.end();
throw err;
}
if (results.length == 0) {
client.end();
throw new Error('Something wrong');
}
client.end();
render_short_url(results[0].id);
}
);
}
);
});

// 短縮URLをリダイレクト
app.get(/^\/([0-9A-Z]{5,})$/, function(req, res) {

// 修正箇所
var client = mysql.createClient({
database: DBNAME,
user: DBUSER,
password: DBPASSWD
});

// idからurlを検索してリダイレクト
client.query(
'SELECT long_url FROM shorten_urls WHERE id = ?',
[base62.base62_string_to_int(req.params[0])],
function(err, results, fields) {
if (err) {
client.end();
throw err;
}
client.end();

if (results.length == 0) {
// データが無い
res.send('Not Found', 404);
} else {
res.redirect(results[0].long_url);
}
}
);
});
app.listen(PORT, HOSTNAME);
-------------------------------------------------------------


(7) 動作確認
起動。
C:\Program Files (x86)\nodejs\node server.js

ブラウザでアクセスして確認。
http://localhost:8124

参考サイトのとおりに動作したら成功です!
posted by be-style at 12:37| Comment(0) | Web

2012年03月12日

[Web] Webページ内を遊びまわる

動画やゲーム、Webページでは色々な表現を使ってユーザーを惹きつける仕組みがあります。
その中で、これは見たことがなくて凄く斬新で楽しかったです。

mymagnum:
http://pleasurehunt.mymagnum.com/?lc=en_gb

はじめは女性が登場してキーボード操作で走れる、ジャンプできる、くらいの簡単な説明が出ます。
単純なゲームかと思いきや、
なんとWebページ内を走り回ったり、動画の中に飛び込んだり、ゲーム画面に入ったりと色々なことができます。

演出も上手くて、遊んでいて楽しかったです。
これは凄いなー。
真似したいけど、相当手間と時間をかけてそうです。

ぜひ一度ご覧あれ。
ちゃんとゲームになっているので、クリア後はスコアが出ます↓

20120312mymagnum.png
タグ:mymagnum
posted by be-style at 13:53| Comment(0) | Web