#vscodejp VS CodeでAWSを操作しよう Masaki Suzuki (DeNA Co., Ltd.) 2024/04/20 VS Code Conference 2024

#vscodejp アジェンダ 1. 自己紹介＆注意事項 2. 導入：AWSの操作方法について 3. 準備：AWS Toolkitのインストール 4. 機能紹介：re:Invent2023＆AI関連 5. 機能紹介：その他（AWS Explorer） 6. ユースケース 7. まとめ 2

#vscodejp 自己紹介 ◼ 名前： 鈴木 正樹 (Masaki Suzuki) ◼ 会社： 株式会社DeNA オープンプラットフォーム統括部 ◼ 職業： クラウドアーキテクト（AWS全般、特にサーバーレスバックエンド・IaC） ◼ 技術・その他： • AWS(特にLambda), その他サーバーレスバックエンド全般 • Infrastructure as Code(特にAWS CDK), CI/CD (GitHub Actions, AWS CodePipeline) etc • TypeScript, JavaScript(Node.js) • 好きなエディタはVS Code ◼ SNS： • @makky12 (SUZUKI Masaki＠クラウドエンジニア) • @makky12.bsky.social • https://github.com/smt7174/ • http://makky12.hatenablog.com/ 3

#vscodejp 注意事項 ◼ 今回の発表資料・発言内容は、すべて個人の見解になります • 所属企業、及びその方針・見解などとは一切無関係です ◼ VS Code バージョン1.88.1にて確認しています ◼ 本資料は、下記URLで公開しています • (本番ではここにURLを表示します) 4

#vscodejp 導入：AWSの操作方法について

#vscodejp みなさんに質問 6 普段、どんな方法でAWSを 操作してますか？

#vscodejp 予想される回答 7 • マネジメントコンソール • AWS CLI version2 多くの方は、上記2つを回答するのではないかと思います

#vscodejp 実は… 8 ◼ VS Codeからも、AWSを操作することが可能なんです！ ◼ 簡単な操作なら、VS Codeでサクッと完結させることが可能！ 上画像では、S3バケット内のjsonファイルをVS Codeで直接編集しています ◼ 知っている人も多いかもしれませんが… ここに 図 や テキスト を挿入します

#vscodejp VS Codeは、AWS開発と相性がいい 9 • AWSは、VS Code対応にかなり力を入れている • re:Invent 2023でも、Application ComposerのVS Code対応が発表 • ユーザーとしては非常にありがたい

#vscodejp VS Codeに対応しているサービス一覧 ◼ Amazon Q ◼ CodeWhisperer ◼ Application Composer ◼ CodeCatalyst 10 ◼ CloudWatch Logs ◼ Lambda ◼ S3 ◼ CloudFormation ◼ App Runner ◼ ECR ◼ ECS ◼ Step Functions etc..

#vscodejp 準備：AWS Toolkitのインストール

#vscodejp AWS Toolkitのインストール 12 • VS Code拡張機能「AWS Toolkit」をインストールする https://marketplace.visualstudio.com/items?itemName=AmazonWebServices .aws-toolkit-vscode • 事前準備はそれ（と認証）だけ

#vscodejp 認証方法 13 • IAM Identity Center(SSO) ※推奨 • AWS CLI クレデンシャル(アクセスキー＆シークレットアクセスキー) • AWS Builder ID • 外部プロセス • 上記4つの認証方法が存在する • 一部サービスで、特定の認証が必要なケースがある（詳細は次頁）

#vscodejp 認証方法によるサービスの使用可否（外部プロセスは除外） 14 ◼ ほとんどのサービスは、AWS CLIクレデンシャル認証で使用可能 ◼ 一部AI系サービスのみ、AWS Builder ID認証で使用可能 ◼ IAM Identity Center単体、あるいはAWS CLIクレデンシャルとAWS Builder IDの併用…というのが実際に使われるパターン（と思う） ここに 図 や テキスト を挿入します 認証方法 ほとんどのサービス (AWS Explorer) CodeWhisperer + Amazon Q, CodeCatalyst, IAM Identity Center 〇 〇 AWS CLI クレデンシャル 〇 × AWS Builder ID × 〇

#vscodejp 機能紹介：re:Invent2023＆AI関連

#vscodejp 紹介するサービス 16 • Amazon Q（プレビュー版） • CodeWhisperer • CodeCatalyst • Application Composer • Application Composer以外はAWS Builder ID認証で使用可能

#vscodejp Amazon Q（プレビュー版） 17 • プレビュー版だが、特に問題なく使用可能（専用アイコンが表示される） • 2月に追加された音声入力には未対応 • プレビュー版という点に注意（ただし、特に気になる点はない）

#vscodejp CodeWhisperer 18 ◼ これも問題なく使用可能 ◼ AWSサービス単体でAIによるコーディングが可能 ◼ 上の画像のコードはちょっとあれですが…

#vscodejp CodeCatalyst 19 • リポジトリクローン＆projectの開発環境作成は可能 • 初回のverify及びproject作成までは手動で行う必要があった • 「Remote SSH >= 0.74.0」のエラー（右上図）で動かなかった…

#vscodejp Application Composer 20 • re:Invent2023のKey NoteでVS Code対応が発表されたサービス • 問題なく使用可能で、もちろんCloudFormationへのデプロイも可能 • こういうビジュアライズ系ツールのVS Code対応は非常に嬉しい

#vscodejp 機能紹介：その他（AWS Explorer）

#vscodejp 紹介するサービス 22 • Step Functions • ECS・ECR • Lambda • S3（バケット＆フォルダ作成、ファイル編集） • AWS Explorerで使用するサービスはAWS CLIクレデンシャル認証で使用可能

#vscodejp Step Functions 23 • ステートマシン作成・編集・実行・ワークフロー表示などが可能 • AWS CDKで定義しているステートマシンのワークフロー表示も可能 • Application Composer同様、こういうツールのVS Code対応はありがたい

#vscodejp ECS・ECR 24 コマンド実行（ECS） ECS Exec同様、実行中のコンテナに対してコマンドを実行可能 ※ECS Execを有効にする必要がある インテリセンス機能（ECS） タスク定義ファイル(*.json)の編集でインテリセンス機能を利用可能 タスク定義ファイルの作成・編集時に役に立つ App Runner作成(ECR) 既存ECRリポジトリのイメージからApp Runnerを新規作成可能 検証などでサクッとApp Runnerを動かしたい際に役に立つ（※1） ※1：その他、リポジトリの新規作成・削除も可能

#vscodejp Lambda 25 • 関数の新規作成（SAMアプリケーションとして）・編集・実行・削除が可能 • VS Codeデバッガでのデバッグも可能（SAM CLIの設定が必要） • sam buildは事前に実行しておいた方が良い (invoke時にタイムアウト発生)

#vscodejp S3 26 • S3バケット＆フォルダの作成・削除、およびS3オブジェクトの編集・アップロード が可能 • 他のリソースでも多くはこの「新規作成・削除・参照が可能」というパターン （設定変更は不可）

#vscodejp ユースケース

#vscodejp ユースケース 28 AIサービス CodeWhispererでコード生成、Amazon Qチャットで質問＆回答…etc. AI使用が許可されている環境では非常に有用 フロー可視化 Application Composer, Step Functionsステートマシン作成…etc. フロー処理の作成・編集をローカル環境で完結できる 開発支援・コード補完 Lambdaのローカルデバッグ、ECSタスク定義ファイルのインテリセンス機能など VS Code(≒コードエディタ)ならではのメリット

#vscodejp まとめ

#vscodejp まとめ 30 • AWS Toolkitを使用する事で、AWSの一部機能をVS Codeから利用可能 • re:Invent 2023で発表があった一部機能をVS Codeで使用可能（※1） • これだけでOK！…とまではいかないが、有用な場面は結構ある • 使用したサービスへの課金は行われているので、使用しすぎには注意！（※2） ※1： CodeWhisperer, Amazon Q, Application Composerなど ※2： VS Code上で実行すると、拡張機能みたいな感覚でついつい無意識に 使ってしまうので

#vscodejp DeNA ENGINEERING DeNAのエンジニアの技術・文化・チーム等を伝えるポータルサイトです。 様々な技術発信や、カルチャーの紹介をしています。

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