O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

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

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 38 Anúncio

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

Baixar para ler offline

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

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

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Vs code conf2020-11-21-extensions-for-microservices-app-dev (20)

Anúncio

Mais de Shotaro Suzuki (20)

Mais recentes (20)

Anúncio

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

  1. 1. Visual Studio Code 拡張機能の活⽤ ~ 適切に組み合わせてマイクロサービスアプリ開発の 全プロセスを⼀つのツールで管理してみよう︕ Date: November 21, 2020 鈴⽊ 章太郎 Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト 内閣官房 IT 総合戦略室 政府 CIO 補佐官
  2. 2. Elastic Technical Product Marketing Manager/Evangelist 内閣官房 IT 総合戦略室 政府 CIO 補佐官 元 Microsoft Technical Evangelist Twitter : @shosuz Shotaro Suzuki (MS K-ON Club 創設者の⼀⼈)
  3. 3. Agenda • 拡張機能について • サンプルアプリについて • UI デザイン & フロントエンド開発と拡張機能 • API 開発 & ショッピングカート開発と拡張機能 • コンテナアプリ開発と拡張機能 • ログ、メトリック、APM 等運⽤監視と拡張機能 初⼼者向け
  4. 4. 拡張機能について
  5. 5. 拡張機能とは VSCode をパワーアップする • ⽤途に応じて Marketplace から 追加 • 標準機能にないものを追加可能 • 個⼈でも開発可能 • インストールは下記の3通り – 拡張機能検索 – VSIX – コマンドライン • 有効化・無効化・更新が可能
  6. 6. Visual Studio Code Marketplace https://marketplace.visualstudio.com/vscode
  7. 7. サンプルアプリについて
  8. 8. Hipster とか Sock Shop とか https://github.com/GoogleCloudPlatform/microservices-demo https://microservices-demo.github.io/ • VSCode の教科書でも取り上げられ、Web での情報も多い Sock Shop で • (弊社イベントでもデモした) Google Cloud Hipster でも同じようにできます
  9. 9. Sock Shop とは • ユーザー登録/商品閲覧/カート/ウィッシュリスト/購⼊(ダミー)など EC サイトに必要な 機能が⼀通り実装済みのマイクロサービスサンプルアプリ • 「マイクロサービスアーキテクチャの説明、講演や交流会でのプラットフォームのデモンスト レーション、またはトレーニングと教育のツールとして使⽤できます。」 Visual Studio Code の教科書 でも取り上げられています︕
  10. 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. 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. 12. UI デザイン & フロントエンド開発と拡張機能
  13. 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. 14. Draw.io VS Code Integration • Draw.io にアクセスするだけ で、フローチャート、ネット ワーク図、ER 図等、豊富な テンプレートを使⽤して簡単 に作図可能 • 作成した図は PNG や JPEG などの画像形式だけでなく、 SVG や XML といった豊富な 拡張⼦でエクスポート可能 https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
  15. 15. Vetur • Vue.js を書くのに最適 な拡張機能 • vls︓Vue⾔語サーバー • vti︓Vetu rターミナル インターフェース • ドキュメント https://marketplace.visualstudio.com/items?itemName=octref.vetur
  16. 16. API 開発 & ショッピングカート開発と拡張機能
  17. 17. Go 拡張機能 • IntelliSense • Code Navigation • Code Snippet • Etc. https://marketplace.visualstudio.com/items?itemName=golang.Go ※ VS CodeGo拡張機能の新しいホーム。Microsoft / vscode-go から移⾏
  18. 18. Swagger Viewer (Arjun G) • RESTful API の開発 • 設計、構築、⽂書化 https://marketplace.visualstudio.com/items?itemName=Arjun.swagger-viewer
  19. 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. 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. 21. コンテナアプリ開発と拡張機能
  22. 22. Docker • Dockerfile • IntelliSense • Docker コマンドパレット • Azure Web App for Container にもデプロイ可能 https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker
  23. 23. Kubernetes Tools • コンテナアプリの Kubernetes クラスター へのデプロイ機能 • Azure Kubernetes Services (AKS) の場合 はクラスターの構築や管理も可能 • マニフェストファイルの構⽂サポート・ ⼊⼒補完 • オプション︓Helm サポート (パッケージマネージャ) • オプション︓Draft サポート (コンテナアプリビルド&デプロイ ツール) https://marketplace.visualstudio.com/items?itemName=ms-kubernetes-tools.vscode-kubernetes-tools
  24. 24. ログ、メトリック、APM 等運⽤監視と拡張機能
  25. 25. Kubernetes 監視の課題 Containe r Runtime
  26. 26. Kubernetes 監視の課題 Infrastructure Dev Ops
  27. 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. 28. Kubernetes のログとメトリック、トレースを組み合わせる ● コマンド1つで Kubernetes のアプリからログをストリーミング可能 ● テレメトリーのインフラデータから Prometheus のメトリック、Jaeger のトレースまで収集し、オープンソースの Elastic APM エージェントで分散トレーシングを実施可能 ● 事前設定済みの Kibana ダッシュボードですぐに確認でき、Metricsアプリで横断的に検索できる
  29. 29. Kubernetes サービスの変化を把握する ● MetricbeatとFilebeatの⾃動探知機能 で、環境のあらゆる変化を把握できる ● モジュールを追加したり、パスを記録するプロセスは⾃動化され、Docker や Kubernetes の API フックを使って監視設定 が動的に調整される ● さらにメタデータが付記されることにより、すべてのデータの出所を把握できる
  30. 30. Elastic Cloud on Azure デプロイ https://portal.azure.comhttps://cloud.elastic.co/
  31. 31. Kibana 起動時の認証情報をダウンロード (.csv)
  32. 32. Elastic Cloud on Azure デプロイ https://cloud.elastic.co/
  33. 33. 33 filebeatmetricbeatpacketbeatAPM MySQL Azure Kubernetes Service AKS 上のアプリを Elastic Cloud + VSCode で管理 Elastic Cloud on Azure
  34. 34. Elasticsearch for VSCode • Kibana Dev Tools 相当 – クエリ、結果確認、等 • OSS ローカル – ポートは 9200 • Azure/AWS/GCP – ポートはポータルが割当 https://marketplace.visualstudio.com/items?itemName=ria.elastic
  35. 35. Elasticsearch for VSCode ホスト設定 http://user:pass@host:9200 https://elastic:oRHGj80iJUO6CF7WBUMiwyu1x@8009bf958b6w5923b3c56983d4048df8 24.japaneast.azure.elastic-cloud.com:9243 • • https URL ユーザ パスワード •
  36. 36. アプリケーション開発 オンデマンド ウェビナー特集 https://www.microsoft.com/ja-jp/events/top/apps-innovation-webinars.aspx あと1つ追加予定︕
  37. 37. まとめ • マイクロサービス アプリでは幅広い拡張機能が必要 • バッティングするものも試してみてから • 無償版でもある程度使える Elastic Cloud もぜひお試し くださいw 拡張機能を適切に選んで使ってみよう︕
  38. 38. www.elastic.co Thank You for your attention!

×