如何通过FastAPI静态部署React应用？路径匹配问题求助

方案一：修改React构建配置（推荐） #

React默认构建后资源路径为根路径/assets/...，但你的FastAPI将静态文件挂载在/static路径下，导致资源请求不匹配。只需调整React构建配置，让生成的资源路径带上/static前缀：

• 在React项目的package.json中添加homepage字段：

  {
    "homepage": "/static"
  }
  

• 重新执行npm run build，将新构建产物替换到FastAPI项目的static文件夹。此时index.html中的资源路径会变为/static/assets/index-lATvXaZG.js，可正确匹配FastAPI的静态资源路由。

方案二：调整FastAPI静态资源挂载配置 #

若不想改动React配置，可修改FastAPI的静态挂载规则，让/assets请求直接指向static文件夹：

• 更新app.py代码如下：

  from fastapi import FastAPI
  from fastapi.staticfiles import StaticFiles
  from fastapi.responses import FileResponse
  
  app = FastAPI()
  
  # 将static文件夹挂载到根路径，同时启用html模式处理SPA路由
  app.mount("/", StaticFiles(directory="static", html=True), name="react")
  

  其中html=True参数会自动处理单页应用的路由跳转，访问根路径或其他路由时都会返回index.html，同时/assets/...的请求也能直接从static文件夹加载对应资源。

  注意：如果FastAPI还有其他API路由，需将静态挂载代码放在API路由定义之后，避免静态资源路由覆盖API请求。

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