サーバーサイドJavaScript「Node.js」とフレームワーク「Express」によるWebアプリ開発を行うための、環境構築方法をまとめました。
nodebrewを利用したNode.js本体の導入、Eclipse用プラグイン「Nodeclipse」の導入、簡単なWebアプリ作成までの手順をできるだけ丁寧に解説しています。
※現在Node.jsの学習中のため、当記事の内容は今後追加・変更する可能性があります。
環境
- モデル: MacBook Pro 15インチ(Mid 2015)
- OS: macOS Sierra 10.12.1
- Homebrew: 1.1.1
- Java(JDK): 1.8.0_112
- Eclipse: Java EE IDE for Web Developers(Neon、4.6.1)
事前に必要なツールの導入方法は、次の記事にまとめています。
nodebrew
nodebrewとは
「nodebrew」はNode.js用のバージョン管理ツールです。
複数のバージョンのNode.jsをインストールしたり、用途に応じて切り替えることが簡単にできます。
(リリース用のプロジェクトには実績のある安定版を使用し、検証用プロジェクトで最新版を試すなど)
nodebrewのインストール
次のコマンドを実行し、nodebrewをインストールします。
$ curl -L git.io/nodebrew | perl - setup % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0 0 0 0 0 0 0 0 0 --:--:-- 0:00:01 --:--:-- 0 0 0 0 0 0 0 0 0 --:--:-- 0:00:03 --:--:-- 0 100 24340 100 24340 0 0 5978 0 0:00:04 0:00:04 --:--:-- 373k Fetching nodebrew... Installed nodebrew in $HOME/.nodebrew ======================================== Export a path to nodebrew: export PATH=$HOME/.nodebrew/current/bin:$PATH ========================================
パスの追加
.bash_profileにパスを追加します。
$ vi ~/.bash_profile
# nodebrew export PATH=$HOME/.nodebrew/current/bin:$PATH
「$HOME/.nodebrew/current」はシンボリックリンクとなっており、リンク先はその時点で有効なNode.jsバージョンのディレクトリです。(「~/.nodebrew/node/v7.1.0」など)
そのため、上記パスを追加しておくことで「node」コマンド実行時に対象バージョンが使用されます。
エイリアスの追加
nodebrewは使いやすいバージョン管理ツールですが、コマンド名が長いです。(この理由でnvmを使おうかと思ったほど)
毎回入力するのは手間なので、.bashrcにエイリアスを追加します。 以降、当記事では「nodebrew」コマンドを「nb」と表記します。
$ vi ~/.bashrc
# nodebrew alias nb='nodebrew'
設定を反映するため、ターミナルを一度再起動します。
動作確認
nodebrewのバージョンと使い方を確認します。
$ nb nodebrew 0.9.6 〜
Node.js
Node.jsのインストール
インストール可能なNode.jsのバージョンを確認します。(大量に表示されます)
$ nb ls-remote
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6
〜
v6.0.0 v6.1.0 v6.2.0 v6.2.1 v6.2.2 v6.3.0 v6.3.1 v6.4.0
v6.5.0 v6.6.0 v6.7.0 v6.8.0 v6.8.1 v6.9.0 v6.9.1
v7.0.0 v7.1.0
〜
次のコマンドで、Node.jsをインストールします。 上記で確認したバージョンを指定してください。
$ nb install-binary バージョン
バージョンに「stable」を指定すると、その時点の最新安定版をインストールできます。
「-binary」を外すとソースコードからのコンパイルが必要なため時間がかかるようです。
例
# stable(最新安定版)をインストール $ nb install-binary stable Fetching: https://nodejs.org/dist/v7.1.0/node-v7.1.0-darwin-x64.tar.gz ######################################################################## 100.0% Installed successfully # v6.9.1(LTS、長期サポート版)をインストール $ nb install-binary v6.9.1 Fetching: https://nodejs.org/dist/v6.9.1/node-v6.9.1-darwin-x64.tar.gz ######################################################################## 100.0% Installed successfully # v0.8.10をインストール $ nb install-binary v0.8.10 Fetching: https://nodejs.org/dist/v0.8.10/node-v0.8.10-darwin-x64.tar.gz ######################################################################## 100.0% Installed successfully
古いバージョンの「v0.8.10」をインストールしているのは、オライリー社『Nodeクックブック』のサンプルプログラムを試すためです。
Node.jsの有効化
次のコマンドで、Node.jsを有効化します。
$ nb use バージョン
例
$ nb use v7.1.0 use v7.1.0
インストール済みのNode.jsと、現在有効なバージョンを確認します。
$ nb ls
v0.8.10
v6.9.1
v7.1.0
current: v7.1.0
Node.jsが使える状態になりました。
$ node -v
v7.1.0
次のコマンドで、npm(Node.jsのパッケージ管理ツール)を更新できます。
$ npm update -g npm
※古いバージョンのNode.jsに含まれるnpmを更新する際は注意が必要です。 新しいnpmでは、古いバージョンのNode.jsをサポートしていない場合があります。
Node.jsのバージョン切り替え
有効化と同様のコマンドで、バージョンの切り替えも可能です。
$ nb use v6.9.1 use v6.9.1
$ nb ls
v0.8.10
v6.9.1
v7.1.0
current: v6.9.1
$ node -v
v6.9.1
Eclipse用プラグイン「Nodeclipse」
Node.jsによるWeb開発では、フレームワーク「Express」を利用するのが一般的です。
Eclipseにプラグイン「Nodeclipse」を導入することで、Node.js + Expressのプロジェクト作成や実行が簡単に行えます。
Nodeclipseのインストール
Eclipseを起動し、メニューバーより[ヘルプ]→[Eclipse マーケット プレース]を開き、[検索]に「node」と入力後に[Enter]で、Node.js関連のプラグインが表示されます。
「Nodeclipse」内の[インストール]ボタンを押します。
少し待つと次の画面が表示されるので、[確認]をクリックします。
以降、ダイアログに従ってインストールを進めます。
Eclipseの起動(ターミナル)
Eclipseを一度終了し、ターミナルから下記コマンドで起動します。
$ open -a eclipse
アプリケーションフォルダやLaunchpadからEclipseを起動すると環境変数が引き継がれないため、nodebrewでインストールしたNode.jsが実行できません。
毎回上記コマンドで起動するのは手間なので、エイリアスを追加しておくと便利です。
$ vi ~/.bashrc
# Eclipse alias eclipse='open -a eclipse'
Expressプロジェクトの作成・実行
メニューバーより[ファイル]→[新規]→[その他]をクリックします。
次の画面で[ノード]内の[Node.js Express Project]を選択し、[次へ]をクリックします。
任意のプロジェクト名(ここでは「ExpressTest」)を入力し、[完了]をクリックします。
Expressプロジェクトが作成されました。
「app.js」を選択後、画面上部の実行ボタンを押すと確認ダイアログが表示されます。 「Node Application」を選択して[OK]を押すとWebサーバーが起動します。(画面下部のコンソールに「Express server listening on port 3000」と表示)
Webブラウザで「http://localhost:3000」を開くと、次の画面が表示されます。
コンソールの赤い[終了]ボタンを押すと、Webサーバーが停止します。
まとめ
以上の設定により、Eclipse上でNode.js + Expressの簡単なWebアプリが作成できるようになりました。
本格的な開発を行うために必要なEclipseの設定については、次の記事にまとめています。