Help us understand the problem. What is going on with this article?

【第1/5】Teams bot をローカル (Visual Studio 2019) で開発し、Azure で無料で動かす【その1:VS でローカル web サーバ立てる編】 #decode20 #A02

この記事では、Teams で動く chat bot を、ローカル (Visual Studio) でデバッグしながら開発する方法を、初心者でも分かりやすいようにスクショ満載でまとめました!

(スクショ満載にした結果、1ページが長くなり過ぎたので、5 つに記事を分割します。この記事はそのうちの最初の1つです。)

  1. 【第 1/5 回】VS でローカル web サーバ立てる編【← 今ここ】
  2. 【第 2/5 回】エミュレータ準備編
  3. 【第 3/5 回】Azure 側の設定編(ボットチャンネル登録)
  4. 【第 4/5 回】Teams に繋げてデバッグ編
  5. 【第 5/5 回】Azure にデプロイ編

Teams bot 開発

image.png

ちなみに、この記事は、オンライン開催された
日本マイクロソフト公式技術カンファレンス『de:code 2020』の、
私の行ったセッション『Azure Bot Services を使って Teams bot を開発する』で発表した内容の記事版です。

イラスト3.png

前回書いた記事との違い

(*゚▽゚* っ)З 「あれ? Teams bot 開発とか、少し前も同じような記事 書いてなかったっけ?」

たしかに似た記事は書いたけど、でもちょっと違う! 前回のは簡易版(お試し版)で、今回のは本格版!

image.png

前回の記事『Microsoft Teams で動く オレオレ bot を 1 時間で作る』では、
全て Web ブラウザ上で完結する、とても簡単な方法をご紹介しました。
コードも Azure Bot Services に内蔵されているオンラインエディタ上で編集できるので、ローカルに開発環境が無くてもサクッと動かせます。

これは本当に簡単なので(マジで1時間で動く)お試してやってみるのにはめちゃ便利なのですが、
いっぽうで、ローカル開発環境でデバッグしながら開発できないという欠点もあります。
本格的な業務用アプリを作るなどになるとこれではつらくなると思います。

なので、今回は、これのステップアップ版として、本格的にローカル開発環境でデバッグしながら Teams bot を開発する方法をご紹介します。

↓ これ書いてる途中にツイートしたもの

参考資料

補足

Azure を操作する方法として、

  1. ポータル画面の画面ポチポチの方法と
  2. CLI からコマンド叩く方法

がありますが、
公式ドキュメントは全てコマンドラインからのもので書かれています。(公式ドキュメントは全て GitHub で管理されてるからコマンド(コード)で書かれている方が差分管理しやすいのと、Azure ポータル画面の UI が変わったときスクショ全部撮り直すことになるから、CLI 版で書いた方が安全だからだと思う)(個人的な予想)

でも、初心者は画面でやった方が直感的に理解しやすいと思うので、今回の記事では全てポータル画面から操作する方法をとっています。
スクショ満載でまとめました!

完成形

Teams で動く bot です。

image.png

全体像 (ステップごとのアーキテクチャ図)

Teams bot 開発の全体アーキテクチャ図を順を追って説明します。
三段階に分けました。

Step 1: まずはローカル実行(エミュレータからの接続)

まだクライアントは Teams ではなくエミュレータです。
クライアントもサーバーも
私のパソコンの中 (ローカル開発環境) で閉じているので、大変シンプルですね。

image.png

Visual Studio でローカルサーバーを実行していて、
同時に Bot Framework エミュレータも起動しています。

エミュレータで「こんにちは」と打つと、
ローカルサーバーのエンドポイント (http://localhost:3978/api/messages) に問い合わせて
サーバーが「(*゚▽゚* っ)З って返して」と送り、
エミュレータでそのように表示されます。
シンプルですね。まずはここからですね。

Step 2: まずはローカル実行(Teams からの接続)

クライアントが Teams になりました。
すると、今まで私のパソコンの中で閉じていた世界から、インターネットの向こう側に登場人物が増えましたね。

増えた人:

  • 管理する Microsoft 365 (旧 Office 365) 系のサーバーや Bot Framework Service のサーバー
  • 自分の Azure 環境

image.png

  1. クライアントは 私のパソコンの中の Teams アプリですが、そこで「こんにちは」とメッセージを打つと、そこからインターネット上の、マイクロソフトの管理する Microsoft 365 (旧 Office 365) 系のサーバーや Bot Framework Service のサーバーを経由し
  2. 自分の Azure 環境に立てた Bot チャンネル登録 に「エンドポイントどこかな?」と問い合わせます。
  3. Bot チャンネル登録 が「エンドポイントはここやで」とエンドポイントの URL を返します。今回はローカル実行中なので、トンネリングしているのでエンドポイントは https://***.ngrok.io/api/messages となります。
  4. そのエンドポイントに問い合わせが来ます。「Teams から『こんにちは』って来たで」
  5. サーバーが「(*゚▽゚* っ)З って返して」と送り返し、
  6. 最終的に Teams で「(*゚▽゚* っ)З」と表示されます

Step 3: Azure にデプロイ。クラウドで実行(Teams からの接続)

bot サーバーがローカル実行からクラウド実行になりました。
左下の私のパソコンの中から「ローカルサーバー」が消えて、代わりに、Azure の中に Web AppApp Service Plan が増えましたね。
これで私のパソコンを落としても bot は動き続けるね

image.png

1. Teams bot をまずローカルで開発(web サーバー準備編)

image.png

最終的にクラウド (Azure) にデプロイしますが、
まずはローカルで bot を動かせるようにしましょう。

(ローカルのままだとパソコン閉じたら bot 動かなくなるから、クラウドかどこかのいつでもレスポンスしてくれるサーバーに上げる必要があります)

1-1: Visual Studio 2019 に、Bot Framework 用のテンプレートを入れる

まずは Visual Studio 2019 を起動しましょう。(Visual Studio Code じゃないよ。Visual Studio 2019 だよ)

起動したら右下の「コード無しで続行→」を押します。

イラスト5.png

空っぽのプロジェクトが立ち上がるので、メニューの「拡張機能」→「拡張機能の管理」を押します。

イラスト.jpg

すると、全世界の開発者の方々がアップした、拡張機能一覧が出てきます。
検索バーで「bot」と打ち絞り込み、「Bot Framework v4 SDK Templates for Visual Studio」を選択し、ダウンロードします。

イラスト2.png

画面の下の黄色のバーにも書いてありますが、今ダウンロードした拡張機能は、Visual Studio の「次回起動時に」適用されます。

なので、
ダウンロードが終わったら、
Visual Studio をいったん閉じます。(重要)

閉じて、もう一度起動すると、インストールが走ります。

1-2: Bot Framework プロジェクト新規作成

Visual Studio を再起動し、「新しいプロジェクトの作成」をクリックします。

イラスト3.png

テンプレートがたくさん出て来るので、「bot」で絞り込みましょう。
今入れたプロジェクトテンプレートが選べるようになっています。
今回は、そのなかの「Echo Bot (Bot Framework v4)」を選択し「次へ」を押します。

Untitled.png

プロジェクト名を適当に決めます。

Untitled.png

「作成」すると、プロジェクトが開きます。

1-3: NuGet 更新

NuGet (ぬげっと)(.NET のパッケージ マネージャ) のパッケージ更新しておきましょう。

Visual Studio のソリューションエクスプローラーから「依存関係」→「パッケージ」右クリックで、「NuGet パッケージ管理」を選択します

image.png

更新があるようなので、最新の安定板にしておきます。

イラスト3.png

ライセンスに同意します。

イラスト2.png

これで最新版のパッケージが入りました。

1-4: web アプリがちゃんと起動するか確認

この作成した ASP.NET Core 製の web アプリは、
bot のクライアント(Teams)からの REST リクエストを受け取る API を発行する人になります。

とりあえずちゃんと起動するか(ASP.NET Core の実行環境が整っているか)確認するために、実行してみましょう。

実行ボタンを押します。

イラスト5.jpg

ちなみに、この実行ボタンに書いてある IIS Express とは、Web サーバーサービスです。

(IISInternet Information Services の略。)

もともと IIS という Microsoft Windows の標準 Web サーバー(アプリケーションサーバー)サービス があるのですが、
その簡易版が IIS Express です。

今回、この ASP.NET Core 製の web アプリを、IIS Express で動かすので、実行ボタンがそうなっています。

で、実行すると、web ブラウザが立ち上がり、localhost 上で "Your bot is ready!" と表示された web ページが出てきます。

イラスト4.png

この画面になったら OK です。ちゃんと動いてる。

実行を停止しないで、サーバを動かしたまま、次に進みましょう。

Next Step

というわけで、ローカルサーバーが立ち上がりました。
次はクライアントのエミュレータを準備しましょう。

image.png

  1. 【第 1/5 回】VS でローカル web サーバ立てる編【← 今ここ】
  2. 【第 2/5 回】エミュレータ準備編【← 次はこれ】
  3. 【第 3/5 回】Azure 側の設定編(ボットチャンネル登録)
  4. 【第 4/5 回】Teams に繋げてデバッグ編
  5. 【第 5/5 回】Azure にデプロイ編

次の記事: [https://qiita.com/chomado/items/b2f1020d598ebd855aa1]

chomado
ITエンジニア兼マンガ家の千代田まどか (ちょまど) です。Microsoft 社の Cloud Developer Advocate として、デベロッパーコミュニティの支援を行っています。松屋とゲームとアニメが好きです
https://chomado.com/
microsoft
マイクロソフトのメンバーが最新の技術情報をお届けします。Twitterアカウント(@msdevjp)やYouTubeチャンネル「クラウドデベロッパーちゃんねる」も運用中です。
https://aka.ms/MSFT-Docs-JPN
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした