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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  5. 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 full-size slide

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

    View full-size slide

  7. Git Graph/GitLens

    View full-size slide

  8. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 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 full-size slide

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

    View full-size slide

  13. その他拡張機能一覧

    View full-size slide

  14. その他拡張機能一覧
    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 full-size slide

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

    View full-size slide

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

    View full-size slide