STDIO

システム開発やフクロウ、節約などの情報をI/Oするためのブログ

【Node.js】開発環境の構築(Mac)

サーバーサイド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 Nodeclipse導入1

少し待つと次の画面が表示されるので、[確認]をクリックします。

Eclipse Nodeclipse導入2

以降、ダイアログに従ってインストールを進めます。

Eclipseの起動(ターミナル)

Eclipseを一度終了し、ターミナルから下記コマンドで起動します。

$ open -a eclipse

アプリケーションフォルダやLaunchpadからEclipseを起動すると環境変数が引き継がれないため、nodebrewでインストールしたNode.jsが実行できません。

毎回上記コマンドで起動するのは手間なので、エイリアスを追加しておくと便利です。

$ vi ~/.bashrc
# Eclipse
alias eclipse='open -a eclipse'

Expressプロジェクトの作成・実行

メニューバーより[ファイル]→[新規]→[その他]をクリックします。

次の画面で[ノード]内の[Node.js Express Project]を選択し、[次へ]をクリックします。

Eclipse Expressプロジェクト作成1

任意のプロジェクト名(ここでは「ExpressTest」)を入力し、[完了]をクリックします。

Eclipse Expressプロジェクト作成2

Expressプロジェクトが作成されました。

Eclipse Expressプロジェクト作成3

「app.js」を選択後、画面上部の実行ボタンを押すと確認ダイアログが表示されます。 「Node Application」を選択して[OK]を押すとWebサーバーが起動します。(画面下部のコンソールに「Express server listening on port 3000」と表示)

Webブラウザで「http://localhost:3000」を開くと、次の画面が表示されます。

Eclipse Expressプロジェクト実行

コンソールの赤い[終了]ボタンを押すと、Webサーバーが停止します。

Eclipse Expressプロジェクト終了

まとめ

以上の設定により、Eclipse上でNode.js + Expressの簡単なWebアプリが作成できるようになりました。

本格的な開発を行うために必要なEclipseの設定については、次の記事にまとめています。

関連記事