Node.js+ExpressでAngular用のコンテンツをサーブする

Angularソースのビルド

本連載のAngularでマウスイベントをハンドルで使用したサンプルアプリをNodejs + Expressと一緒に使用します。とは言っても複雑なことはせず、ビルドしたAngular用のソース（JavaScriptにトランスパイルされたファイル）を静的に提供するだけです。

まず、app1ディレクトリで以下のコマンドを実行します。 

$ ng build

すると、distディレクトリといつくかのファイルが作成されます。

$ ls dist/
favicon.ico index.html inline.bundle.js inline.bundle.js.map main.bundle.js main.bundle.js.map polyfills.bundle.js polyfills.bundle.js.map styles.bundle.js styles.bundle.js.map vendor.bundle.js vendor.bundle.js.map

Nodejs + Expressのソースコード

app1と同じレベルに、ソースコード用のディレクトリserverを作成します。おおよそのディレクトリ階層のイメージは次のとおりです。

app1
|-- src
|   `--app
|-- dist
serve
├ serve.js

serve.jsのソースコードは次のとおりです。

var express = require("express");
var app = express();
app.use(express.static(__dirname + '/../app1/dist/'));
var server = app.listen(3000, function(){
  console.log("Started. Port:" + proxyLoc(server.address()).port);
});

実行します。

$ node serve.js
Started. Port:3000

ブラウザでhttp://bottle.local:3000/をアクセスすると、無事Angularで作ったアプリの画面が表示されました。

ソース変更で自動リロード

ソースを変更した時、自動的にビルドとサーバを再起動する方法を紹介します。

Angular用のソースを自動でビルドするには、app1ディレクトリで次のように-wオプションを付けてbuildを実行します。

$ ng build -w

次はサーバの自動再起動するための設定です。必要なモジュールをインストールします。

$ npm install reload watch

そして、serve.jsを次のように変更します。

var express = require("express");
var http = require('http')
var reload = require('reload')
var watch = require('watch')
var app = express();
app.use(express.static(__dirname + '/../app1/dist/'));

var server = http.createServer(app)
var reloadServer = reload(server, app);
watch.watchTree(__dirname + "/../app1/dist", function (f, curr, prev) {
  reloadServer.reload();
});

server.listen(3000, function(){
  console.log("Started. Port:" + proxyLoc(server.address()).port);
});

そして、先ほどと同じようにnpmから起動します。

$ node serve.js

 この状態でAngular用のソース（例えば、app.component.html)を変更すると自動的にリビルドされ、それをトリガーにサーバが再起動します。ブラウザをリロードすると、変更後の画面が表示されます。