継続的デリバリーハンズオン手順書

【 この記事は、15203人に読まれています】

ここに記載する「継続的デリバリーハンズオン手順」は、エバンジェリスト長沢が、イベントでハンズオンありの講演を実施した際に、皆様の PC から長沢のデモ環境に直接 wifi などでアクセスしていただき、実施する際の手順を記しています。

とはいえ、その流れを把握していただくには十分な情報だと思いますので、ブログ記事として投稿しておきます。

 

事前準備


まず、デモ環境にアクセスしていただくという性質上、お膳立てをしていただきます。当たり前ですが、実務環境でアトラシアン製品を使うときにこれらを行わなければならないというわけではありません。

 

ユーザーIDを確認


ハンズオンでは、一人一人に異なるユーザーIDを割り当て、それぞれがいちチームメンバーとして企画から開発、ビルド、デプロイに関係していただきます。

当日にユーザーID (パスワードは、ユーザーID と同じです)をお知らせします。

 

名前解決


アトラシアン製品は、基本的に、HTTP でお話しできます(ブラウザからアクセスできます)ので、デモマシンへのアクセスのための名前解決をしていただくことを強く推奨します。以下を参考に名前解決してください。





手順

Windows

Mac OS X / Linux

  • hosts ファイルの場所に移動
  • C:\Windows\System32\drivers\etc に移動します。
  • image
  • ターミナルを起動し、cd /etc します。
  • Screen Shot 2014-08-08 at 10.25.22
  • hosts ファイルを開く
  • メモ帳を「管理者として実行」し、起動します。
  • 開いたメモ帳に hosts ファイルをドラッグ&ドロップします。
  • sudo vi hosts を実行します
  • 一行追記
    デモ環境に接続するための情報を一行追記します
    (内容は実施内容に依存しますので、当日にお知らせします)
  • 概ね、以下のような内容を追記します。
    192.168.11.4         tnagasawa-win
  • ファイルを保存します。
  • 概ね、以下のような内容を追記します。
    192.168.11.4       tnagasawa-win
  • ファイルを保存します。
    vi だと、[esc] > wq [enter]
  • 名前解決できているか確認
  • コマンドプロンプトを起動します。
  • 以下のコマンドを実行します。
    ping tnagasawa-win -4
  • 上記で開いているターミナルで以下のコマンドを実行します。
    ping tnagasawa-win
  • 各アトラシアン製品に Web ブラウザからアクセス

 

SourceTree での Stash 接続の設定


ハンズオンでは、唯一皆さんの PC 実機環境で実施いただくソースコードの変更に伴う Git 操作を SourceTree を使って行っていただきます。Git のリポジトリの管理は、Atlassian Stash で行われます。プルリクエストによるコードレビューも同様に Atlassian Stash です。

事前に SourceTree のインストール(と、Bitbucket や GitHub への接続)をお願いしてありますが、まだの場合は、以下より、SoureceTree をダウンロードし、インストールしてください。





SourceTree Windows 版

SourceTree Mac OS X 版

SourceTree を起動したら [ファイル] > [セットアップウィザード…] をクリックします。Screen Shot 2014-08-08 at 10.54.44
  • SourceTree を起したら、「ブックマーク」で Screen Shot 2014-08-08 at 11.12.20 をクリックします。
  • 「ホスティングリポジトリ」にて、[アカウントを編集]ボタンをクリックします。

    Screen Shot 2014-08-08 at 11.13.57
 
Mercurial がないと言われたら今回は利用しないので、断腸の思いで、「使いたくない」を選択してください。image Stash についての情報を入力します。Screen Shot 2014-08-08 at 11.15.12
  • ホスティングサービス: 「スタッシュ」
    # うううオーバーローカライズされてる… git stash の訳とまざってる
  • ホスト URL: http://tnagasawa-win:7990
  • ユーザー名: (当日割り当てられたユーザーID)
  • パスワード: (同上)
  • ライセンスうんぬんなどは、[次へ] ボタンで進んでください。
  • SSHクライアントでは、既定の「PuTTY/Plink」としてください。
サービスとして Stash に必要事項を入力します。image
  • ホスト URL: http://tnagasawa-win:7990
  • ユーザー名: (当日割り当てられたユーザーID)
  • パスワード: (同上)

 

ハンズオン – 企画から要件化


企画書のたぐいは、自然言語や制約の少ないフリー書式(グラフや絵、写真なども含む)で表現されることが多いです。目的、仮説、戦略、戦術、想定ユーザーなど多岐にわたる情報を記載、捻出、醸成するからですね。そこで役に立つのが Confluence です。

 

Confluence での企画と要件化







手順

参考画面

  • http://tnagasawa-win:8090 にアクセスします。
    ログインでは、当日割り当てられたユーザーIDで行ってください(以下、どのシステムにアクセスする際も同様です)。

Screen Shot 2014-08-08 at 11.28.17

Screen Shot 2014-08-08 at 11.30.55
  • 一通り、使い方の説明を聴いてください。

Screen Shot 2014-08-08 at 11.33.21

  • ページをスクロールすると、「バックログとアクションアイテム」に自分の割り当てられたユーザー名(戦闘員 xx) が関連している項目を見つけることができます。

Screen Shot 2014-08-08 at 11.35.18

Screen Shot 2014-08-08 at 11.35.50

  • 指示に従って、「バックログ項目XX番目」をマウスでハイライトしてください。
  • JIRA のアイコンがホバーしてきますので、クリックします。

image

  • (ガイダンスは一回だけ表示されます)[表示する]ボタンをクリックします。
  • プロジェクトは、[ReWorkstyle] を選択します。
  • 種類は、[バグ] ではなく、[ストーリー] に選択しなおしてください (まぁハンズオンなので、バグのままでもいいですが)
  • この選択自体は1回実施すれば Confluence が覚えておいてくれますので、2回目以降は、どんどん作成できます。
  • [作成] ボタンをクリックするとハイライトした項目が、JIRA にストーリーとして登録され、ユニークな ID が割り振られます。

Screen Shot 2014-08-08 at 11.40.44

Screen Shot 2014-08-08 at 11.42.57

  • 画面をスクロールさせ、自分が要件化した項目にユニークな ID がタグつけされているか確認します。

Screen Shot 2014-08-08 at 11.44.12

  • (おまけです) となりの列にあるチェックボックスにチェックを入れます。
    Confluence のタスクリスト機能を使うと文書ないに積み残しや認識不足が起こる事態を防ぐことができます。タスクに人をメンションしていき、期日も指定することで、文書横ぐしでタスクを把握できます。

Screen Shot 2014-08-08 at 11.47.13

Screen Shot 2014-08-08 at 11.47.55

  • (任意) タグをクリックすると瞬時に JIRA に切り替わります。デザインが統一されているので、製品システムの移行を意識することはほとんどありません。
    JIRA で管理しているストーリーからも Confluence で管理している文書へのリンクが自動でされているところもご確認ください。

Screen Shot 2014-08-08 at 11.50.42


http://tnagasawa-win:8090 にアクセスします。ログインでは、当日割り当てられたユーザーIDで行ってください(以下、どのシステムにアクセスする際も同様です)。

 

ハンズオン – JIRA での Kanban と作業の宣言


さて、ここからは、JIRA でのプロジェクト計画や作業の実施方法に入ります。今回のハンズオンでは、スクラムではなく、Kanban を使います。スクラムでももちろん行えます。JIRA Agile では、スクラムか Kanban (または、そのどちらも使う)を選ぶことができます。

 

JIRA での Kanban へのアクセス







手順

参考画面

  • JIRA にアクセスします。
    ナビゲーターで 「My JIRA」をクリックするとか、先の ストーリからたどるとかやり方は問いません。
    JIRA: http://tnagasawa-win:8080

Screen Shot 2014-08-08 at 11.58.32

  • メニューで、[Agile] をクリックします。
  • 目的の Kanban ボード (ReWorkstyle Kanban) が表示されていない場合は、「ボードをすべて表示」をクリックします。
  • 一覧から 「ReWorkstyle Kanban」クリックします。
  • 以降は、メニューに目的の Kanban が表示されるようになります。

Screen Shot 2014-08-08 at 12.00.13

Screen Shot 2014-08-08 at 12.03.01

  • Kanban の「準備完了」の列に、Confluence から作成したストーリーがあることを確認します。
  • ID をクリックすると詳細ペインが、右側に表示されます。

Screen Shot 2014-08-08 at 12.04.16

Screen Shot 2014-08-08 at 12.05.32


 

JIRA Kanban での作業宣言







手順

参考画面

  • 作業する項目 (今回は自分が登録したストーリーで行いましょう)を「準備完了」から「開発中」にドラッグ&ドロップします。
    これで、この作業を自分が行うと宣言したことになります。カードに自分のアイコンが表示されていることを確認します。

image

Screen Shot 2014-08-08 at 12.11.11

  • (任意) Confluence の企画文書を見てみましょう。タグのステータスが「オープン」から「進行中」になっているのが確認できるはずです。
    企画文書に動的に開発チームの状況を伝達できていることがわかります。

Screen Shot 2014-08-08 at 12.14.15

  • ID (課題キー; REW-xxx) をクリックすると右ペインに詳細が表示されます。

Screen Shot 2014-08-08 at 12.12.19

  • 詳細ペインにて「開発」までスクロールし、「ブランチを作成」をクリックします。
    Screen Shot 2014-08-08 at 12.16.05 をクリックすると「開発」まで自動スクロールしてくれます。

Screen Shot 2014-08-08 at 12.17.24

  • ブランチの作成画面になります (Stash に切り替わっています)

Screen Shot 2014-08-08 at 12.19.01

  • (1回目のみ実施の操作です) 以下を選択します。
    • リポジトリ: ReWorkstyle Repo
    • 分岐元: master
  • (毎回実施する操作です) 以下を選択します。
    • ブランチタイプ: フィーチャー
    • ブランチ名: (任意) 既定のままでも構いません。
    • [ブランチの作成」ボタンをクリックします。

Screen Shot 2014-08-08 at 12.22.20

  • 目的のブランチの画面が表示されます。

Screen Shot 2014-08-08 at 12.23.58

  • JIRA に戻り、「開発」に作成したブランチの情報を自動レポートされていることを確認します。

Screen Shot 2014-08-08 at 12.25.33


 

ハンズオン – Stash と SourceTree でのコード取得


コードの取得は、SourceTree が便利です。特に、Atlassian Stash では、SourceTree クライアントアプリを起動したりする操作をブラウザ上から行うことができます。

手順

参考画面

  • Stash 上で 「クローン」を実施します。
    ※サイドバーを展開するとわかりやすいです。
    Screen Shot 2014-08-08 at 12.34.17
  • [ソースツリーにクローンする] ボタンをクリックすると SourceTree クライアントを起動し、クローンできます。

Screen Shot 2014-08-08 at 12.35.25

  • 認証を求められたらユーザーIDの確認とパスワードの入力を行ってください。

Screen Shot 2014-08-08 at 12.36.46

  • 「新たにクローン」タブに切り替えます。
  • チェックアウトするブランチに先ほど作成したブランチに変更します(masterのままにしないように!)
  • 保存先のパスには、各自のPCであとで削除しやすいパスに指定してください。
  • ブックマーク名は、任意です。

Screen Shot 2014-08-08 at 12.39.11

  • SourceTree に情報が表示されます。

Screen Shot 2014-08-08 at 12.41.00

  • SourceTree の確認と設定を行います (初回のみ)。
  • 右上の「設定」をクリックします。
    • リモートリポジトリのパスを確認しクリックします。
    • [編集] をクリックし、Stash の情報が正しく設定されているか再確認します。
  • [詳細] タブに切り替えます。
  • 「コミットメッセージ中のリンク」の [追加] ボタンをクリックし、JIRA の情報を入力します。
  • これで、コミットメッセージ中の「REW-xxx」が JIRA の該当課題へのハイパーリンクとなります。

Screen Shot 2014-08-08 at 12.43.16

Screen Shot 2014-08-08 at 12.44.16

Screen Shot 2014-08-08 at 12.45.18

Screen Shot 2014-08-08 at 12.48.41

  • コードの編集は任意のツール(メモ帳、vi, vim, Visual Studio, Eclipse など)で行えば、SourceTree が変更を検知してくれます。
  • コードの場所へは Windows 版ではブックマークを右クリックし「エクスプローラで表示」(うう、エクスプローラーになってない。。。)で開くことができます。

Screen Shot 2014-08-08 at 12.51.13


 

ハンズオン – コード変更


今回は、Web サイトの CSS を変更してもらいます。当日に編集箇所は指示させていただきますが、基本的には以下を行っていただきます。

コードのパス内の以下のディレクトリ(フォルダ)にあるファイルを編集していただきます。

ReWorkstyle\ReWorkstyle.Web\Content (ReWorkstyle/ReWorkstyle.Web/Content)

ここに、<ユーザーID>.css ファイルがありますので、ご自身のユーザーIDを再確認のうえ、該当ファイルを任意のテキストエディタで編集してください。

編集箇所ですが、基本的には、以下の「色」を変えてください。

background-color: black;
color: honeydew;


色には、#RRGGBB 形式でも指定できます。ご自身の好きな色にしてください。background-color を変えればタイルの色が変わり、color を変えれば文字の色が変わります。

変更後は、保存します。

 

ハンズオン – SourceTree でのコミットとプッシュ


コードを変更して、SourceTree に戻ってくると、変更箇所を検知してくれます。

手順

参考画面

  • SourceTree に戻ってくると変更を検知してくれます。

Screen Shot 2014-08-08 at 15.55.59

Screen Shot 2014-08-08 at 15.57.24

  • 変更を index にステージングします。

Screen Shot 2014-08-08 at 15.58.33

  • コミットします。
  • コミットメッセージに、以下を入力します。
    • JIRA のストーリーの ID (課題キー): REW-xx
    • その他は、任意のコメント
  • 「コミット後次にプッシュ 」[origin] チェックボックスを on にします。
    • 「プルリクエストを作成」チェックボックスを on にすると、コミット、プッシュ後に、Stash のプルリクエストの画面を表示してくれます(今回は任意)。

Screen Shot 2014-08-08 at 15.59.12

Screen Shot 2014-08-08 at 16.00.03

Screen Shot 2014-08-08 at 16.01.47

  • SourceTree を閉じます(開発を終えたのでもう使いません)
  • JIRA の画面に戻り、ストーリーの状態を確認します。
    • 「開発」にコミットの情報が追加レポートされているのが確認できます。
      クリックすれば、詳細や差分などを確認できます (任意)。

Screen Shot 2014-08-08 at 16.05.15


 

ハンズオン – JIRA からのコードレビューの依頼 (プルリクエスト)


SourceTree から直接 Stash のプルリクエスト画面を表示させることができますが、開発の流れと状況を確認する意味では正しい情報が蓄積されている  JIRA に戻ってくる習慣をつけるのも大切です。今回は、そんな方法で、コードレビューの依頼を出してみます。

 

手順

参考画面

  • JIRA で該当ストーリーの「1個のブランチ」をクリックします。

Screen Shot 2014-08-08 at 16.05.15

  • 「プルリクエストを作成」をクリックします。Stash に遷移します。

Screen Shot 2014-08-08 at 16.12.14

Screen Shot 2014-08-08 at 16.12.44

  • プルリクエストの画面を確認します。
  • (任意) 必要に応じて、変更のコミットログや、差分を確認することができます。

Screen Shot 2014-08-08 at 16.13.46

  • レビュアーに、「tnagasawa」を指定します。
    そのほかのメンバーも複数指定してもかまいません (任意)。

Screen Shot 2014-08-08 at 16.16.46

  • 「作成する」ボタンをクリックします。
  • JIRA で確認する
  • 「1件のプルリクエスト 」が追加レポートされています。また、ステータスが、[オープン] であることもわかります。
  • クリックすると、レビュアーの情報などみてとれます。

Screen Shot 2014-08-08 at 16.38.42

Screen Shot 2014-08-08 at 16.40.05


お疲れ様でした。皆さんにやっていただく作業はこれでおしまいです。

あとは、みなさんの成果がデリバリーするところをスクリーンで確認しましょう。

 

ハンズオン – Stash でのレコードレビュー


コードレビューは、Stash で通知されています。JIRA で各ストーリーからレビュー画面へ行くこともできます。

手順

参考画面

  • Stash に移動します(レビュアーとして)。
    http://tnagasawa-win:7990
  • レビューのキューに通知があることを確認します。

Screen Shot 2014-08-08 at 16.42.54

Screen Shot 2014-08-08 at 16.43.40

  • レビュー対象を確認します。
    • JIRA の ID (課題キー)
    • 依頼者からのコメント
    • コミット内容
    • 差分

Screen Shot 2014-08-08 at 16.44.40

Screen Shot 2014-08-08 at 16.45.05

Screen Shot 2014-08-08 at 16.45.47

Screen Shot 2014-08-08 at 16.46.24

  • コードのレビューとレビュー結果をコードコメントとして記載します。
    • コード行でコメントを記載できます。
      ここでオンライン ディスカッションをすることができます。
    • 全体コメントももちろん行えます。

Screen Shot 2014-08-08 at 16.47.17

Screen Shot 2014-08-08 at 16.48.33

Screen Shot 2014-08-08 at 16.49.15

Screen Shot 2014-08-08 at 16.50.15

Screen Shot 2014-08-08 at 16.51.02

  • [承認] ボタンでします。
    複数人のレビュアーがいる場合は、ここでお終いです。他のレビュアーさんのレビュー結果を待ちましょう。

Screen Shot 2014-08-08 at 16.51.35

Screen Shot 2014-08-08 at 16.52.40

  • レビュー承認が終えたら、[マージ] ボタンをクリックしてマージします。問題がある場合は、[拒否] ボタンで却下することもできます。

Screen Shot 2014-08-08 at 16.53.59

  • JIRA でストーリーのレビュー状況を確認します。

Screen Shot 2014-08-08 at 16.55.24


 

ハンズオン (自動実行) – Bamboo による継続的インテグレーション


コードレビューで承認され、マージ作業が終えると、Bamboo が Git (Stash) の変更を検知して、自動ビルドを実行します。ここでは、ビルドとテストを MSBuild で実行しています。

継続的インテグレーションの結果は、JIRA から見ることができます。

Screen Shot 2014-08-08 at 16.58.04

したがって、コード変更した人もそうでない人(レビュアーやマネージャ、他の開発者)もストーリーやバグ修正単位で、ビルドの健康状態を理解することができます。

「1件のビルド」をクリックすることで、詳細を見ることもできます。

Screen Shot 2014-08-08 at 16.59.39

さて、今回のハンズオン環境では、継続的インテグレーションで「成功」した場合は、自動デプロイメントも行うようにしてありました。その結果も、JIRA に自動レポートされてきます。

Screen Shot 2014-08-08 at 17.01.18

デプロイの結果では、ステージング環境と本番稼働環境でのデプロイされているビルドの差も理解することができます。

「デプロイされました」をクリックすると以下の画面で知ることができます。

Screen Shot 2014-08-08 at 17.02.40

 

ハンズオン – Bamboo での本番環境へのデプロイ


さて、今回はステージング環境までは自動デプロイに、本番環境へは、内容を確認しての手動デプロイ(キックするだけです、デプロイメントのプロセスは自動化してあります)をしています。

手順

参考画面

  • JIRA でデプロイの状況を確認します。
  • 「デプロイされました」をクリックします。

Screen Shot 2014-08-08 at 17.02.40

  • 「Production」をクリックし、Bamboo に遷移します。
  • 現在、本番稼働環境で稼働しているビルドを確認します。
    過去のデプロイの結果や必要に応じたロールバックも行えるのがわかります。

Screen Shot 2014-08-08 at 17.07.20

  • デプロイメントを実行します。

Screen Shot 2014-08-08 at 17.08.42

  • これからデプロイするビルドにより影響を確認します。
    • ストーリーやバグ修正の何が反映されるのか
      • どのコードにどういった変更がなされたのか

Screen Shot 2014-08-08 at 17.09.53

Screen Shot 2014-08-08 at 17.11.01

Screen Shot 2014-08-08 at 17.11.22

Screen Shot 2014-08-08 at 17.12.07

Screen Shot 2014-08-08 at 17.12.43

  • [Start deployment] ボタンをクリックすると自動で本番稼働環境にデプロイされます。

Screen Shot 2014-08-08 at 17.13.42

Screen Shot 2014-08-08 at 17.14.47

  • JIRA で状況を確認します。

Screen Shot 2014-08-08 at 17.18.48

Screen Shot 2014-08-08 at 17.19.23


 

ハンズオン – Confluence による企画文書の確認


さて、開発チームでの流れを見ていきましたが、最初の企画文書に変化はあったでしょうか?確認してみましょう。Confluence で企画文書を開けば一目瞭然です。

Screen Shot 2014-08-08 at 12.14.15

この状況が、以下に変わっているはずです。

Screen Shot 2014-08-08 at 17.21.44

[進行中] から [解決済み] になっています。

さて本番稼働中にまでなっていますので、JIRA で 該当ストーリーを [完了] までドラッグ&ドロップさせてしまいましょう。

image

すると、Confluence の企画文書も動的に状況が更新されます。

Screen Shot 2014-08-08 at 17.25.44

 

以上です。

 

ハンズオンの実施結果


ハンズオンを実施した結果を公開しました。


 

まとめ


はい。このように開発の環境を整えてあげさえすれば、継続的にデリバリーし続けるインフラは整えることができます。現場がよりよくなり、ビジネス価値、顧客価値にフォーカスした開発の在り方を考えるうえで、ご自身の開発現場環境を見直すことは避けては通れなくなってきています。また、それをさけて小手先に走ってしまっては、きっと思った成果、その先の成果は得られないでしょう。

行きましょう。

セッション資料公開




【 この記事は、15203人に読まれています】

One thought on “継続的デリバリーハンズオン手順書

Comments are closed.