已部署构建后ReactJS应用至Azure Function，如何正常运行？

我之前也碰到过一模一样的问题——把React构建好的静态文件扔到Azure Function的/wwwroot里，访问时要么404要么资源加载异常。下面是我踩坑后总结的有效解决步骤，亲测可行：

1. 新建一个专门处理静态文件的Http触发器 #

Azure Function本身是为函数逻辑设计的，不会自动帮你托管静态资源，所以得先搭一个入口来承接所有HTTP请求：

• 在你的Function App里创建一个Http触发器（比如命名为StaticFileServer）
• 修改触发器的function.json配置：
  • 设置route为{*route}，这样能捕获所有路径的请求（包括React的客户端路由）
  • 把authLevel设为anonymous（如果不需要权限验证），避免访问时被要求输入密钥
    示例配置：

  {
    "bindings": [
      {
        "authLevel": "anonymous",
        "type": "httpTrigger",
        "direction": "in",
        "name": "req",
        "methods": ["get"],
        "route": "{*route}"
      },
      {
        "type": "http",
        "direction": "out",
        "name": "res"
      }
    ]
  }
  

2. 编写触发器逻辑，返回静态文件并处理React路由 #

根据你使用的语言编写函数逻辑，核心是读取/wwwroot下的文件、返回正确的MIME类型，同时处理React单页应用的路由问题（刷新非根路径时返回index.html）。

以Node.js为例： #

const fs = require('fs');
const path = require('path');
const mime = require('mime-types');

module.exports = async function (context, req) {
    // 定位到/wwwroot目录
    const rootDir = path.join(__dirname, '..');
    let targetPath = req.params.route 
      ? path.join(rootDir, req.params.route) 
      : path.join(rootDir, 'index.html');

    // 如果请求的是目录，默认返回目录下的index.html
    if (fs.existsSync(targetPath) && fs.statSync(targetPath).isDirectory()) {
        targetPath = path.join(targetPath, 'index.html');
    }

    // 如果文件不存在，返回根目录的index.html（处理React客户端路由）
    if (!fs.existsSync(targetPath)) {
        targetPath = path.join(rootDir, 'index.html');
    }

    // 读取文件并设置正确的Content-Type
    const fileContent = fs.readFileSync(targetPath);
    const contentType = mime.lookup(targetPath) || 'text/html';
    
    context.res = {
        status: 200,
        headers: { 'Content-Type': contentType },
        body: fileContent
    };
};

注：需要先在本地运行npm install mime-types安装依赖，再一起部署到Azure。

以C#为例： #

using System;
using System.IO;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.Extensions.Logging;

namespace StaticFileFunction
{
    public static class StaticFileServer
    {
        [FunctionName("StaticFileServer")]
        public static IActionResult Run(
            [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "{*route}")] HttpRequest req,
            string route,
            ILogger log)
        {
            var rootPath = Path.Combine(Environment.CurrentDirectory, "..");
            string targetPath = string.IsNullOrEmpty(route) 
              ? Path.Combine(rootPath, "index.html") 
              : Path.Combine(rootPath, route);

            // 处理目录请求
            if (Directory.Exists(targetPath))
            {
                targetPath = Path.Combine(targetPath, "index.html");
            }
            // 处理不存在的文件（React路由 fallback）
            if (!File.Exists(targetPath))
            {
                targetPath = Path.Combine(rootPath, "index.html");
            }

            // 设置MIME类型
            var contentType = GetFileContentType(targetPath);
            var fileBytes = File.ReadAllBytes(targetPath);

            return new FileContentResult(fileBytes, contentType);
        }

        private static string GetFileContentType(string filePath)
        {
            var extension = Path.GetExtension(filePath).ToLowerInvariant();
            return extension switch
            {
                ".html" => "text/html",
                ".css" => "text/css",
                ".js" => "application/javascript",
                ".png" => "image/png",
                ".jpg" => "image/jpeg",
                _ => "application/octet-stream"
            };
        }
    }
}

3. 确认静态文件的部署结构 #

确保React npm run build生成的所有文件（包括index.html、static文件夹）都正确放到了Azure Function的/wwwroot目录下，结构应该是这样：

/wwwroot
├── index.html
├── static/
│   ├── css/
│   ├── js/
│   └── media/
└── StaticFileServer/  # 你的触发器函数文件夹
    ├── index.js（或.cs）
    └── function.json

4. 配置React的路由前缀 #

如果你用的是BrowserRouter，需要设置basename来匹配触发器的路由路径，比如你的触发器访问地址是https://your-function-app.azurewebsites.net/api/StaticFileServer，那么React路由配置要改成：

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter basename="/api/StaticFileServer">
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

5. 本地测试排查问题 #

先用Azure Functions Core Tools在本地运行函数，访问http://localhost:7071/api/StaticFileServer，验证页面是否能正常加载、刷新路由是否报错。本地没问题再部署到Azure，能快速排除代码逻辑问题。

6. 检查Azure平台配置 #

• 如果用Node.js，确认Function App的WEBSITE_NODE_DEFAULT_VERSION设置和本地开发版本一致（比如18.x）
• 查看Azure Portal里的日志流（Function App -> 监测 -> 日志流），排查是否有文件找不到、权限不足之类的报错

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