Slide 1

Slide 1 text

サーバーレスWebアプリ開発&運用で役立ったVS Code拡張機能 Masaki Suzuki 2023/02/01 TechFeed Experts Night #12

Slide 2

Slide 2 text

アジェンダ 1. 自己紹介&注意事項 2. Rest Client 3. Git Graph/GitLens 4. Draw.io Integration(+cfn-diagram) 5. その他拡張機能一覧 6. 告知 2

Slide 3

Slide 3 text

自己紹介 ◼ 名前:鈴木 正樹(Masaki Suzuki) ◼ 在住:愛知県 ◼ 職業:フリーランスエンジニア(2022/08まで) 株式会社DeNA(2022/09から) ◼ 業務:サーバー運用・監視、およびクラウド(主にAWS)バックエンド ◼ 技術: • AWS(特にLambda, DynamoDB, S3, CloudWatch, SNS, SQS, Chatbot), その他サーバーレスバックエンド全般 • Infrastructure as Code(Serverless Framework, AWS CDK, Terraform), CI/CD(GitHub Actions) etc. • TypeScript, JavaScript(Node.js), Jest, bash, Perl(少し) ◼ SNS: • @makky12 (SUZUKI Masaki@クラウドエンジニア) • https://github.com/smt7174/ • http://makky12.hatenablog.com/ 3

Slide 4

Slide 4 text

注意事項 ◼ 今回の発表資料・発言内容は、個人の見解になります • 私が過去に業務で使用した経験をもとに記載しています • 所属企業、及びその方針・見解などとは一切無関係です 4

Slide 5

Slide 5 text

Rest Client

Slide 6

Slide 6 text

Rest Client ◼ VS CodeからWeb APIのリクエスト送信が可能 • 名前に「Rest」とあるが、GraphQL APIも実行可能 ◼ 準備・操作が簡単 • リクエスト定義(url, headerなど)をテキストベースで書くだけ • POSTなどの場合、BodyをJSONで定義 • あとはCtrl+Alt+Rでリクエスト送信すれば、レスポンスが表示される ◼ Postman風にGUIで設定したい場合は「Thunder Client」が良いみたい • https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder- client ◼ URL: https://marketplace.visualstudio.com/items?itemName=humao.r est-client 6

Slide 7

Slide 7 text

スクリーンショット(Rest Client) 7

Slide 8

Slide 8 text

Git Graph/GitLens

Slide 9

Slide 9 text

Git Graph/GitLens ◼ Git Graph:リポジトリ内のブランチの状態を樹形図グラフで表示 • checkout, merge, commitなど • 樹形図グラフからもブランチの操作が可能(checkout, cherry pick, add tagなど) • リポジトリの状況を確認するのに便利 ◼ GitLens:VS CodeでのGitユーティリティツール • 各種ビューの一覧表示(変更履歴、コミット、ブランチ… etc) • ファイル上で変更履歴(更新日/更新者/コミットメッセージなど)を確認できる • ブランチなど、各種単位でのファイル比較(diff)が可能 • その他にも数多くの機能(詳細は公式ページを参照) ◼ URLは以下 • https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph • https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens 9

Slide 10

Slide 10 text

スクリーンショット(Git Graph&GitLens) 10

Slide 11

Slide 11 text

Draw.io Integration(+cfn-diagram)

Slide 12

Slide 12 text

Draw.io Integration(+cfn-diagram) ◼ Draw.ioをVS Codeで扱える拡張機能 • Draw.ioはよくフロー図やアーキテクチャ図を記載するのに利用される • (例) 処理・データの流れ、各オブジェクト・リソース間の依存関係など • Draw.io Integrationは、Draw.ioをVS Code上で扱うことができる拡張機能 • 作成したフロー図やアーキテクチャ図を画像で出力できる(*.png, *.jpg, *.svgなど) ◼ cfn-diagram(npmモジュール)と組み合わせて、CloudFormationテン プレートのリソース&依存関係をプレビュー可能 • CloudFormation(以下「Cfn」)テンプレートのプレビューがVS Codeだけで可能に • 当時はCfnプレビュー機能がなかった。(今はあるけど、個人的にはイマイチな感じ…) • AWS Application Composerの使い勝手次第で、お役御免になるかも…(現在はプレビュー版) ◼ URLは以下 • https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio 12

Slide 13

Slide 13 text

スクリーンショット(Draw.io Integration) 13

Slide 14

Slide 14 text

その他拡張機能一覧

Slide 15

Slide 15 text

その他拡張機能一覧 15 名前 機能 用途 Live Share 複数ユーザー間で同一のソースを編集し たり、チャットでやり取りしたりできる ・ペアプロ・モブプロなど ・Web MTGツール(Google Meet, Zoom など)の画面共有だと見づらい…という場 合 Remote SSH VS Code上で(コマンド入力せずに)リモー トホストに接続したり、リモートホストの ファイルをそのままVS Codeで編集でき る ・リモートの(仮想)サーバー・コンテナに開 発環境がある場合の接続に(=接続後、そ のままVS Codeで開発できる) ・リモートの有用環境(ホスト・コンテナ)の 運用管理に(設定ファイルなどをVS Code で編集したい…など) Setting Sync 複数PC間でVS Code拡張機能・設定の 同期を取れる ※「設定同期」はVS Codeが公式でサ ポートしたので、出番は減ってくるかも… ・複数PCを所持している場合の環境設定 &環境統一 ・チームで環境統一する&環境構築の簡 略化

Slide 16

Slide 16 text

告知

Slide 17

Slide 17 text

YAPC::Kyoto 2023で登壇します ◼ Japan Perl Association主催のYAPC::Kyoto 2023で登壇します • 日時・場所:3/19(日) 京都リサーチパーク ◼ EC2でのアプリ運用における、ログによるアプリ監視についてお話しします • 主にCloudWatchやCloudWatchエージェントについて話します • CloudWatch Metrics Streamsについても少し話すかも(クロスアカウント対応) ◼ 公式HP: https://yapcjapan.org/2023kyoto/ 17

Slide 18

Slide 18 text

ご清聴ありがとうございました 以上です