Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Makky12
February 01, 2023

サーバーレス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

Makky12

February 01, 2023
Tweet

More Decks by Makky12

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  5. Rest Client

    View Slide

  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

    View Slide

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

    View Slide

  8. Git Graph/GitLens

    View Slide

  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

    View Slide

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

    View Slide

  11. Draw.io Integration(+cfn-diagram)

    View Slide

  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

    View Slide

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

    View Slide

  14. その他拡張機能一覧

    View Slide

  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を所持している場合の環境設定
    &環境統一
    ・チームで環境統一する&環境構築の簡
    略化

    View Slide

  16. 告知

    View Slide

  17. 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

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

    View Slide