読者です 読者をやめる 読者になる 読者になる

albatrosary's blog

Azure と Angular と Wercker CI とか

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

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

f:id:albatrosary:20141125135802p:plain

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 ブランチへビルド後のモジュールが登録されます

f:id:albatrosary:20141125140947p:plain

Windows Azureと連携

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

ダッシュボードの表示

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

f:id:albatrosary:20141125142415p:plain

WEBSITESの作成

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

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

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

f:id:albatrosary:20141125142014p:plain

WEBSITESの作成

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

f:id:albatrosary:20141125142036p:plain

ソースコード場所

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

f:id:albatrosary:20141125142046p:plain

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

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

f:id:albatrosary:20141125142053p:plain

サイトの作成

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

f:id:albatrosary:20141125142058p:plain

f:id:albatrosary:20141125142106p:plain

サイトの確認

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

f:id:albatrosary:20141125142110p:plain

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

f:id:albatrosary:20141125142114p:plain

サイトを更新する

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();
    };
  });

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

f:id:albatrosary:20141125145752p:plain

Azure への反映

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

$ grunt build

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

f:id:albatrosary:20141125150048p:plain

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

最後に

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