如何配置Azure Function读取TypeScript生成的dist文件夹

已将运行正常的JavaScript Azure Function迁移至TypeScript，部署时已生成dist文件夹（通过Kudu确认存在且包含新代码），但Azure门户仍显示旧JS函数且看不到dist文件夹，需通过以下配置让Azure Function读取dist内的编译代码：

一、修改函数的function.json入口路径 #

每个TypeScript函数目录下的function.json，需将scriptFile字段指向dist文件夹内的编译后JS文件。以func_ts目录为例：

原function.json（指向TS源码）：

{
  "scriptFile": "./index.ts",
  // 其他配置项
}

修改为（指向dist内的编译产物）：

{
  "scriptFile": "../dist/func_ts/index.js",
  // 其他配置项
}

路径需根据实际文件夹层级调整，确保准确指向dist目录下的index.js文件。

二、优化tsconfig.json编译输出结构（可选） #

当前tsconfig.json的rootDir设为.，会导致dist下生成与源码完全一致的嵌套目录结构。若要简化输出结构，可调整配置：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "outDir": "./dist",
    "rootDir": "./func_ts", // 仅编译func_ts目录下的TS文件
    "sourceMap": true,
    "strict": true
  },
  "include": ["./func_ts/**/*.ts"], // 限定编译范围
  "exclude": ["dist", "node_modules"]
}

修改后，编译产物会直接输出到dist根目录，此时function.json的scriptFile可改为../dist/index.js。

三、确认部署管道的打包逻辑 #

当前部署管道已将funcs目录下的所有内容（包括dist）打包，需确保：

• npm run build命令在部署阶段正常执行，生成最新的dist文件
• 打包的zip文件包含完整的dist文件夹及编译产物

四、配置Function App的应用程序设置 #

在Azure门户进入目标Function App，依次打开配置 > 应用程序设置，添加或修改以下配置：

• FUNCTIONS_WORKER_RUNTIME: 设置为node（TypeScript编译后为JS，无需指定typescript）
• WEBSITE_RUN_FROM_PACKAGE: 设置为1（启用从zip包运行模式，避免文件覆盖问题）

五、验证部署结果 #

部署完成后：

1. 通过Kudu工具（访问https://<你的函数应用名称>.scm.azurewebsites.net/）查看site/wwwroot目录，确认dist文件夹存在且包含正确的编译文件
2. 在Azure门户的函数列表中刷新页面，确认函数已指向dist内的JS文件
3. 触发函数测试，验证执行的是最新的TypeScript编译代码

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