LoginSignup
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@takayakawano(Takaya Kawano)

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

Last updated at Posted at 2019-05-22

みなさん、こんにちは。

最近は 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

適用に設定します。

image.png

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

image.png

ステップ 2. ソースコードの取得、ビルド

続いて、作成した Bot Service のソースコードをダウンロードしてビルドします。

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

image.png

そのまま進めます。
image.png

image.png

image.png

image.png

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

image.png

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

image.png

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

image.png

image.png

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

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

  1. ソリューションから [Add Solution to Source Control...] をクリックします。
    image.png

  2. ファイルのアイコンがカギマークに変化しました。
    image.png

  3. VS の右下の上矢印をクリックします。
    image.png

  4. [Publish Git Repro] をクリックします。
    image.png

  5. Azure DevOps リポジトリのアカウントを選択します。リポジトリ名を指定します。[Publish Repository] をクリックします。
    image.png

  6. 公開が完了すると以下の画面になります。
    image.png

  7. 続いて、右下の鉛筆アイコンをクリックします。（[Change] メニューでも大丈夫です。）
    image.png

  8. コメントを入力し、[Commit All] をクリックします。
    image.png

  9. エラーが発生したら、".vs" フォルダを除外します。
    image.png

  10. ".vs" フォルダを選択し、[Ignore these local items] をクリックします。
    image.png

  11. 再び、[Commit All] をクリックします。以下の通り成功したことを確認し、[Sync] リンクをクリックします。
    image.png

  12. [Push] をクリックします。
    image.png

  13. Succcesfully...となったことを確認します。
    image.png

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

[Azure Devops: プロジェクト]
image.png
[Azure Devops: ソースコード]
image.png

ステップ 4. Visual Studio から Azure DevOps の有効化

では続いて、Azure 上にある Bot Service と、リポジトリ上のソースコードが自動で連携するように有効化します。

  1. VS のソリューションを右クリックし、[Configure Continuous Delivery to Azure] をクリックします。
    image.png
  2. リポジトリ、Azure リソースを今回利用しているものを選択します。[OK] をクリックします。
    image.png

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

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

image.png
4. 完了したことを確認します。
image.png
5. リポジトリを開きます。[Piplelines] > [Builds] をクリックし、ステップ２で実行した初回のコミットが完了していることを確認します。
image.png
[Build #]列のアイコンが緑になっていれば完了しています。青の場合は、緑になるまで待ちましょう。
6. 続いて、Azure ポータルにログインし、コードをダウンロードした Bot Service を開きます。
7. [Build] をクリックし、枠のリンクをクリックします。
image.png
8. 以下の通り、リポジトリのソースコードが展開されていることを確認します。
image.png

動作確認

では、実際に Devops を体感しましょう。
今回は、VS 上で Bot Service が表示するカードのメッセージを変更し、自動で反映されるか試してみます。

  1. VS の "welcomeCard.json" を開きます。
    image.png
  2. "Welcome to..." のメッセージを変更します。
    image.png
  3. ファイルアイコンが赤くなります。
    image.png
  4. 右クリックし、[Commit] をクリックします。
    image.png
  5. コメントを入力し、Commit All をクリックします。
    image.png
  6. Sync をクリックします。
    image.png
  7. Push をクリックします。
    image.png
  8. 成功したことを確認します。
    image.png
  9. しばらく待ってから、Bot Service をテストすると、以下の通り、カードのメッセージが変更されていることがわかります。
    image.png

仕組み

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

まず、VS 上でコードを変更し、Commit ー＞　Push　するとリポジトリに変更が反映されます。
以下は、メッセージを変更し、Push した直後のリポジトリの状態です。
image.png
ポイントは、アイコンが青色になっています。直後なのでまだ処理中です。

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

image.png

続いて、Azure Bot Service が反映されます。
以下はメッセージを変更前のBot Service の状態です。
image.png
リフレッシュしてみます。
image.png

すると、リポジトリから自動的にメッセージを変更が反映されたことがわかります。
image.png

まとめ

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

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?