目的

Angular2でフロントエンドアプリを作成し、GitHubにソースを保存して、そこからAzureのPaaSであるApp Serviceを利用してアプリをホストするための一連の作業の手順を解説します。

使用するサービスは以下になります。

GitHub/git
Angular2
NPM
Azure App Service
Visual Studio Team Services (VSTS) - 別名Visual Studio Online

Angular2アプリのソースを準備する

GitHubレポジトリにブランチを作る

このステップでは、Angular2アプリのソースを保存するためのレポジトリとブランチを作成します。ただし、既存のレポジトリとブランチを使っても良いので、その場合はこのステップはスキップしてください。

私はdemoという名前の既存のGitレポジトリを使用しました。そこに、新規でangular2-demoという名前のブランチを作成します。ブランチはmasterでもいいんですが、混乱を避けるためにangular2-demoという名前を付けることにしました。

以下のコマンドをローカルのdemoレポジトリに移動した後、実行します。

git checkout -b angular2-demo

これでローカルのdemoレポジトリに新規のangular2-demoブランチが作成されました。
次にangularのHelloWorldアプリを作成します。

Angular CLI を使って簡単なHelloWorldアプリを作る

Angular CLIがすでにインストールされていることを前提に進めていきます。

まずはアプリを作成します。以下のコマンドでアプリを生成します。

ng new helloworld --inline-style --inline-template --skiptest

上のコマンドの --inline-style --inline-template --skiptestの部分はオプションで、コンポーネントのスタイルとHTMLテンプレートが個別に生成されるのを抑制します。ng new helloworldだけでも構いませんが、今回はなるべく分かりやすいように、生成されるファイルの数を抑えることにしました。

以下、コマンドの実行結果です。

これでangularアプリの準備は出来ました。
次にGitHubのレポジトリにHellowWorldアプリのソースをいったん保存します。

とりあえずGitHubレポジトリにpush

この段階でとりあえずGitレポジトリにgit addとgit commitして、さらにpushしておきます（git addとgit commitコマンドの詳細はここでは割愛します）。
angular2-demoブランチはまだローカルにしか存在しないブランチなので、以下のようなpushコマンドでGitHub側のレポジトリにangular2-demoブランチを作成しながら、上のステップで作成したHelloWorldアプリのソースをアップロードします。

git push --set-upstream origin angular2-demo

これでソースコードのベースが出来ました。ここからいくつか順番に変更を加えていきます。

web.configをプロジェクトに加える

AzureのWeb Appには.NET特有のweb.configという設定ファイルを加えなければなりません。下のスクリーンショットを参考に、web.configファイルをHelloWorldアプリに加えます。

web.configの内容はこちら。

web.config

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
            <rule name="redirect all requests" stopProcessing="true">
                <match url="^(.*)$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
                </conditions>
                <action type="Rewrite" url="index.html" appendQueryString="true" />
            </rule>
        </rules>
    </rewrite>
    </system.webServer>
</configuration>

このweb.configではAzure Web Appに対するHTTPレクエストが全てindex.htmlファイルに行くように設定しています。このindex.htmlはangularアプリの本体ということになります。

次に、このweb.configがビルド時に正しくコピーされるように設定します。

web.configがコピーされるようにangular-cli.jsonを変更する

angular-cli.jsonはAngular CLI（ngコマンド）を使用する際の様々な設定を指定するファイルです。
ここに静的なアセットとしてweb.configを加えることで、ビルド時にディストリビューションの一部になるように設定します。

下のスクリーンショットに従って変更を加えてください。

これでビルド後にweb.configがアプリのルートフォルダにコピーされるようになりました。

次に本番環境用ビルドscript（コマンド）を新規で加えます。

本番環境用のビルドscriptをpackage.jsonに加える

このステップは必須ではなく、すでに定義されているbuildというscriptを使っても全く問題はないですが、後でVSTSのビルド定義を設定するときにより分かりやすいように、すでに設定されていたコマンドとは別に新規で設定します。

以下のスクリーンショットを参考にして、npmのコマンドとして新たにbuild-prodというscriptを加えます。

-prodオプションを加えることで本番環境用のコードを生成するようにしています。

次に、新規で加えたbuild-prodscriptを実行して、生成されるコードを確認します。

本番環境用ビルドscriptをローカルで実行してアウトプットを確認する

上の手順で設定したbuild-prodコマンドを以下のように手動で実行します。

npm run build-prod

上のスクリーンショットでは、distという名前のフォルダーが作成されているのが確認できます。これが本番環境用ファイルを格納しているフォルダーです。このことは後でVSTSのビルド定義を設定する際、もう一度出てきますから覚えておいてください。

次に、いったん本番環境のことは脇に置いておいて、ローカルで開発する環境を確認しておきます。

HelloWorldアプリをローカルで開発・実行

Angular CLIで作成したangularアプリの開発は極めて簡単です。以下のコマンドを実行するだけです。

npm start

これでAngular CLIがビルドして、そのアウトプットをメモリ上に保存したのち、軽量なウェブサーバーを実行してHelloWorldアプリをホストしてくれます。この一連の作業をstartというscriptに対応している、Angular CLIのコマンドであるng serveが実行してくれます（package.json無いを"start"で検索してください）。

ここでブラウザからlocalhost:4200をリクエストするとHelloWorldアプリのページがロードされます。

では、開発サイクルを真似て、簡単な変更をくわえて見ます。

ng serveのおかげで、ファイルに変更があったのを感知して自動的にビルドしてくれます。

変更が反映されたのが確認できます。

これでangular2のHelloWorldアプリは完成しました。変更をGitHubレポジトリにPushしておきます。

git push

つぎに、HelloWorldアプリをホストするためのAzure App Serviceを作成します。

Angular2アプリのホストを準備する

AzureのApp Serviceを作成する

Azure App Serviceは既存のものを再利用しても構いません。なので、このステップはオプションです。私は個人ようのHotmailアドレスで作ったフリーのAzureサブスクリプションを使って、tw-angular01という名前でApp Serviceを作成しました。

この作業の詳細は割愛します。下のスクリーンショットはこの記事で使うApp Serviceです。App Service Planについては、Angularアプリはスタティックなアプリなので、無料のもの（非力なVMを他のユーザと共有するパターン）でも十分です。

これでデプロイのターゲットになるAzure App Serviceの準備が出来ました。

次にVisual Studio Team Services（VSTS）のビルド定義を設定する一連の作業に移ります。まずは、VSTSとGitHubの連携を設定するところから始めます。

Angular2アプリをホストにデプロイするためのビルド定義を準備する

VSTSにGitHubのためのService Endpointを設定する

この一連のステップには二つの前提条件があります。

すでにVSTS（以前はVisual Studio Onlineとも呼ばれていました）のアカウントがある。
すでに利用したいプロジェクトをVSTS内で作成済み。

VSTSは以前はVisual Studio Onlineとも呼ばれていました。まだない人はMicrosoftアカウント（例：hotmail、outlook.com）等のメールアドレスを使って新規でアカウント作成できます。
プロジェクトについては、既存のものでもデフォルトで設定されているものでも構いませんが、私はsamplesという名前のプロジェクトを作成しました。

VSTSのURL： https://www.visualstudio.com/vso/

VSTSプロジェクトが準備できたら、以下のスクリーンショットを参考にGitHub service connectionの新規作成画面まで進みます。

プロジェクト・レベルの設定アイコン（歯車アイコン）からServicesメニューアイテムを選び・・・

New Service EndpointドロップダウンメニューからGitHubを選択する。

そうすると下のようなダイアログが表示されます。

Authorizeボタンを押し、指示に従ってシングルサインオンで許可を与えます。
Connection nameはなんでもいいんですが、githubyoshiwatanabeにしました。これは後でまた使うので、分かりやすい名前を選びました。

これでVSTSとGitHubの連携に必要なService connection（Service endpoint)が作成されました。

次にVSTSのビルド定義を作成します。

新規のVSTSのビルド定義を作成する

VSTSのビルド定義の新規作成の詳細は割愛します。やり方は、トップレベルのBuild & Releaseメニューを選択したら分かります。私はsamples-angular-cli-CIという名前を付けました。

ビルド定義へのステップの追加は、下で詳しく解説するので、今は空の状態でもいいです。

下のスクリーンショットのように、ビルド定義リストで表示される状態なら完了です。

次に、下のスクリーンショットのように、順番に3つのビルドステップを含んだビルド定義を設定していきます。

まずはビルド定義に、どこからソースをダウンロードするかを指定します。

Build DefinitionのGet SourceステップをGitHub

ここでは、先に設定したVSTSとGitHubを連携させるためのService connectionを利用します。

以下のように、GitHubをソースのfromとして選択し、次にレポジトリとブランチを指定します。ブランチは、angular2-demoというブランチを指定していますが、masterなど別のブランチをつかっても構いません（もちろん、そのブランチにangular2アプリがあるとして、ですが）。

下は、対応するGitHubからみたレポジトリとブランチです。一応念のため、コンテンツを確認しておきます。

ここからは、３つのビルドステップをひとつずつ順番に設定していきます。まずはnpmパッケージをダウンロードするステップ。

1番目のnpm installステップを設定する

以下のスクリーンショットを参考に、npm installコマンドを実行するステップを設定します。気を付けるのはWorking folder with package.json（「package.jsonを含む作業フォルダ」）のフィールドに正しいパスを指定することです。

次にHelloWorldアプリをビルドするステップを加えます。

2番目のnpm customステップを設定する

Angularアプリはnpmのscriptを実行することでビルドします。CommandにCustomを選ぶことによって、任意のscriptを実行することができます。ここでは、先に設定したbuild-prodscriptを実行させることで本番環境用のアウトプットを生成させます。

下は、対応するpackage.json内のbuild-prodというscriptです。Angular CLIのコマンドng build -prodになっていることを確認します。

これで「ソースをGitHubからダウンロードする」→ 「npmパッケージをインストールする」→「HelloWorldアプリをビルドする」という作業ステップが設定されました。

最後は、ビルドされたHelloWorldアプリをAzureのApp Serviceにデプロイするだけです。

最後のステップ、Azure App Serviceへのデプロイを設定する

正しいAzureサブスクリプションを選択して、目的のApp Serviceを指定します。
ここでもっとも注意すべき点は、Package or Folderのフィールドに、helloworld/distと指定するところです。特に「dist」というフォルダを含んでいることを確認します。このフォルダはng build が実行された際に自動的に作成されるように設定されています。ローカルでng serveが実行された場合は生成されません（かわりにメモリ上にビルドされたファイルが保存されます）

これでビルド定義の作成が完了しました。次は実際にビルド定義をキューしてビルドエージェントに実行をさせるだけです。

ビルド定義をキューする

ビルド定義の画面からQueueボタンを選択します。

エージェントにはHostedを選びます。ブランチも、今まで設定に使ってきたangular2-demoを指定します。

下のスクリーンショットは、ビルドがキュー（順番を待っている状態）された様子です。

下は、ビルドが成功した様子です。

最後のステップ（Azure Web Appにデプロイする）まで成功しているので、この段階でAzure Web AppにHelloWorldアプリがデプロイされて、表示可能な状態になっているはずです。

Azure Web ServiceのURLを表示

実際にHelloWorldアプリを表示します。URLが分からない場合は、以下のようにAzure App ServiceのページからURLを取得できます。

ブラウザでURLのページをロードします。

うまく表示されました。GitHubレポジトリからのビルドとデプロイに成功しました。

これで設定は完了ですが、さらにGitHubのブランチに変更が加えられた（PushやPullリクエストによって）場合に、自動的にビルド→デプロイを行うContinuous Integrationの設定もやってましょう。

Continuous IntegrationオプションをONにする

ビルド定義に戻って、Triggersの設定からContinuous IntegrationをEnabledにします。

HelloWorldアプリのソースに、ちょっとだけ変更を加えます。以下ではページのメッセージに"with CI"という文字列を加えました。

最後に、Gitで、add、commit、そしてpushします。

この段階でビルド定義を見ると、自動的に新しいビルドがキューされているのが分かります。

ビルドが完了したころを見計らってページを再ロードしてみます。

pushした内容が反映されているのが分かります。この仕組みで、HelloWorldアプリの変更をGitHubのブランチへの変更だけで自動化しました。

実際のページ： http://tw-angular01.azurewebsites.net/

まとめ

長くなりましたが、こんな感じでAngular2のフロントエンドアプリをAzureでホストできます。他のもっとシンプルな方法もあるかもしれませんが、Continuous Integrationも含めて設定をすれば、デプロイまでの作業が完全に自動化できるので、設定する甲斐はあると思います。