Cloud9 IDEでチャットアプリを作りAzureにデプロイして見ました(前編)


先般の記事「Cloud9 IDEでAzureにNode.jsアプリがデプロイできるようになりました」で、Azureの新しい開発/デプロイ手段として、Cloud9 IDEが提供されましたとお伝えしましたが、今回はsocket.ioを利用した簡単なチャットアプリを作ってみましたのでご紹介します。

下記が出来上がりのレポジトリのイメージです。

image

Cloud9 IDEのアカウントがあれば(基本的な機能は無料登録で利用可能です)、下記の様に、このアドレスからソースの参照が可能ですので興味のある方はご覧ください(サンプルは最低限動くレベルですのであしからず)。

image

Cloud9 IDEの基本的な使い方と、Azureへのデプロイ方法については、「Deploying a Windows Azure App from Cloud9」を参照して頂きたいのですが、チャットアプリケーションを作っていく手順を簡単に紹介したいと思います。

ダッシュボードの「MY PROJECTS」の「+」から「Create a new project」を実行します。

image

「Project name:」に適当な名称(後で変更できません)を入力して「Create」します。

image

ダッシュボードに戻りますので、「START EDITING」を実行しIDEを起動すると空のプロジェクトが作成されます。

image

今回、node.js用のWebフレームワークである、「Express」、テンプレートエンジンである「ejs」、ソケットライブライである、「Socket.IO」を利用していますので、IDEのコマンドラインから次のコマンドを実行しレポジトリに加えます。

コマンド:’npm install socket.io express ejs’

image

「Console」にインストール状況が表示されますので完了しましたら、「Project Files」の箇所で画面をリフレッシュしますと、モジュールがインストールされたことが確認できます。

image

これで準備が出来ましたので、実装を行っていきます。Express自体の機能として雛形の生成があるようなのですが、Consoleでコマンドを入力してみましたがどうも出来ませんので(やり方を知らないだけかも知れません…)自分でディレクトリやファイル作成を行いました。

一通りコーディングした結果が下記の様な感じです。

image

Cloud9 IDE上でデバッグ実行してみます。今回作成した「server.js」を選択している状態で、上部の「debug」を実行すると、Consoleに実行状態が表示されます。

image

表示されているアドレスを2つのブラウザで開いてチャットしてみた所です。うまく動いているようです。

image

ここまでの注意点としては、node.jsのアプリケーションファイル名を「server.js」にしておいた方が無難と言う事です。

この辺りの事は、後編で改めて述べさせていただきたいと思います。

広告

2 thoughts on “Cloud9 IDEでチャットアプリを作りAzureにデプロイして見ました(前編)

  1. ピンバック: Cloud9 IDEでチャットアプリを作りAzureにデプロイして見ました(後編) | Azure Fan

  2. ピンバック: プロ生@大阪でしゃべってきました « ブチザッキ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中