今更聞けない！？DevOps 初心者向け Azure DevOps を体験する方法

みなさん、こんにちは。

最近は DevOps というキーワードをよく耳にすると思いますが、正直どういうこと？体験したことがない？という方もいるのではないでしょうか。

そこでこの記事では、DevOps 初心者向けに Devops を体験するための４つのステップを紹介します。

#概要
今回の方法は、Azure を使います。Azure 上の Bot を Visual Studio 上から変更すると、自動的に反映されます。
事前に Azure サブスクリプションを準備しておく必要があります。もしお持ちでない方は、評価版でも試せます。 

- Azure サブスクリプションを保持するアカウント
- Visual Studio 2017
- Azure DevOps アカウント

Azure サブスクリプションと Azure DevOps のアカウントは同じアカウントである必要があります。

#主な手順

ステップは主に4 つです。

ステップ 1. Bot Service の作成
ステップ 2. ソースコードの取得、ビルド
ステップ 3. Visual Studio から リポジトリに接続
ステップ 4. Visual Studio から Azure DevOps の有効化

##ステップ 1. Bot Service の作成
最初に Azure に Bot Service を作成していきます。

1. Web App Bot を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/59ab20b0-d6e1-87a7-e54c-e2cc55ce8d6a.png)

適用に設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/bdae65f0-0ec2-a28c-c6ec-c2500efd9921.png)

2. 作成が完了したら、念のためテストします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/f66aade4-2ff0-c03a-ca8d-979ce301922b.png)

## ステップ 2. ソースコードの取得、ビルド
続いて、作成した Bot Service のソースコードをダウンロードしてビルドします。

1. ダウンロードをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/ff338b2d-184b-9421-2a37-a3b14ae8516f.png)

そのまま進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/771ee93a-b94d-372f-6271-2d4c8367369a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/cbabe61b-a2c4-cb6a-7e44-65ddc35e6d10.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/fd27049a-dc4d-32a3-10bc-3686a4a4d312.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/e480bd08-7f77-8f39-3195-85337a7c2045.png)

2. ZIP ファイルのプロパティから、ブロックを解除します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/e1ca786e-9c67-914a-e53a-dda85f9094c5.png)

3. ZIP ファイルを展開します。[CoreBot.sln] ファイルを Visual Studio で開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/681f6708-9327-9065-1b04-8368ef01f640.png)

4. リビルドし、成功することを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/b016a644-bfa2-9500-ec9d-2e59b75b91de.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/f3476461-62dc-fa12-13d5-bd76a9092557.png)

## ステッ 3. Visual Studio から リポジトリに接続

続いて、Visual Studio からリポジトリに接続します。

1. ソリューションから [Add Solution to Source Control...] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/e2b0a421-70b9-e8da-7498-bfe54c08c478.png)

2. ファイルのアイコンがカギマークに変化しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/5eeeb0b6-017f-6a23-771a-c5bf16aee1ad.png)

3. VS の右下の上矢印をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/48f8483f-e1a2-d43b-95ad-d14f44af3c94.png)

4. [Publish Git Repro] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/dbd8e86e-ef9c-60d5-409c-ab70b9c3e4e2.png)

5. Azure DevOps リポジトリのアカウントを選択します。リポジトリ名を指定します。[Publish Repository] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/fa7fb20f-7788-95be-4cd3-a70f66b67231.png)
6. 公開が完了すると以下の画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/7c04d617-c22f-4f6c-e47f-6d2fbd0741fe.png)
7. 続いて、右下の鉛筆アイコンをクリックします。（[Change] メニューでも大丈夫です。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/5bcbae5c-66c5-a81a-9e35-dabb19c74166.png)
8. コメントを入力し、[Commit All] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/2368232e-260c-0b86-5235-40cee09b12fe.png)
9. エラーが発生したら、".vs" フォルダを除外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/cb23092a-d028-59c6-2e52-25895d181aba.png)
10. ".vs" フォルダを選択し、[Ignore these local items] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/82d84503-d6f0-8238-6a1b-ff305557c970.png)
11. 再び、[Commit All] をクリックします。以下の通り成功したことを確認し、[Sync] リンクをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/a2b4a540-2d15-7421-5e55-aace7b3f1867.png)
12. [Push] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/7c4193e0-47fc-a0e8-e9c3-091b143eade3.png)
13. Succcesfully...となったことを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/c4fccb5c-fc9f-f3de-56ef-0fc39bac2422.png)

これにより、VS のコードが Azure Devops リポジトリにアップロードされました。
Azure Devops リポジトリにログインして、念のため確認してみましょう。

[Azure Devops: プロジェクト]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/0e66e099-52db-6e35-3f00-3610ed5f53ef.png)
[Azure Devops: ソースコード]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/2c625fc3-afab-7440-a70b-e3928e1bb93d.png)

## ステップ 4. Visual Studio から Azure DevOps の有効化
では続いて、Azure 上にある Bot Service と、リポジトリ上のソースコードが自動で連携するように有効化します。
1. VS のソリューションを右クリックし、[Configure Continuous Delivery to Azure] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/2faa3db9-387d-046d-2611-8c6642435663.png)
2. リポジトリ、Azure リソースを今回利用しているものを選択します。[OK] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/01eb9392-7503-b82a-7208-999491f67594.png)

リポジトリはアップロードした場所になっていること、App Service は Azure 上の Bot Service になっているか確認してください。 

3. Azure Pipeline が開始されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/85a4a07e-a7f4-4801-54dc-1f8ac66234c7.png)
4. 完了したことを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/3e3d0d73-3df7-ae24-1720-7cb8e37f6d40.png)
5. リポジトリを開きます。[Piplelines] > [Builds] をクリックし、ステップ２で実行した初回のコミットが完了していることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/efe91ba9-f4d3-8c1f-69c4-bbb5cde083c7.png)
[Build #]列のアイコンが緑になっていれば完了しています。青の場合は、緑になるまで待ちましょう。
6. 続いて、Azure ポータルにログインし、コードをダウンロードした Bot Service を開きます。
7. [Build] をクリックし、枠のリンクをクリックします。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/4ab72f72-30c8-63e2-b36f-aa84af09783c.png)
8. 以下の通り、リポジトリのソースコードが展開されていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/a29c00fa-f5e6-2d34-eb31-a5c5b181d208.png)

# 動作確認

では、実際に Devops を体感しましょう。
今回は、VS 上で Bot Service が表示するカードのメッセージを変更し、自動で反映されるか試してみます。
1. VS の "welcomeCard.json" を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/cf068862-3d84-7115-df7e-70d7f707c8cf.png)
2. "Welcome to..." のメッセージを変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/72b102a8-d054-bee7-0b68-e02a82fabf27.png)
3. ファイルアイコンが赤くなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/811f4e18-6abc-753c-dbd8-2a4e4de4d9e0.png)
4. 右クリックし、[Commit] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/c3ee16e4-0062-8050-b07e-89cf28c93895.png)
5. コメントを入力し、Commit All をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/96bb9311-2513-913a-498a-84eebc87cfdc.png)
6. Sync をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/fa8761b1-6b67-c150-9157-9dca58456bc7.png)
7. Push をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/6d89e716-3886-ae75-14d4-695d62ec100a.png)
8. 成功したことを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/2809bd75-e0b3-afe5-ac36-4e9dc01d5314.png)
9. しばらく待ってから、Bot Service をテストすると、以下の通り、カードのメッセージが変更されていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/d79b31e9-62ce-0f36-97eb-5e6238ff3ecc.png)


# 仕組み
どのような仕組みになっているか解説します。

まず、VS 上でコードを変更し、Commit ー＞　Push　するとリポジトリに変更が反映されます。
以下は、メッセージを変更し、Push した直後のリポジトリの状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/745eac1b-7eba-69e7-d58d-225e63bad492.png)
ポイントは、アイコンが青色になっています。直後なのでまだ処理中です。

処理が完了すると以下の通り緑アイコンになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/572f4a1a-9101-5869-152c-025b5756a3ff.png)

続いて、Azure Bot Service が反映されます。
以下はメッセージを変更前のBot Service の状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/73fb37f0-3e85-6d30-b459-6c8ae69f6a8b.png)
リフレッシュしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/9a0b7977-dafc-e99b-bb3a-8b7a01e68280.png)

すると、リポジトリから自動的にメッセージを変更が反映されたことがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355620/c7574cbb-bfa4-f555-9941-4de3b37e8609.png)

# まとめ

いかがだったでしょうか。DevOps は今後も非常に重要なキーワードになります。
是非ご自身で試してみましょう。