Vs code conf2020-11-21-extensions-for-microservices-app-dev
0 likes2,831 views
https://vscode.connpass.com/event/184441/ 14:20 〜 14:50 【初級 / Beginners】 Visual Studio Code 拡張機能の活用 ~ 適切に組み合わせてマイクロサービスアプリ開発の全プロセスを一つのツールで管理してみよう！
Vs code conf2020-11-21-extensions-for-microservices-app-dev
- 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
- 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/
- 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 ユーザ パスワード •
- 37. まとめ • マイクロサービス アプリでは幅広い拡張機能が必要 • バッティングするものも試してみてから • 無償版でもある程度使える Elastic Cloud もぜひお試し くださいw 拡張機能を適切に選んで使ってみよう︕
- 38. www.elastic.co Thank You for your attention!