Cloud Run functions × TypeScript 開発をしよう！【開発環境：VSCodeでデバッグできるようにする】

はじめに

この章では以下について説明します。

• Node.jsのデバッグ方法
• VSCodeで簡単にCloud Run functionsの関数をデバッグする方法

---

Cloud Run functionsの開発効率を上げるために、デバッグ環境を構築しましょう。
ディレクトリ構成は以下のようになります。

├── node_modules
├── package-lock.json
├── package.json
├── src
│   └── index.ts
└── tsconfig.json

Functions Frameworkを使って、Node.js関数をデバッグ・クライアント付きで起動する

Node.js は --inspect オプションをつけて起動するとデバッグ・クライアントをリッスンするようになります。デフォルトで 127.0.0.1:9229 で待ち受けます。
Functions frameworkを使ってNode.js関数をデバッガー付きで起動させましょう。

デバッガー起動

node --inspect functions-framework --target=helloGET

本記事ではTSを使用しているので、一つ前の記事で紹介した tsx を使って起動するようにします。

tsxで起動

tsx --inspect node_modules/.bin/functions-framework --target=helloGET --source=./src/index.ts

package.json の debug コマンドに指定しておきます。

package.json / debug

  "scripts": {
    "debug": "tsx --inspect node_modules/.bin/functions-framework --target=helloGET --source=./src/index.ts"
  },

デバッガーと一緒にCloud Run functions環境を起動しましょう。

$ npm run debug                       

> advent-calendar-2024@1.0.0 debug
> tsx --inspect node_modules/.bin/functions-framework --target=helloGET --source=./src/index.ts

Debugger listening on ws://127.0.0.1:9229/4aceb250-aa46-4b39-b691-61000d4ec171
For help, see: https://nodejs.org/en/docs/inspector
Serving function...
Function: helloGET
Signature type: http
URL: http://localhost:8080/

Debugger listening on ws://127.0.0.1:9229/4aceb250-aa46-4b39-b691-61000d4ec171 と表示されていたら、デバッガーが起動している状態です。

VSCodeで起動しているデバッガープロセスをアタッチする

初期状態ではVSCodeのデバッグ機能は使えるようになっていません。

使えるようにするには .vscode ディレクトリを作った上でそのディレクトリに launch.json を作成して以下のように記述しましょう。

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "attach",
        "name": "Attach to Cloud Run functions",
        "address": "localhost",
        "port": 9229,
        "localRoot": "${workspaceFolder}",
        "resolveSourceMapLocations": [
          "${workspaceFolder}/**",
          "!**/node_modules/**"
        ],
      }
    ]
  }

するとUIが変わります。「▶️」のボタンを押すとVSCodeが起動しているデバッガープロセスをアタッチできるようになります。

エディタの余白にブレークポイントを設定して、curl でローカル エンドポイントを呼び出すと、コードは指定されたブレークポイントで実行を一時停止します。

これにより現在の変数の割り当ての確認やコールスタックの調査など、さまざまなことができるようになりました。詳しいデバッガーの使い方は参考文献にあるVSCodeの記事を参考にしてください。
これで良きローカル開発環境を構築できたことだと思います。

今までの話を踏まえた上で最強のCloud Run functions開発環境の起動コマンドを紹介します。

• ホットリロード
• デバッグ機能
• デバッガープロセスの再起動
• TSの直接実行

が可能になります。これを使わないと（僕は）かなり開発効率が落ちます。

マジ最強

tsx --watch --inspect node_modules/.bin/functions-framework --target=helloGET --source=./src/index.ts

おわりに

複数回にわたって超丁寧に快適な開発環境の構築について説明してきました。次回はビルドツールまわりについて説明していきます。

参考文献