【VSCode】pnpmで管理しているAzure Functionsプロジェクトをデプロイする

JavaScript,環境構築

こんにちは、しきゆらです。
今回は、タイトルの通り pnpm で管理している Azure Functions プロジェクトをデプロイできるように設定していきます。

以前、VSCode の Azure Functions 拡張機能で実行される npm コマンドを yarn に置き換える記事を書きました。

その後、pnpm を主に使うようになったので、改めて pnpm で Azure Functions をデプロイできるよう設定していきます。
pnpm をインストールする手順はこちら。

VSCode の tasks.json

Azure Functions の拡張機能は VSCode のタスク実行機能を使っています。
そのため、まずは tasks.json について簡単にまとめておきます。

VSCode には、よく使うコマンド実行等を VSCode のコマンドパレットから実行する機能があります。
そのコマンド実行の設定を行うのがtasks.jsonになります。

VSCode の拡張機能で Azure Functions プロジェクトを作成した場合、tasks.jsonは以下の内容で作成されます。

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "func",
      "label": "func: host start",
      "command": "host start",
      "problemMatcher": "$func-node-watch",
      "isBackground": true,
      "dependsOn": "npm watch (functions)"
    },
    {
      "type": "shell",
      "label": "npm build (functions)",
      "command": "npm run build",
      "dependsOn": "npm clean (functions)",
      "problemMatcher": "$tsc"
    },
    {
      "type": "shell",
      "label": "npm watch (functions)",
      "command": "npm run watch",
      "dependsOn": "npm clean (functions)",
      "problemMatcher": "$tsc-watch",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "isBackground": true
    },
    {
      "type": "shell",
      "label": "npm install (functions)",
      "command": "npm install"
    },
    {
      "type": "shell",
      "label": "npm prune (functions)",
      "command": "npm prune --production",
      "dependsOn": "npm build (functions)",
      "problemMatcher": []
    },
    {
      "type": "shell",
      "label": "npm clean (functions)",
      "command": "npm run clean",
      "dependsOn": "npm install (functions)"
    }
  ]
}

要素としては、version, tasksの2項目から成り立っています。
本命のtasksの基本要素は以下の通り。

...
    {
      "type": "shell",
      "label": "npm install (functions)",
      "command": "npm install"
    },
...
  • type: shell or process
    • 実行するタスクのタイプ
    • 拡張タイプも可能
  • label: 任意のタスク名
  • command: 実行したいコマンド

この3つがあれば、タスクの定義は可能です。
他にも要素がありますが、よく使うものは以下でしょうか。

  • dependsOn: 他タスクのラベル名
    • そのタスクの処理前に、指定したタスクを実行する
  • args
    • commandの引数を指定する
    • commandに1行で書くことも可能だが、複数指定する場合に便利

他の要素や設定値については、公式サイトをご覧ください。

tasks.json のスキーマについてはこちら。

Azure Functions の拡張機能

VSCode で開発している場合は、この拡張機能を使っている方が多いかと思います。
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions

公式ドキュメントや、過去の記事でも紹介しています。

Azure Functions 拡張機能からプロジェクトのデプロイが可能です。
この前後で VSCode で定義したタスクを実行することが可能です。
以下の設定項目に、VSCode のタスクラベルを指定することで、デプロイの前後で任意のタスクを差し込むことができます。

{
  "azureFunctions.postDeployTask": "label名",
  "azureFunctions.preDeployTask": "label名"
}

以下で、実際にタスクを定義してみます。

デプロイタスクを修正する

ここでは、普段は pnpm でパッケージを管理していることを想定しています。

規定ではデプロイ時に npm でパッケージをインストールしたりビルドしたりしています。
これらを pnpm に置き換えてみたのですがうまく関数が Azure Functions に認識されませんでした。
そこで、以下の流れでデプロイするようにいきます。

  1. pnpm で管理している node_modules フォルダを削除する (新規タスクを追加)
  2. npm でパッケージを入れ直す (既存タスク)
  3. ビルド後に node prune で不要パッケージを除外する (既存タスク)
  4. デプロイ (Azure functions 拡張機能)
  5. デプロイ後、node_modules や package-lock.json を削除し pnpm でインストールし直す (新規タスクを追加)

では、タスクを追加・修正していきます。

{

  "version": "2.0.0",
  "tasks": [
    {
      "type": "func",
      "label": "func: host start",
      "command": "host start",
      "problemMatcher": "$func-node-watch",
      "isBackground": true,
      "dependsOn": "npm watch (functions)"
    },
    {
      "type": "shell",
      "label": "npm build (functions)",
      "command": "npm run build",
      "dependsOn": "npm clean (functions)",
      "problemMatcher": "$tsc"
    },
    {
      "type": "shell",
      "label": "npm watch (functions)",
      "command": "npm run watch",
      "dependsOn": "npm clean (functions)",
      "problemMatcher": "$tsc-watch",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "isBackground": true
    },
    {
      "type": "shell",
      "label": "npm install (functions)",
      "command": "npm install",
      "dependsOn": "delete node_modules" // 追記部分
    },
    {
      "type": "shell",
      "label": "npm prune (functions)",
      "command": "npm prune --production",
      "dependsOn": "npm build (functions)",
      "problemMatcher": []
    },
    {
      "type": "shell",
      "label": "npm clean (functions)",
      "command": "npm run clean",
      "dependsOn": "npm install (functions)"
    },
    // 以下から追加したタスク
    {
      "type": "shell",
      "label": "delete node_modules",
      "command": "rm -rf node_modules package-lock.json",
    },
    {
      "type": "shell",
      "label": "pnpm install",
      "command": "pnpm install",
      "dependsOn": "delete node_modules",
    }
  ]
}

node_modules を削除するタスクと、pnpm でパッケージをインストールするタスクを追加しました。
合わせて、npm installの前に node_modules を削除するようにdependsOnにdelete node_modulesを指定しています。

これで、普段の開発では pnpm を使い、デプロイ時のみ npm を使う、ということが実現できました。

まとめ

今回は、以前記事に書いた pnpm でプロジェクトを管理している場合、Azure Functions へデプロイする時に不具合があったので、VSCode のタスクを定義して回避してみました。
ここではシンプルに、デプロイ時のみ npm を使うように指定することで、普段使うパッケージマネージャを変更せずに問題を回避できました。

もし、他にこういうタスクを追加している、とかこういうのをタスクに設定しておくと便利、などあればコメントから教えていただければ幸いです。

今回は、ここまで
おわり

Posted by しきゆら