設定
単にコードだけじゃなくて、AWSの各リソースと連携させてローカルで開発したい。開発者はそう考えます。最初はLambda関数のコンソールから書いてましたが、なんかデバッグがめんどくさい。
そこで、ちょっと調べたらCloud9ができると知り調査しました。……webの情報が古い……どうやっても存在するリソースが表示されない。使い方がもう一歩わからん。
AWS ToolKitを調べていたらVScodeでも同じようなことができるじゃないですか。そこで、ちょこちょこっと設定してみたらなんかできた。Cloud9諦めてVScodeをやることにしました。
まず。VScodeダウンロードします。初歩的すぎるので説明しません。起動します。
次にVScodeのマーケットプレイスからDockerをインストールします。なお、私の場合Docker DeskTopを入れていたので競合した。Docker DeskTopを再インストールし、VScodeの方のDockerを無効化→有効化してうまくいきました。（あ、WindowsなのですでにWSL2有効にしていました）左端のDockerアイコンが増えます。
なんでDocker入れるのだろうと思っていたら、ローカルで開発するためだそうです。 正直、コンテナを使いたければ使えば良いというスタンスのようなので、Lambda開発には要らないです。私はCloudFrontーAPI-Gatewayーlambdaという構成でしか動かない物を作っていたので、ローカル実行すると必ずエラーとなり、そういうわけでDocker DeskTopとか要らなかったです。実行はアップロードしてURL叩いてCloudWatchのログを見るの繰り返しでデバッグ。httpヘッダーを調整しながら実行だと仕方ありません。
と、左下の青の部分をクリックして、接続をCドライブからWSLに切り換えます。以後、ファイルはWindows環境ではなく、Linux環境のディレクトリ内で保存されるようになります。
次に、VScodeのマーケットプレイスからAWS ToolKitをインストール。すると、左端のアイコンにAWS ToolKitアイコンが増えます。
AWSのユーザーのアクセスキーとシークレットアクセスキーを登録しました。シングルサインインのURLでもいいです。
AWS Explorer:View,modify,and deploy AWS Resourcesを選択します。
表示された画面を下にスクロールすると、SSOかアクセスキーの登録画面が出ます。どちらかで設定してください。
Open resource Explorerをクリックするとリソースが表示されます。
VScodeの日本語化や、開発言語の補助機能はそれぞれ別にいれてください。
それほど難しくないでしょう、これ。単にインストールするだけですから。
左下にAWSとか書いてあるアイコンを押す。するとAWS ToolKitの画面になります。EXPLORERの行をみると、右端に…があるので押してください。
すると、コマンドが選択できます。
Explorerの画面で、API GgatewayやLambdaを右クリックで出てくる「Invoke on AWS」で開いた画面で、実行させたりできます。またresourceからDynamoDBなど操作（ただし、設定ファイル）できます。
編集方法
前述はSAMでlambda関数とAPI-Gatewayを生成するのではなく、手で、lambda関数とAPI-Gatewayを作ってコードを作成する方法です。SAMはちょっと敷居高いのでいつか書きます。
まず、VSCode左端にあるAWSのアイコンをクリックしてリソースを表示します。
お目当ての関数の上で右クリックすると、メニューが出ます。downloadを選択すると、現在あるはずのindex.mjsがWSLに落ちてきます。下部にあるコンソール（無ければ最上部のメニュー一覧から表示させましょう）で、ファイルを確認してください。
プログラムを作ります。
終わったら、また同様に（上図参考）upload lambdaでアップロードします。あ、もちろんファイルは保存しておいてくださいね。
ZIPとディレクトリが選べますが、index.mjsだけ上げたいのならディレクトリで。
次にNoとYesが出ます。単にアップロードしたいだけならNoで。YesはSAMが関係しているようです。
あとは、保存先（ローカルのLinux環境に）を選んでください。こっちは、アップロードじゃなくて、保存です。OKを押す。
なんか間違って、ファイルが多重の入れ子になっているときは、上部のディレクトリ部分をクリックすると同階層のディレクトリやファイルがでますので、それで指定してください。下図参照。
デバッグ
デバッグ方法は、3つの設定ファイルを書かないといけません。後述のようにInvokeで実行できますが、ブレークポイント設定したローカルファイル通る訳じゃないので、URL叩くなり、Invokeするなりした結果を反映して、ローカルファイルをデバッグするという方法になります。
まず、debug.mjs(Node.js18？以降はmjs V3はこれです）
import { handler } from '/home/aaa/aws/main/index.mjs';
handler();
相対パスで書くとむやみに悩むので絶対パスで書いてます。aaaはユーザーディレクトリで、mainはlambda関数の名前とします。
場所はmainディレクトリの一個上とします。
次にlaunch.jsonを書きます。場所は.vscodeの下です。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/debug.mjs" // debug.jsにしておく
}
]
}
ワークスペース作ったのもはや昔日のことなので覚えてません。このままでも良いかもしれないし、絶対パスで書いても良いでしょう。
上記を保存して、ブレークポイントを設定し、ステップ実行します。あれれ、入力が空だと言ってエラーになります。ローカルだと入力指定はどうするんだろう。
lambdaとかAPI-GatewayとかInvokeで実行できますけど、あくまでもAWS内のlambda関数の実行なので、ブレークポイントとか通らないんですよね。ローカル実行じゃない。
なんとかならんものか
ChatGPTに聞いてみたところ、launch.jsonに”args”キーを入れれば良さそう。
以下サンプル。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Lambda Function",
"program": "${workspaceFolder}/lambda_function.js", // Lambda 関数のパス
"args": ["${workspaceFolder}/event.json"], // イベントデータを含むファイルのパス
"env": {
"AWS_REGION": "us-east-1", // 環境変数（必要に応じて設定）
// その他の環境変数
},
"skipFiles": ["<node_internals>/**"]
}
]
}
あ、ChatGPTコメント入れてますがJSONファイルはコメント書けませんので削除してください。
入力のevent.jsonは、以下の様な感じで、JSONファイルです。
{
"key1": "value1",
"key2": "value2",
"key3": "value3"
}
まあ、値はAPI-Gatewayから渡されるマッピングテンプレートを反映したキーとなりますので、CloudWatchのログにconsole.log(‘Event:’, JSON.stringify(event)); 入れて、出力された物をそのまま入れればいいでしょう？ 多分。
index.mjsがデバッグできない件、ようやく解決しました。
左端の「実行とデバッグ」クリックして、▷の横をクリック、プルダウンから「構成（hogehoge）の追加」を選択すると、launch.jsonが自動で作られます。
それをそのまま使えば良いです。ちなみにlaunch.jsonのパスはこんな感じ。
やっとデバッグできそうだー
で、AmazonもAIチャット出してきたので（Amazon Q 2023/12/11のところ英語版のみ）今後期待できるかも知れません。コード生成ならCode Whispererで、こっちは日本語に対応してくれるようですが、バージニアリージョンのみとか。https://zenn.dev/yuta28/articles/codewhisperer-tutorial まだまだ改良の余地があるようです。
コメント