NextJSのチュートリアル始めます。

NextJS

さて、そろそろサーバサイドもやらないと、ということで、ようやくNextJSのお勉強を始めます。
（東京node学園参加したかったなぁ。）


と、その前に、ExtJSを試す為に無理やり入れたnode環境では後々面倒なことになるかもと思いまして、サーバサイドの環境を再構築しましたので手順をまとめておきます。

今回は心を新たに「nave + node.js + npm + NextJS」の構成です。
以前失敗したnaveから行っちゃいます。
途中で何故以前失敗したかもわかりましたので、それもちょっと触れておきます。

下ごしらえ

先にapt-getでいくつかのパッケージをインストールしておきます。

sudo apt-get install git git-core build-essential libssl-dev curl pkg-config

注意点

node環境関連もろもろのインストール先について
当初、/usr/local/の下にインストールしようとしたのですが、
結局homeディレクトリ下にインストールしました。
というのも、naveやnpmが「sudoを使用してのインストールを推奨しない」となっているらしく、
/usr/local/配下にインストールしたければrootでインストール作業をした方が良いとのこと。
今回は個人での開発用ということで自分のhomeディレクトリ下でいいやと考えた次第です。

naveのインストール

naveとは、node.jsのバージョン管理をしてくれるツールです。
複数のバージョンをキレイに管理し、nodeを使用する際には
バージョンを指定して該当nodeを使うためのシェルを新たに起動してくれます。

gitを使ってダウンロードします。

cd [homeディレクトリ配下の任意のディレクトリを指定]
git clone http://github.com/isaacs/nave.git

ダウンロードが終わると、現在のディレクトリ配下に「nave」というディレクトリが生成されます。
このディレクトリの中に移動します。

cd nave

naveディレクトリの中に「nave.sh」というシェルスクリプトがありまして、これがキモになります。
次のコマンドラインを実行すると、nave.shの使い方が分かります。

./nave.sh help

nodeのインストール

nodeとは、サーバサイドでjavascriptを実行するための処理系です。
javascriptと言えばクライアントのブラウザで動作する印象がありますが、
サーバ側でも使っちゃおうという意図で作られました。
（本当はもっとスゴイ意図があって作られた処理系だけどここでは割愛。）
最新のnodeをインストールするには、先ほどインストールしたnaveを使って、
次のコマンドラインを実行します。

./nave.sh install latest

私が実行した時点でのnodeの最新はバージョン0.5.10でした。
ちなみにこの段階でnodeがインストールされるわけですが、
nodeはGoogle Chromeブラウザで使用されているV8というJavascirptエンジンを使っています。
こいつもここでビルドされるため、コンパイルにベラボーな時間がかかります。
気長に待ちましょう。

あと、こっからつまづいた話なのですが、
私の環境（msi Wind Netbook u100）はメモリが1GBしかありません。
にも関わらずなぜかswap領域が91MBというわけの分からんサイズになってしまっていまして、
何度やっても1発でビルドが通りませんでした。
おかしいとは思ったんですけどね、firefoxがバシバシ落ちて。
で、インストールCDでブートして、gparted使ってswapを2GB超にしたら、
めでたくビルドに成功しました。


話を元に戻します。
naveでインストールしたnodeやその他もろもろはどこに格納されているかというと、
「/home/[username]/.nave/installed/[version]」になります。
当然ながらパスが切られてないのでフルパス指定しないと実行できません。
でもそれじゃあバージョン管理ツールの名がすたるってもんで。
そこでnave.shをダウンロードしたディレクトリにて、
次のコマンドを実行します。

./nave.sh use latest

これで、指定したバージョン（latestが相当。現時点では0.5.10）の資材を
使うための初期化処理が施された新しいシェルが立ち上がります。
確認します。

$ node -v
v0.5.10

「echo $PATH」を実行すれば、ちゃんとパスが切られていることも確認できます。



npmのインストール

npmは、nodeから使えるモジュール群を管理するツールです。（Node Package Managerかな。）
下ごしらえでインストールしてあるcurlコマンドを使ってインストール可能です。

curl http://npmjs.org/install.sh|sh

ゴイス。

npmがどこにインストールされるのかは確認してませんw
でも、「~/.nave/installed/0.5.10/bin/npm」ってのが存在してて、
「../lib/node_modules/npm/bin/npm-cli.js」へのシンボリックリンクになってました。
なので、多分「~/.nave/installed/0.5.10/lib/node_modules/npm」に、
パッケージとしてインストールされているんじゃなかろうかと推測。
自分がパッケージマネージャーのくせにw

NextJSのインストール

NextJSは、xenophyという会社の小堤さんという方が実装している、
node上で動作する Web Application Serverです。
node上でWebアプリを実装する際、便利な環境を提供してくれるフレームワーク？です。

インストールには、npmを使用します。

npm install nx

これだけでインストールが完了します。

自分が最初にやった時にはNextJSのバージョンが0.8.3で、
この状態だとサンプルのサーバーが正常に動かなかったんですが、
twitterでつぶやいていたところ、気づいてすぐに対応して下さってバージョンが0.8.4に上がり、
その後は問題なくサンプルが動作しました。
小堤さん対応ありがとうございました。


で、そのサンプルですが、次のようにします。
[username]のところは適宜書き換えて下さい。

cd
mkdir www
cd www
echo "
require('/home/[username]/node_modules/nx');
NX.service(
  {
    workers : false,
    enableDaemon : false,
    session: {
      savepath: '/home/[username]/www'
    }
  }
);
" > server.js
mkdir public
echo "<html>
<head>
    <title>Next JS Test</title>
</head>
<body>
    <p>Next JS Setting Complete.</p>
</body>
</html>" > public/index.html
node server start;


最後のコマンドラインにてWebサーバーが立ち上がり、
ポート3000で待ち受けています。
ブラウザで次のアドレスへゴー。

http://localhost:3000/

ブラウザに

Next JS Setting Complete.

の文字が表示されればOKです！