如何让从JavaScript迁移到TypeScript的Azure Function成功构建？

我有一个最初用JavaScript创建并部署的Azure Function，已经在本地迁移为TypeScript且能正常运行。但通过GitHub集成（构建提供商：App Service Build Service）部署时，项目未完成构建，通过Kudu检查发现wwwroot目录下缺少dist文件夹。

项目配置文件 #

package.json #

{
  "name": "backup-function",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tsc --project tsconfig.build.json",
    "watch": "tsc -w",
    "prestart": "npm run build",
    "start": "func start --verbose",
    "test": "jest"
  },
  "engine": {
    "node": ">=16.0.0"
  },
  "dependencies": {
    "@azure/storage-blob": "^12.1.0",
    "durable-functions": "^2.1.0",
    ...
  },
  "devDependencies": {
    "@azure/functions": "^3.5.0",
    "@babel/preset-typescript": "^7.18.6",
    "@types/node": "16.x",
    "azure-functions-core-tools": "^4.0.4915",
    "jest": "^29.3.1",
    "ts-jest": "^29.0.3",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
    ...
  }
}

host.json #

{
  "version": "2.0",
  "extensions": {
    "durableTask": {
      "hubName": "backup"
    }
  },
  "extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[3.*, 4.0.0)"
  },
  "functionTimeout": "00:10:00",
  "logging": {
    "applicationInsights": {
      "samplingSettings": {
        "isEnabled": true,
        "maxTelemetryItemsPerSecond": 100
      }
    }
  }
}

解决步骤 #

• 强制触发构建命令
  App Service Build Service默认仅执行npm install，不会自动运行编译命令。在项目根目录创建.deployment文件，内容如下：

  [config]
  command = npm run build
  

• 确认TypeScript编译配置
  检查tsconfig.build.json，确保outDir设置为dist，且包含所有需要编译的源文件：

  {
    "compilerOptions": {
      "outDir": "./dist",
      "rootDir": "./src",
      "target": "ES2020",
      "module": "commonjs",
      "strict": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"]
  }
  

• 确保安装开发依赖
  TypeScript属于开发依赖，部署时默认可能不会安装。可以通过两种方式解决：

  • 修改package.json的build命令，临时设置开发环境：

    "build": "NODE_ENV=development tsc --project tsconfig.build.json"
    

  • 在Azure Function应用的配置中添加应用设置SCM_DO_BUILD_DURING_DEPLOYMENT=true，确保完整执行构建流程。

• 排查构建日志
  登录Kudu控制台（https://<你的函数应用名称>.scm.azurewebsites.net/），查看部署日志，确认是否存在编译错误或构建命令未执行的情况，针对性修复问题。

内容的提问来源于stack exchange，提问作者Gpack