ガチリアルな修羅チーム開発

Japan Azure User Group

ふくあず（福岡支部）のみなさん

2

自己紹介小島　淳（こじま　あつし）元パンクロッカー現役柔道整復師

3

自己紹介濱本 一慶（はまもと かずのり）

熊本と広島のハイブリッド

アプリエンジニア

言語は VB6 、 VB.NET 、 C#ふくあずの二次元担当

お察しください…

4

自己紹介

• 福岡県北九州市在住• フリーランス

Web デザイナー / ディレクター• インフラ知識ゼロ…• 昨年 12 月に Azure デビュー

松本 典子（まつもと のりこ）

Web に関する業務全般やってます。（提案～ Web ページ制作～運用・マーケティング etc… ）

http://zuvuyalink.net/nrjlog/Blog

5

この子つくりました。

ふくあずロゴ

6

ふくあずのご紹介ふくあずの愛称で親しまれている JAZUG 福岡は福岡を中心に九州地区で月 1 回開催しております。アプリケーション・インフラエンジニアのみならずWeb クリエーターや経営者からも多くの参加があり、過去にはご当地アイドル QunQun とのコラボレーションも行い活発な活動をしています。

7

過去には Web Designing 誌とのコラボレーション企画も行ったり、福岡コミュニティの中心として活動しています。

8

さて、福岡といえば？

9

めんたいこ

10

にわか仮面

11

めんべえ

12

いやいや、今日は違います

13

14

そう。

ここは修羅の国。

毎日が修羅なのです。

（本当は至って平和な毎日ですが）

15

ということで本日のセッションは、

ガチリアルな修羅チーム開発

ということでチーム開発を

楽しくお伝えします。

16

本セッションで出てくるキーワード

Web AppsVisual Studio OnlineDevOps （時間があれば・・・）

17

Web Apps のおさらい

18

Azure App Service 概要

Azure App Service は、任意のプラットフォームおよびデバイス向けに迅速かつ容易に Web アプリやモバイル アプリを構築するのに必要なすべてを統合する唯一のクラウド サービスです。

Web アプリ（ Web Apps ）

モバイル アプリ（ Mobile Apps ）

API アプリ（ API Apps ）

ロジック アプリ（ Logic Apps ）

19

Web Apps

Web アプリケーションを簡単にデプロイし、公開出来るサービス。

.NET 、 Java 、 PHP 、 Node.js 、 Python組み込みの自動スケールと負荷分散高可用性と修正プログラムの自動適用Git 、 TFS 、 GitHub 、 Visual Studio Online を使用し

た継続的なデプロイWordPress などの OSS も利用可能

20

Visual Studio Online

21

Visual Studio Online とは

Visual Studio Online （以下、 VSO ）は開発と ALM 基盤のクラウドサービスです。

従来の Team Foundation Server がもつALM 機能だけでなく、オンラインでコーディング可能な IDE やリリース後のアプリケーション解析なども行える便利なサービスです。

22

Visual Studio Online の勘違い

VS ≠ VSO単純な VS のオンライン版ではなく、むしろ TFSのオンライン版と表現したほうが良い。チーム開発で必要な機能をほぼ網羅しています。タスク管理自動テストGit 、 TFS連携リリース管理オンラインコーディング

23

料金体系

ライセンス体系Basic ・・・・・・ $20Professional ・・・ $45Advanced ・・・・ $60それぞれ 5 つの無料ユーザーライセンスが含まれます。

24

無料アカウント

5 つの 無料の Basic ユーザー ライセンス無制限のステークホルダー無制限の有効な MSDN サブスクライバー無制限のチーム プロジェクトとプライベートな

コード リポジトリ すべてのユーザーを対象とする 無料の作業項目

の追跡無料の 60 分 / 月のビルド無料の 20K/ 月のロード テスト アプリケーション監視と分析の プレビュー

25

機能紹介タスク管理アジャイル開発必要なバックログ管理を提供しています。カンバン方式を使ってビジュアル面を強化指定ます。

26

機能紹介自動テストテストマネージャーとの連携により自動テストが可能。効率的な CI/CD を実現しています。

27

機能紹介オンラインコーディングVisual Studio Online “Monaco” は、 Web ブラウザーから利用可能な IDE （統合開発環境）です。しかし、実際には IDE としての高度機能はなく、デバッグ機能などは貧弱です。直接ソースを修正したいときに使うエディタのような感覚で使うと良いかも。

28

機能紹介Git連携VSO は Git リポジトリを備えているので、Git によるソース管理が可能です。

しかし、色々と罠があるので後ほど説明します。

29

修羅なデモ開始！

30

登場人物

デモに登場する人物紹介

今回のクライアント。ビジネスからお金を得ることが最大の楽しみ。

K氏

受託したプログラマー。ライブライブをこよなく愛する 2 次元デスマーチャー。

H氏

デザイナー。普段はウェーイ！なサービスをドヤ顔でディレクションしている。

M氏

31

お金が大好きという K氏より H氏へ新サービス用のランディングページ制作の依頼が入った。

Hちゃーん、おげんき？これサクッと作っちゃってよ。クラウドで！！！

お、おう。。。やりまする。。。

32

デモ 1VSO周りの環境構築をしますVSO を Git リポジトリ付きで作成するVSOへソースをコミットするWeb Apps を作成するWeb Apps 機能拡張で VSO をインス

トールVSO Monaco で Git リポジトリを作成す

る

33

どうして Monaco を使用するの？

34

多くのデザイナーさんは Git を使わないアップロードは基本的に FTP！

35

Monaco

FTP

36

程なくして依頼されたサイトが出来上がったが・・・・

一応。。。出来たのですが。。。

な、なんやこりゃ！！！われ！舐めとんかい！！

37

ひ、ひぃぃぃ！！すぐに！すぐに！！！

もっとドパーンとバカーンとシャキーンとしたやつくれや！！

M しゃん！お助けを！お助けを！！

38

デモ 2Web デザイナーでも使える AzureFTP でソースを Web Apps にアプロード管理者側で Git コミットする

39

Web デザイナー視点での Azure 解説

40

サイトの自動バックアップ

41

サイトの復元

42

ステージングとスワップ• テスト環境と本番環境をワンクリックで入れ替えできる！

43

スケールアウト

44

動画配信• Azure Media Services で YouTube のよ

うな制御できる動画が配信できる• 動画配信サーバを用意する必要がない• 動画を配信できる状態にエンコードする

必要もなし• ライブストリーミング配信や

コンテンツ保護もできる

45

修羅なデモに戻ります

46

出来上がったサイト

47

仕上がったサイトの比較

48

さすがイケイケでウェーイなデザイナー。とっても素敵なサイトが出来上がりました。

出来ました♪億万長者間違いない！

いいね〜。でも、ここちょろっと修正してね♪

49

デモ 2VSO によるライブコーディングMonaco を使ってソース修正

50

クライアントの K氏は大喜び！ Azure なんて素晴らしいんだ！これでチャリンチャリンビジネスがうまくいくか、おっと誰か来たようだ・・・

あ、これうちのサーバーに移しておいてね！

なんだ、と！？

51

52

VSO はチーム開発のハブ

まとめ

VSO と monaco は違う

億万長者には気をつけよう

Azure はデザイナーさんを楽にする

53

ご静聴ありがとうございました。

54

番外編時間があれば DevOps

55

PowerShell DSC とは

PowerShell DSC は、 WMF4.0 から新たに導入されたサーバー構成管理ツールです。

PowerShell4.0 がインストールされているWindows Server 2012 R2 と Windows8.1からは標準で使えます。

Chef や Puppet と同じくサーバー構成をコード化し、冪等性を持ちます。

56

PowerShell DSC の構成

DSC Server

Node

Node

Push

DSC サーバーが各ノードに対して問い合わせてノードを構築していく。

Pull

ノードが DSC サーバーに対して「あるべき構成」が変化してないかどうかを定期的に確認する。

57

Resource code WindowsFeature IIS { Ensure = "Present" Name = "Web-Server" }

WindowsFeature IISMgmt { Ensure = "Present" Name = " Web-Mgmt-Tools" }

WindowsFeature ASP { Ensure = "Present" Name = "Web-Asp-Net45" }

IIS 機能追加

IIS管理機能追加

.NET4.5追加

58

オーケストレーション

仮想マシン

StorageBlob

SQLDatabase

ManagedCache

PowerShell

DSC

Azure ResourceManager

Azure Automatio

n