App Service Editor で Node.js アプリ開発

こんにちは。

Visual Studio Code で使用されている Monaco Editor ベースのブラウザー エディタ「App Service Editor」 (旧名 Visual Studio Online) を使うと、クラウドを使って、コード補完や検索などのユーティリティを使ったプログラミングが “いつでも どこでも” できることに加え、開発環境の作成・削除もローカル環境を汚すことなく迅速におこなえ、また console.log() などのサーバー側出力 (output) も実際の配置環境でリアルタイムに確認できるなど、多くの付加価値を得ることができます。(是非、使ってみてください。)

今回は、この App Service Editor をご紹介します。

 

App Service Editor の表示

前述の通り、ローカル環境に開発ツールなどをインストールする必要はいっさいありません。ブラウザーと Azure のアカウントがあれば充分です。(無料の Azure Web App で充分です。)

Azure Portal から App Services の Web App を作成し、作成された Web App (App Service) を選択して [Tools] (ツール) の [App Service Editor] を選択します。

下図の通り、App Service Editor が表示されます。
URL を見ていただくとお気づきの方も多いと思いますが、Kudu がベースとなっています。(Kudu についての説明は、ここでは省略します。)

 

Node.js で “Hello World”

それでは、簡単な Node.js のアプリを作って動かしてみましょう。作り方は、IIS 上で Node.js を動かすときとほぼ同じです。

まず、[New File] のアイコン  をクリックして、「web.config」という名前のファイルを新規作成します。
既に Azure Web App には Node.js 用の IIS モジュール (iisnode) が入っているので、web.config に以下の通り記述して Node.js の設定をおこないます。
下記の構成では、public フォルダーの下に (同じ名前の) ファイルがある場合には Static コンテンツとして表示し、それ以外の場合には Node.js を使って server.js というファイルで処理するように構成しています。

<configuration>
  <system.webServer>
    <handlers>
      <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}" />
        </rule>
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True" />
          </conditions>
          <action type="Rewrite" url="server.js" />
        </rule>
      </rules>
    </rewrite>

    <!-- node_modules をちゃんと隠す場合 -->
    <!--
    <security>
      <requestFiltering>
        <hiddenSegments>
          <add segment="node_modules" />
        </hiddenSegments>
      </requestFiltering>
    </security>    
    -->
  </system.webServer>
</configuration>

[New File] のアイコンをクリックして、今度は、「server.js」の名前のファイルを新規作成し、以下の通り記述します。ここでは、「Hello World」と表示させています。
なお、process.env.PORT は IIS が Node に渡すユーザー変数で、ここには Azure Web App が内部で使用するポートの名前が入っています。(tcp 80 などの外部ポートではありません。)

var http = require('http');
http.createServer(function (req, res) {    
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end('Hello, world!');    
}).listen(process.env.PORT);

補足 : 実際には、上記の server.js を作成して実行 (Ctrl-F5) をおこなうだけで、Script の start を理解して自動で Web.config を作成してくれます。Node.js、PHP などを使用するほとんどのケースで、Web.config の手動作成は不要です

なお、コード編集の際に気づいたかと思いますが、編集中は JavaScript のコード補完をおこなってくれます。この辺りは、以前セミナーで何度も紹介した Napa 譲りな機能ですね。(Napa についての説明は省略します。)
例えば、「document.」と入力すると、document オブジェクトの候補の一覧が表示されるのがわかります。(Intellisense と呼ばれるエディター機能です。)

また、「for」と入力して Ctrl-Space を押すと、for loop や foreach など候補が表示されるので、いずれかを選択して Tab キーを押すと、下図の通り、そのコードのひな形が挿入されます。(Code Snippet と呼ばれるエディター機能です。)

なお、request など、Node.js が built-in しているさまざまなモジュールのオブジェクトについても、後述する typescript を使って Intellisense (Suggestion) による補完が可能です。(typescript の箇所で紹介します。)

もちろん、Ctrl-z (元に戻す) や Ctrl-y (繰り返し) などの基本的なコマンドも使えますので、ついブラウザーであることを忘れてしまうことでしょう。(例えば、Internet Explorer で F12 キーなどを押すと、ブラウザーの機能が動いてしまうので注意してくださいね。)

さいごに、左の Navigation で [Run] のアイコン  をクリックすると、このアプリケーションが実行されます。(Ctrl-F5 キーでも OK です。)
ブラウザーで見ると、下図の通り、「Hello World」と表示されます。

ファイル内検索 (Shift-Ctrl-f) やファイル名検索 (Ctrl-e) など、エディターに必要なさまざまな機能を提供します。

 

Npm の使用

サーバー側のコマンドも使用できるため、Npm を使って Express などの追加のパッケージも使用できます。(今回はサーバー サイドですが、AngularJS なども使用できるので、MEAN スタックの開発なども可能です。)
今回は、Node の Ejs を使ってテンプレート ドキュメントを Parse してみましょう。(なお、今回は Ejs を単独で使用しますが、Express を使用したサンプルは「Azure Active Directory の SSO 開発 (Node.js 編)」に掲載しました。)

左の Navigation の [Open Console] のアイコン  をクリックすると、サーバー側のコマンドを入力するためのコンソール (Console) が表示されます。(Ctrl-Shift-c でも OK です。)

ここに、今回は、以下の通り入力します。npm (Node Package Manager) を使って ejs をインストールしています。

npm install ejs

では、ejs で読み込むサンプル ファイルを作成してみましょう。
今回は、testpage.ejs というファイルを新規作成して、以下の通り記述します。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type"
    content="text/html; charset=UTF-8">
  <title><%=title %></title>
  http://hello.js
</head>
<body>
  <h1><%=title %></h1>
  
    click me !  
</body> </html>

上記のコードで参照している hello.js も作成しておきましょう。「public」という名前のフォルダー (前述を参照) を作成し、このフォルダーに hello.js ファイルを新規作成して、以下の通り記述します。

var Test;
(function (Test) {
  var Hello = (function () {
    function Hello(text) {
      this.text = text;
    }
    Hello.prototype.show = function () {
      alert(this.text);
    };
    return Hello;
  })();
  Test.Hello = Hello;  
})(Test || (Test = {}));
var test = new Test.Hello("Hello, World!");

さいごに、上記の server.js を以下の通り書き換えます。
今回は、上記でインストールした ejs パッケージを読み込み、testpage.ejs を Render 処理しています。(実際の開発では、URI のファイル名を元に読み込むなど、工夫して使ってください。)

var http = require('http');
var fs = require('fs');
var ejs = require('ejs');
var testpage = fs.readFileSync('./testpage.ejs', 'utf8');
http.createServer(function (req, res) {
  var testrender = ejs.render(testpage, {
    title:"EJS サンプル",
  });
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.write(testrender);
  res.end();
}).listen(process.env.PORT);

再び、左の Navigation の [Run] アイコンをクリックし (Ctrl-F5)、ブラウザーで確認してみてください。
下図の通り表示され、[click me !] ボタンを押すと「Hello, World!」と alert が表示されます。

 

同様に、express を使用したい場合にも、下記の通り、サーバー環境だけでインストールとカスタマイズができます。

// install express generator
npm install express-generator -g
// create express files
express -f
// build using package.json
npm install

 

生産性の大幅アップ ! – typescript の使用

もちろん、いま流行りの typescript も使えます。(オープンソース界隈の迅速な動きもあり、typescript は、既に さまざまな環境で使えるようになっています。)
強い型付けによって、Intellisense (Suggestion) を参照しながらサクサクと JavaScript が書けるので、一度使い始めたらきっと離れられなくなるでしょう。

例えば、上記の hello.js を typescript で書き直してみましょう。
前述同様、Navigation の [Open Console] のアイコンをクリックしてコンソールを表示し (Ctrl-Shift-c)、今度は、以下の通りコマンドを入力します。

npm install typescript

前述の hello.js を削除して、変わりに、以下の hello.ts を新規作成します。

module Test{
  export class Hello{
    constructor(private text : string){
    }
    show() : void{
      alert(this.text);
    }
  }
}
var test : Test.Hello = new Test.Hello("Hello, World!");

今回は、試しに、このファイルだけ、tsc (typescript compiler) でコンパイルしてみます。
コンソールを使って、以下の通りコマンドを入力すれば OK です。

cd public
tsc hello.ts

コンパイルされ、上記と同じ hello.js が新規作成されます。(実行結果は同じなので 省略します。)

なお、こうした typescript、LESS などを使用する際には、grunt を組み合わせると、毎回上記のようなコマンドを入力せずに自動コンパイル可能です。
ただし、Free Plan の Azure Web App ではリソースの使用制限 (Quota Limit) が厳しいため、grunt などの常駐プロセスを使用する際は Basic plan か Standard plan に変更してください

 

また、既に多くの定義ファイルが commit されているため、Express など既存のライブラリーやフレームワークに対応した定義ファイル (.d.ts ファイル) もインストールできます。
例えば、Node.js が既定で提供しているモジュールの多くのオブジェクト (request オブジェクト等) も any となっていて、使用可能なメンバーを探す際に苦労することがあります。このような場合、下記の通り、Node.js 用の定義ファイル を検索してインストールすることで、typings フォルダーに node.d.ts が配置されます。(下記の -a は -action の意味です。検索して、その結果をインストールしています。)

npm install tsd -g
tsd query node -a install

上記の定義ファイルを使用する際は、ファイルの先頭に下記の通り記述するか、_references.js というファイルに下記を記述して Global な参照として定義することで、Intellisense (Suggestion) が有効になります。
ただし、試してみたところ、https など、一部の細かなモジュールで Intellisense (Sugesstion) が効かないものもあったので注意してください。。。(大方定義されています !)

/// <reference path="typings/node/node.d.ts" />

挿入の際もわざわざ始めから記述する必要はなく、「ref」と入力して Ctrl – Space キーを押すことで「/// <reference />」タグが挿入でき、さらに path=”” の中で Ctrl – Space を選択して *.d.ts ファイルが一覧されるので (下図)、node.d.ts を選択すれば OK です。(このように、Ctrl – Space は、コード本体以外のさまざまな補完で使用できます。)

これで、Node.js に built-in しているさまざまなオブジェクトについても Suggestion (Intellisense) を使って生産性高くプログラミングできます。

 

Debugging (デバッグ)

最新の App Service Editor では、Node-inspector が built-in されているため、ブラウザーを使用した Debug も可能です。

手順詳細は「Azure による Node.js の Remote Debug (node-inspector 編)」を参照してください。

 

ソース管理と Publish

App Service Editor では、Git も使えます。

Navigation の [Git] アイコン  をクリックすると、UI を使った repository の初期化や commit などが可能です。(Ctrl-Shift-g でも OK です。)

上図で [Initialize git repository] をクリックして、comment を入力して Enter を押すと、ソースが Git (master repository) に commit されます。(.git のフォルダーが作成され、git の構成情報が作成されます。)
ソースコードの変更をおこなうと、エディター上で変更を示すアイコンも表示されて可視化できます。

再度、[Git] アイコン  をクリックすると (Ctrl-Shift-g)、前回の commit から変更・追加などがおこなわれたファイル一覧が表示され、ファイルをクリックすると下図のように diff が表示されます。

Web アプリケーションができてきたら、さいごに、Visual Studio Team Service や Github などの Git に対応した repository に登録しても良いですし、逆に Visual Studio や Sublime Text などを使ってローカルで編集したファイルをこの remote repository に commit しても良いでしょう。

Visual Studio Team Service のプロジェクト管理を使用する場合は、TFS のコンソール (https://<account&gt;.visualstudio.com) を開き、Git でログイン (認証) できるように、あらかじめ Basic Authentication の設定おこないます。
右上のユーザー名をクリックして、[My Profile] を選択します。

表示される画面で [Credentials] タブを選択し、Basic 認証のためのユーザー ID やパスワードの設定をおこなっておきます。

あとは、上述の App Service Editor のコンソール (Console) などを使って、作成したプロジェクト (https://<account&gt;.visualstudio.com/DefaultCollection/_git/<project name>) にソース コードをチェックインできます。

git remote add origin https://tsmatsuz.visualstudio.com/DefaultCollection/_git/test1
git push origin master

(2015/03 追記 : Azure Web App における Git のさまざまな活用方法については「Azure Web App の Git 活用」に記載しました。)

補足 : Monaco の Console では対話型コマンド (interactice command) は使用できません。対話型コマンドを使用する際は Kudu Console を使用してください。
なお、Sep 2014 の更新 (Sprint 71 Update) により、Kudu Console へアクセスしやすくなりました。(下図参照)

補足 : Mac OS をお使いの方は、Ctrl – Space を選択すると Spotlight 検索が表示されてしまいます。Mac OS の方は、キーマップを変更して使用してください。(設定がやや面倒ですが、Ctrl – Space による Suggestion は上述の通り非常に強力ですので、是非活用してください。)

 

※ 変更履歴

2015/03/26  Azure WebSite から Azure Web App に名称変更

2016/07/15  Visual Studio Online から App Service Editor に名称変更

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s