DevOps, Microserviceなどキーワードが色々話題はあるが、エンジニアとしてはCloudやCI、アプリケーションフレームワークをうまく利用していくことが重要だ。今回はCloudは、AzureのWEB + モバイルを利用し、CIとしてはWercker CI、アプリケーションフレームワークとしてはAngular v2を利用し、開発プロセスからデプロイ/リリースまでの流れを作ってみる。

f:id:albatrosary:20161031001607p:plain

Azure

Azureには40以上のサービスがあり、サービスはいくつかの種類に分けることができる。

Compute
ネットワーキング
ストレージ
Web + モバイル
Databases
Intelligence + analytics
モノのインターネット
Enterprise Integration
セキュリティ + ID
Developer tools
Monitoring + management
アドオン
コンテナー

Webアプリケーション開発者にとって興味を引くのは「Web + モバイル」サービスであるが、その内容は

Web Apps
Mobile Apps
Logic Apps
Media Services
ブログ + CMS
スターター Web Apps
Web アプリケーションフレームワーク
E コマース
アドオン

から成る。今回はこの中から「スターター Web Apps」を利用するが「スターター Web Apps」にもいくつかあり、その中から「Node JS Starter Site」を利用する。

Node JS Starter Site

「Node JS Starter Site」の特徴は次の通り(portal.azure.comより)：

Get started with this ready-to-use website template with Node.js. It shows examples of routing, middleware, and custom errors. This template is built on express, a flexible framework for building web applications.

このリソースで構成されるものは

Microsoft Windows [Version 6.2.9200] + IIS
Node 0.10.28

IISとNode連携にはiisnodeが使われている。

Operating system	Version number
Windows 10	10.0
Windows Server 2016	10.0
Windows 8.1	6.3
Windows Server 2012 R2	6.3
Windows 8	6.2
Windows Server 2012	6.2
Windows 7	6.1
Windows Server 2008 R2	6.1
Windows Server 2008	6.0
Windows Vista	6.0
Windows Server 2003 R2	5.2
Windows Server 2003	5.2
Windows XP 64-Bit Edition	5.2
Windows XP	5.1
Windows 2000	5.0

Azureへのデプロイ

Azureにデプロイには

OneDrive
ローカル git リポジトリ
github
gitbucket
Dropbox
ftp

などあるが今回はftpを用いる。githubに登録したモジュールを直接デプロイするのが好ましいが、そうすると問題がふたつあり

CIでユニットテスト、ビルド後のモジュールをデプロイしたい
ビルド後の実行ファイルのみデプロイ対象としたい

ということがあり今回はftpデプロイとした。

Wercker CI

最近好んで利用しているCIはCircle CIかWercker CIを利用している。Wercker CIはWorkflowsが定義できる。今回込み入ったWorkflowsは定義していない。angular-cliで作ったAngular2サンプルコードをデプロイするタスク定義は次のようなもの。ここでnpm-installはnpm i、npm-testはnpm testを実行するがnpm-xxxxは単純にpackage.jsonのscriptsをマッピングした構成では無く、npm-install、npm-testを定義した場合にはそれぞれのコマンドを実行するよう定義されていて例えばnpm-buildと書いてもscriptsに定義されたbuildを実行することはできない。

wercker.yml

box: node
build:
  steps:
    - npm-install
    - npm-test
    - script:
        name: echo nodejs information
        code: |
          echo "node version $(node -v) running"
          echo "npm version $(npm -v) running"
deploy:
  steps:
    - script:
        name: install angular-cli
        code: |
          npm install -g angular-cli
    - script:
        name: ng build
        code: |
          ng build
    - install-packages:
        packages: lftp
    - script:
        name: azure ftp deploy
        code: |
          lftp -u ${FTP_USERNAME},${FTP_PASSWORD} -e "mirror -Rev dist/. /site/wwwroot/." ${FTP_SERVER_URL}

※ ${…}はWercker CIに定義するパラメータ

Azureにftpデプロイする場合にはlftpを事前にインストールし実行する。またデプロイでnpm run buildをscript実行する場合には注意が必要で上記のようなスクリプトの場合は実行できない。node_modules/.bin/へのリンクが壊れるためで実際に

wercker上:

-rwxr-xr-x. 1 0 Oct 27 00:54 node_modules/.bin/ng

通常:

lrwxr-xr-x  1  21 10 26 19:15 node_modules/.bin/ng -> ../angular-cli/bin/ng

となっていてリンクが壊れている。

Angular2

Angular2は現在2.1.1がリリースされている。AoT、Angular2 UniversalなどAngular2をうまく使うためにはangular-cliを利用するのが良い。使い方は簡単だ。

$ npm install angular-cli -g
$ ng new AzureCIExample
$ cd AzureCIExample
$ ng serve

これで必要なモジュール構成ができアプリケーション開発ができる。githubにリポジトリを作成しWercker CI用のビルドタスクを定義する（ビルドタスクの定義は上記yml）。Wercker CIにはアカウントを作成しgithubリポジトリをビルドするよう簡単な設定をすれば、githubにコードをpushすれば自動的にビルドタスクが実行される。

次に、Azureでftpビルドしたモジュールを受け入れるように設定を行う。例えば次のようにする。

f:id:albatrosary:20161031000752p:plain

f:id:albatrosary:20161031000807p:plain

これですべての設定は終了で、Angular2をangular-cliで開発しgithubへ完成されたコード（もちろんテストコード付き）をpushするとWercker CIでユニットテストが実行されビルドし成功すればAzureへデプロイされる。

最後に

数年前に比べデプロイ環境を作るのは優しくなった。技術的なところもそうだが金銭面でも敷居が低くなった。例えばAzureにはBizSparkがありスタートアップには優しいサービスが提供されている。Wercker CIやCircle CIも優れたサービスをほとんど費用を払わずに利用でき、Githubも同様で小さい企業にとっては非常に助かるのだが、Azureで利用しているサービスが若干バージョンが古いのが気になる。どうせなら最新のものにして欲しいところ。

f:id:albatrosary:20161031001822p:plain

albatrosary's blog

UI/UXとエンタープライズシステム

Azure, Wercker CI and Angular2

Azure

Node JS Starter Site

Azureへのデプロイ

Wercker CI

Angular2

最後に