サーバーレスWebアプリ開発＆運用で役立ったVS Code拡張機能

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

View Slide

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

View Slide

自己紹介
◼ 名前：鈴木正樹(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

View Slide

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

View Slide

Rest Client

View Slide

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

View Slide

スクリーンショット（Rest Client）
7

View Slide

Git Graph/GitLens

View Slide

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

View Slide

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

View Slide

Draw.io Integration(+cfn-diagram)

View Slide

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

View Slide

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

View Slide

その他拡張機能一覧

View Slide

その他拡張機能一覧
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を所持している場合の環境設定
＆環境統一
・チームで環境統一する＆環境構築の簡
略化

View Slide

告知

View Slide

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

View Slide

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

View Slide

サーバーレスWebアプリ開発＆運用で役立ったVS Code拡張機能

サーバーレスWebアプリ開発＆運用で役立ったVS Code拡張機能

Makky12

More Decks by Makky12

Other Decks in Technology

Featured

Transcript