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

>100 Views

November 21, 20

スライド概要

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

profile-image

ヴイエムウェア株式会社 ソリューションアーキテクト本部 プリンシパルエンタープライズアーキテクト。 Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け最新技術啓発活動を実施。その後、Dell、Accenture、Elastic で開発者向け技術啓発活動等を経て現職。 モダンアプリケーション開発、マルチクラウド対応、アーキテクチャ策定等を中心に、技術者向けに最新技術の啓発活動を実施中。 2019年4月〜2021年8月迄、内閣官房 IT 総合戦略室 政府 CIO 補佐官を兼務、2021年9月〜2024年3月迄、デジタル庁 PjM ユニット ソリューションアーキテクトを兼務。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

拡張機能について

5.

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

6.

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

7.

サンプルアプリについて

8.

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

9.

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

10.

名前 概要 ⾔語・データストア フレームワーク 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 サービス、使⽤技術、⼀覧

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) https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets ※ デバッグ、IntelliSense、コードナビゲーション、等コア機能

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 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

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 監視の課題 Dev Ops Infrastructure

27.

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 (クラウド & オンプレ)

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

Thank You for your attention! www.elastic.co