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

2022/02/01(水) 19:30～20:30に開催された「TechFeed Experts Night#12 エンジニア向けエディタ最新動向！」における、私のセッション「サーバーレスWebアプリ開発＆運用で役立ったVS Code拡張機能」の発表資料です。

https://techfeed.io/events/techfeed-experts-night-12

#techfeed #techfeed_experts_night

Transcript

1. サーバーレスWebアプリ開発＆運用で役立ったVS Code拡張機能 Masaki Suzuki 2023/02/01 TechFeed Experts Night #12
2. アジェンダ 1. 自己紹介＆注意事項 2. Rest Client 3. Git Graph/GitLens 4. Draw.io Integration(+cfn-diagram) 5. その他拡張機能一覧 6. 告知 2
3. 自己紹介 ◼ 名前：鈴木 正樹(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
4. 注意事項 ◼ 今回の発表資料・発言内容は、個人の見解になります • 私が過去に業務で使用した経験をもとに記載しています • 所属企業、及びその方針・見解などとは一切無関係です 4
5. Rest Client
6. 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
7. スクリーンショット（Rest Client） 7
8. Git Graph/GitLens
9. 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
10. スクリーンショット(Git Graph&GitLens) 10
11. Draw.io Integration(+cfn-diagram)
12. 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
13. スクリーンショット(Draw.io Integration) 13
14. その他拡張機能一覧
15. その他拡張機能一覧 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を所持している場合の環境設定 ＆環境統一 ・チームで環境統一する＆環境構築の簡 略化
16. 告知
17. YAPC::Kyoto 2023で登壇します ◼ Japan Perl Association主催のYAPC::Kyoto 2023で登壇します • 日時・場所：3/19(日) 京都リサーチパーク ◼ EC2でのアプリ運用における、ログによるアプリ監視についてお話しします • 主にCloudWatchやCloudWatchエージェントについて話します • CloudWatch Metrics Streamsについても少し話すかも(クロスアカウント対応) ◼ 公式HP： https://yapcjapan.org/2023kyoto/ 17
18. ご清聴ありがとうございました 以上です