Windows Azure と YEOMAN で簡単Webサイト構築

Windows Azureの「WEBSITES」を利用して簡単なサイトを作ってみました。自分としてはやはりYEOMANは外せませんので手順としては次の通り：

1. YEOMANジェネレータでサイト作成
2. githubへ登録
3. Windows Azureと連携

YEOMAN で Azure Website構築

YEOMANジェネレータでサイト作成

いつものようにYEOMANジェネレータを使ってサイトを作ります。デモですのでジェネレータのまま利用します。

$ mkdir azure && cd $_
$ yo angular-fullstack
$ grunt serve

これでいつも見慣れた画面が出てきます：

YEOMANジェネレータを使って作ったページをgithubのリポジトリへpushします。githubの指示に従い：

$ touch README.md
$ git init
$ git add *
$ git commit -m "first commit"
$ git remote add origin https://github.com/albatrosary/azure.git
$ git push -u origin master

githubへ登録

master に push しましたが ビルドも何もしていませんので出来ればビルド後のモジュールをazureには登録したいので「github pages」のgruntを利用してみます。これは master とは別に gh-pages というブランチを作成します。github pageを作るものですが、今回はこのブランチと azure を連携させます。

※ 今回は手っ取り早くビルド後のディレクトリをmasterとは別のブランチへ登録したかったので「grunt-gh-pages」を利用しました。

$ npm install grunt-gh-pages --save-dev

Gruntfile.js も少し編集します。まずは grunt-gh-pages の定義ファイルです。generator-angular-fullstackではビルド後のファイルがdistディレクトリに配置されますので：

    'gh-pages': {
      options: {
        base: 'dist/public',
        repo: 'https://github.com/albatrosary/azure.git'
      },
      src: ['**']
    },

続いてタスクの登録ですが、今回はビルドの最後で gh-pages ブランチへの登録をさせたいので次のようにしました：

  grunt.registerTask('build', [
    'clean:dist',
    'injector:sass', 
    'concurrent:dist',
    'injector',
    'wiredep',
    'useminPrepare',
    'autoprefixer',
    'ngtemplates',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'rev',
    'usemin',
    'gh-pages'
  ]);

これで

$ grunt build

とやれば gh-pages ブランチへビルド後のモジュールが登録されます

Windows Azureと連携

Windows Azureは github からリソースを取得し「Web サイトの作成」が行えます。github の準備は整ってますので Azure で Website を構築するだけです。

ダッシュボードの表示

まずはダッシュボードを表示します。ここから WEBSITES を選択します。

WEBSITESの作成

WEBSITESの作成をクリックするとどうやってSITEを作成するか問い合わせがあります。

• 簡易作成
• カスタム作成
• ギャラリーから

今回はgithubとの連携をしますので「カスタム作成」を選択します：

WEBSITESの作成

WEBSITES の作成では、URLやサーバの場所などを聞いてきますので下記画面のように登録します。そして今回はgithubと連携しますので「ソース管理から発行」のチェックを必ずしてください：

ソースコード場所

ソースコードがどこにあるのか問い合わせありますので github を選びます。githubを選ぶとazureとgithubユーザの連携など聞いてきます。

対象リポジトリ/ブランチの選択

その後、githubユーザのリポジトリ一覧が表示されターゲットとなるリポジトリとブランチを選択します。今回は

• リポジトリ: azure
• ブランチ: gh-pages

サイトの作成

あとは完了の丸チェックをクリックすれば終わりです。

サイトの確認

完了後、「すぐに」URLをクリックすると

が表示されますが、ほんの少し待つと作ったサイトが表示されます（作ったページが表示されない！と慌てないでね）。

サイトを更新する

routeの追加

やはりせっかくのangular-fullstackですのでページを一つ追加してみます：

$ yo angular-fullstack:route sample
? Where would you like to create this route? client/app/
? What will the url of your route be? /sample
   create client/app/sample/sample.js
   create client/app/sample/sample.controller.js
   create client/app/sample/sample.controller.spec.js
   create client/app/sample/sample.html
   create client/app/sample/sample.scss
$

navbar.controllerを使ってメニューを書き換えます。

'use strict';

angular.module('azureApp')
  .controller('NavbarCtrl', function ($scope, $location) {
    $scope.menu = [{
      'title': 'Home',
      'link': '/'
    },{
      'title': 'Sample',
      'link': '/sample'
    }];

    $scope.isCollapsed = true;

    $scope.isActive = function(route) {
      return route === $location.path();
    };
  });

これでメニューが追加されページ切り替えも行えます

Azure への反映

Azureへの反映はビルドすれば完了です。gruntタスクにgh-pagesブランチへの登録が定義されていて、Azureがgh-pagesブランチを監視しているため即時反映されます。

$ grunt build

このコマンドを発行した結果はいい感じでこちらです：

※ちなみに Azureで下部にリストが表示されていないのはプロビジョニング対象外にしているからです

最後に

思ったよりも簡単に作成できます。少しハマったことは、一度作ったサイトを削除し同じ名前で作り直すとプロビジョニングエラーとなることです（具体的には「albass.azurewebsites.net」というサイトを作り削除して再び「albass.azurewebsites.net」をつくろうとするとプロビジョニングエラーとなります）。よくわからず30分ほどジタバタしました。