https://vscode.connpass.com/event/184441/ 14:20 〜 14:50 【初級 / Beginners】 Visual Studio Code 拡張機能の活用 ~ 適切に組み合わせてマイクロサービスアプリ開発の全プロセスを一つのツールで管理してみよう！

1. Visual Studio Code 拡張機能の活⽤
~ 適切に組み合わせてマイクロサービスアプリ開発の
全プロセスを⼀つのツールで管理してみよう︕
Date: November 21, 2020
鈴⽊ 章太郎
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト
内閣官房 IT 総合戦略室 政府 CIO 補佐官

2. Elastic
Technical Product Marketing
Manager/Evangelist
内閣官房 IT 総合戦略室
政府 CIO 補佐官
元 Microsoft Technical Evangelist
Twitter : @shosuz
Shotaro Suzuki
(MS K-ON Club 創設者の⼀⼈）

3. Agenda
• 拡張機能について
• サンプルアプリについて
• UI デザイン & フロントエンド開発と拡張機能
• API 開発 & ショッピングカート開発と拡張機能
• コンテナアプリ開発と拡張機能
• ログ、メトリック、APM 等運⽤監視と拡張機能
初⼼者向け

4. 拡張機能について

5. 拡張機能とは
VSCode をパワーアップする
• ⽤途に応じて Marketplace から
追加
• 標準機能にないものを追加可能
• 個⼈でも開発可能
• インストールは下記の３通り
– 拡張機能検索
– VSIX
– コマンドライン
• 有効化・無効化・更新が可能

6. Visual Studio Code Marketplace
https://marketplace.visualstudio.com/vscode

7. サンプルアプリについて

8. Hipster とか Sock Shop とか
https://github.com/GoogleCloudPlatform/microservices-demo https://microservices-demo.github.io/
• VSCode の教科書でも取り上げられ、Web での情報も多い Sock Shop で
• (弊社イベントでもデモした) Google Cloud Hipster でも同じようにできます

9. Sock Shop とは
• ユーザー登録／商品閲覧／カート／ウィッシュリスト／購⼊（ダミー）など EC サイトに必要な
機能が⼀通り実装済みのマイクロサービスサンプルアプリ
• 「マイクロサービスアーキテクチャの説明、講演や交流会でのプラットフォームのデモンスト
レーション、またはトレーニングと教育のツールとして使⽤できます。」
Visual Studio Code の教科書
でも取り上げられています︕

10. Sock Shop サービス、使⽤技術、⼀覧
名前 概要 ⾔語・データストア フレームワーク GitHub URL
front-end フロントエンド Node.js Express
GitHub - microservices-demo/front-end: Front-end application for ALL the
microservices
edge-router リバースプロキシ Traefik GitHub - microservices-demo/edge-router
catalogue カタログ API Go OpenTracing GitHub - microservices-demo/catalogue
catalogue-db カタログデータベース MySQL GitHub - microservices-demo/catalogue
carts カート API Java Spring Framework
GitHub - microservices-demo/carts: Carts service for microservices-demo
application
carts-db カートデータベース MongoDB
orders 注⽂ API Java Spring Framework
GitHub - microservices-demo/orders: Orders service for Microservices Demo
application
orders-db 注⽂データベース MongoDB
shipping 配送 API Java Spring Framework
GitHub - microservices-demo/shipping: Shipping service for microservices-demo
application
queue-master 配送キュー Java Spring Framework
GitHub - microservices-demo/queue-master: A microservices-demo service that
processes the orders queue
rabbitmq キュー RabbitMQ
payment 決済 API Go OpenTracing GitHub - microservices-demo/payment
user ユーザー API Go GitHub - microservices-demo/user: The users microservice.
user-db ユーザーデータベース MongoDB GitHub - microservices-demo/user: The users microservice.
user-sim 負荷テスト実⾏ Locust GitHub - microservices-demo/load-test: A load-test script & container for Sock Shop

11. Sock Shop
画⾯遷移
カート機能も充実靴下を検索できるトップページ
• 今回は Docker Desktop for Mac で実⾏
• もちろん Kubernetes にも簡単に発⾏可能（課⾦に注意︕）
git clone https://github.com/microservices-demo/microservices-demo
cd microservices-demo
docker-compose -f deploy/docker-compose/docker-compose.yml up -d

12. UI デザイン & フロントエンド開発と拡張機能

13. JavaScript(ES6)
Code Snippets
• ECMA Script 構⽂への
スニペットを追加
• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)
• Vue.js (.vue)
• HTML (.html)
標準機能 ※ への追加
※ デバッグ、IntelliSense、コードナビゲーション、等コア機能
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

14. Draw.io
VS Code
Integration
• Draw.io にアクセスするだけ
で、フローチャート、ネット
ワーク図、ER 図等、豊富な
テンプレートを使⽤して簡単
に作図可能
• 作成した図は PNG や JPEG
などの画像形式だけでなく、
SVG や XML といった豊富な
拡張⼦でエクスポート可能
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

15. Vetur
• Vue.js を書くのに最適
な拡張機能
• vls︓Vue⾔語サーバー
• vti︓Vetu rターミナル
インターフェース
• ドキュメント
https://marketplace.visualstudio.com/items?itemName=octref.vetur

16. API 開発 & ショッピングカート開発と拡張機能

17. Go 拡張機能
• IntelliSense
• Code Navigation
• Code Snippet
• Etc.
https://marketplace.visualstudio.com/items?itemName=golang.Go
※ VS CodeGo拡張機能の新しいホーム。Microsoft / vscode-go から移⾏

18. Swagger
Viewer
(Arjun G)
• RESTful API の開発
• 設計、構築、⽂書化
https://marketplace.visualstudio.com/items?itemName=Arjun.swagger-viewer

19. REST Client
(Huachao Mao)
• VS Code上で HTTP
リクエストを送信
• VS Code上で HTTP
レスポンスを確認
• 基本認証、ダイジェスト
認証、SSLクライアント
証明書、Azure Active
Directory の認証に対応
https://marketplace.visualstudio.com/items?itemName=humao.rest-client

20. Spring Boot
Extension
Pack
• Spring Boot
• Cloud Foundry
Deployment Manifest
• Concourse CI Pipeline
• Spring Initializer Java
• Spring Boot
Dashboard
https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack
Spring Boot Dashboard for VS Code

21. コンテナアプリ開発と拡張機能

22. Docker
• Dockerfile
• IntelliSense
• Docker コマンドパレット
• Azure Web App for
Container にもデプロイ可能
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

23. Kubernetes
Tools
• コンテナアプリの Kubernetes クラスター
へのデプロイ機能
• Azure Kubernetes Services (AKS) の場合
はクラスターの構築や管理も可能
• マニフェストファイルの構⽂サポート・
⼊⼒補完
• オプション︓Helm サポート
（パッケージマネージャ）
• オプション︓Draft サポート
（コンテナアプリビルド＆デプロイ
ツール）
https://marketplace.visualstudio.com/items?itemName=ms-kubernetes-tools.vscode-kubernetes-tools

24. ログ、メトリック、APM 等運⽤監視と拡張機能

25. Kubernetes 監視の課題
Containe
r
Runtime

26. Kubernetes 監視の課題
Infrastructure
Dev
Ops

27. Elastic について
Elastic スタックで実現
Kibana
Elasticsearch
Beats Logstash
Elastic エンタープライズサーチ Elastic セキュリティElastic オブザーバビリティ
3 つのソリューション
SaaS
(AWS/Azure/GCP)
IaaS
(クラウド & オンプレ）
Elastic Cloud
on Kubernetes
Elastic Cloud Elastic Cloud
Enterprise
豊富なデプロイ選択肢
Kubernetes
(クラウド & オンプレ）
1 Stack, 3 Solutions, Deploy Anywhere

28. Kubernetes のログとメトリック、トレースを組み合わせる
● コマンド1つで Kubernetes のアプリからログをストリーミング可能
● テレメトリーのインフラデータから Prometheus のメトリック、Jaeger のトレースまで収集し、オープンソースの Elastic APM
エージェントで分散トレーシングを実施可能
● 事前設定済みの Kibana ダッシュボードですぐに確認でき、Metricsアプリで横断的に検索できる

29. Kubernetes サービスの変化を把握する
● MetricbeatとFilebeatの⾃動探知機能 で、環境のあらゆる変化を把握できる
● モジュールを追加したり、パスを記録するプロセスは⾃動化され、Docker や Kubernetes の API フックを使って監視設定
が動的に調整される
● さらにメタデータが付記されることにより、すべてのデータの出所を把握できる

30. Elastic Cloud on Azure デプロイ
https://portal.azure.comhttps://cloud.elastic.co/

31. Kibana 起動時の認証情報をダウンロード (.csv)

32. Elastic Cloud on Azure デプロイ
https://cloud.elastic.co/

33. 33
filebeatmetricbeatpacketbeatAPM
MySQL
Azure Kubernetes Service
AKS 上のアプリを Elastic Cloud + VSCode で管理
Elastic Cloud on Azure

34. Elasticsearch
for VSCode
• Kibana Dev Tools 相当
– クエリ、結果確認、等
• OSS ローカル
– ポートは 9200
• Azure/AWS/GCP
– ポートはポータルが割当
https://marketplace.visualstudio.com/items?itemName=ria.elastic

35. Elasticsearch for VSCode ホスト設定
http://user:pass@host:9200
https://elastic:oRHGj80iJUO6CF7WBUMiwyu1x@8009bf958b6w5923b3c56983d4048df8
24.japaneast.azure.elastic-cloud.com:9243
•
• https URL ユーザ パスワード
•

36. アプリケーション開発 オンデマンド ウェビナー特集
https://www.microsoft.com/ja-jp/events/top/apps-innovation-webinars.aspx
あと1つ追加予定︕

37. まとめ
• マイクロサービス アプリでは幅広い拡張機能が必要
• バッティングするものも試してみてから
• 無償版でもある程度使える Elastic Cloud もぜひお試し
くださいw
拡張機能を適切に選んで使ってみよう︕

38. www.elastic.co
Thank You for your attention!