Vs code conf2020-11-21-extensions-for-microservices-app-dev

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

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

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

拡張機能について

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

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

• https://marketplace.visualstudio.com/vscode

サンプルアプリについて

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

• https://github.com/GoogleCloudPlatform/microservices-demo
• https://microservices-demo.github.io/

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

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

• https://github.com/microservices-demo/front-end
• https://github.com/microservices-demo/edge-router
• https://github.com/microservices-demo/catalogue
• https://github.com/microservices-demo/carts
• https://github.com/microservices-demo/orders
• https://github.com/microservices-demo/shipping
• https://github.com/microservices-demo/queue-master
• https://github.com/microservices-demo/payment
• https://github.com/microservices-demo/user
• https://github.com/microservices-demo/load-test

トップページ 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

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

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

• https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

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

• https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

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

• https://marketplace.visualstudio.com/items?itemName=octref.vetur

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

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

• https://marketplace.visualstudio.com/items?itemName=golang.Go
• https://github.com/Microsoft/vscode-go

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

• https://marketplace.visualstudio.com/items?itemName=Arjun.swagger-viewer

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

• https://marketplace.visualstudio.com/items?itemName=humao.rest-client

Spring Boot Extension Pack Spring Boot Dashboard for VS Code • 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

• https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack

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

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

• https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

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

• https://marketplace.visualstudio.com/items?itemName=ms-kubernetes-tools.vscode-kubernetes-tools

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

Kubernetes 監視の課題 Containe r Runtime

Kubernetes 監視の課題 Dev Ops Infrastructure

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

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

• https://www.elastic.co/jp/apm
• https://www.elastic.co/jp/infrastructure-monitoring

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

• https://www.elastic.co/jp/webinars/elasticsearch-log-collection-with-kubernetes-docker-and-containers
• https://www.elastic.co/jp/blog/shipping-kubernetes-logs-to-elasticsearch-with-filebeat

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

• https://portal.azure.com/
• https://cloud.elastic.co/

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

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

• https://cloud.elastic.co/jp/

AKS 上のアプリを Elastic Cloud + VSCode で管理 MySQL APM packetbeat metricbeat filebeat Azure Kubernetes Service Elastic Cloud on Azure 33

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

• https://marketplace.visualstudio.com/items?itemName=ria.elastic

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

• http://user:pass@host:9200
• https://elastic:oRHGj80iJUO6CF7WBUMiwyu1x@8009bf958b6w5923b3c56983d4048df824.japaneast.azure.elastic-cloud.com:9243

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

• https://www.microsoft.com/ja-jp/events/top/apps-innovation-webinars.aspx

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

Thank You for your attention! www.elastic.co

• http://www.elastic.co/