基礎から学ぶNode.js

第6回 Node.jsアプリケーションをCloud9で開発する

この記事を読むのに必要な時間:およそ 2 分

Herokuをリモートリポジトリに追加

図5 Herokuダッシュボード - アプリ

図5 Herokuダッシュボード - アプリ

Herokuにログインして,ダッシュボードで先ほどのアプリのインフォメーションを表示し,図5にあるGit URLをコピーしておきます。

そしてCloud9 IDEに戻って,ワークスペース画面の下部にあるコマンドラインにフォーカスを当てます。⁠git remote add heroku <Git URL>」を入力して,Enterします。これでリモートリポジトリherokuとして追加されました。

図6 ワークスペースのコマンドライン

図6 ワークスペースのコマンドライン

さらに「git pull heroku master」を入力して,Enterすると,図6のようにソースコードをCloud9に持ってくることができます。

ワークスペース画面の左ペインの,ファイルとフォルダのアイコンを押下して,app1のコンテキストメニューから Refresh することで,先ほどgit pullしたソースコード群がツリー表示に反映されます。

Cloud9での開発を試す

図7 WORKSPACE FILES - app.js

図7 WORKSPACE FILES - app.js

手始めにapp1直下の,app.jsを開きます図7⁠。このapp.jsが選択された状態で,上部にある再生アイコンの付いた [Run] ボタンを押下すると,Cloud9上でアプリケーションを実行することが可能です。下部のコンソール画面に起動したアプリケーションインスタンスのURLが表示されるため,それを開くと,実際に動作することが確認できます。

さらにRunボタンのドロップダウンメニューから[Run in debug mode]にチェックを入れると,RunがDebugに替わります。

図8 デバッグ時のWORKSPACE

図8 デバッグ時のWORKSPACE

この状態で実行すると,一般的なIDE同様にコード上にブレイクポイントを設定して,止めたタイミングの変数の中身を,ポップアップで(オブジェクトも展開して)確認することも可能です図8⁠。

このようにCloud9 IDEは,コードエディタに留まらず,スタンドアローンの統合開発環境さながらの体験をブラウザ上で再現してくれます。

Herokuへの再デプロイ

ためしに,app1/public/stylesheets/style.cssを開いて,以下のようにページの色を反転させるように書き換えてみましょう。

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background-color:#222;
  color:#fff;
}

a {
  color: #00B7FF;
}

さらにコマンドラインから「git commit - m "changed color."」と入力してEnterします(上部メニューでTools → Git → Commitとすると途中まで入力された状態になります⁠⁠。さらに先ほどのDEPLOYペインからHerokuアプリケーションを選択し,ポップアップメニューから[Deploy] ボタンを押下すると,Herokuに配備されます。

図9 Herokuで再度デプロイして反映された画面

図9 Herokuで再度デプロイして反映された画面

コンソールに表示されたアプリケーションURLを開くと,図9のように反映されたことが確認できます。

最後に

今回は,Cloud9 IDEというクラウド上の統合開発環境を用いた,Node.jsアプリケーションの開発を紹介しました。Cloud9自体はオープンソースとしてGitHubに公開されているので,興味のある方は自分のサーバ上でプライベート用に環境構築してみるのも良いでしょう。

次回はWindows Azure上で,そのライブラリやストレージサービスなどを利用して,Node.jsアプリケーションの開発に挑戦していみたいと思います。

著者プロフィール

高橋俊光(たかはしとしみつ)

ティルフィン合同会社 代表。

メーカー企業でパッケージソフト開発などに携わった後,ティルフィン合同会社を設立しフリーエンジニアとして,RIAやスマートモバイルアプリとサーバーサイドと広い分野で開発に従事。iOSアプリ トレンドトピック,Newstrushをリリースしている。