使用 Flask 加载打包后的 React 前端页面
最近在忙一个外包，因为大屏展示页面是用 React 写的（使用 create-react-app），甲方想访问后端控制页面的网址就能直接访问这个大屏展示，而不是前后端分离部署。
自己尝试了一下，还是遇到了点问题。
create-react-app 会将打包的结果放在项目根目录中的 build 文件夹，打包后的路径结构：
build directory structureSource- build - static - css - style.[hash].css - style.[hash].css.map - js - main.[hash].js - main.[hash].js.map - index.html - [more meta files]
create-react-app 打包的静态资源都放在了 static 路径下。比如打包后 index.html 中的一个链接：
index.html<link href="/static/css/2.0a6fdfd6.chunk.css" rel="stylesheet" />
浏览器解析后，会发出一个请求 GET /static/css/2.0a6fdfd6.chunk.css。
如果简单的添加一个路由返回 index.html 文件的话，就有以下的问题出现：
因为 Flask 本身就有 static_folder 的概念，所有请求 /static 路径的请求都会从配置的 static_folder 中读取文件并返回。
graph LR
A(Browser) -->|GET /index.html| app(Flask app)
A(Browser) -->|GET /static/css/style.css| app(Flask app)
app --> C{endpoints}
C -->|/index.html| view[Handled by `View` Function]
C -->|/static/\*| static[Load files from `static_folder`]
index.html 中请求的资源都会从 static_folder 中拉取，那你说把打包后的文件直接放在 static_folder 不就好了？
因为本身 static_folder 中就有一些后台页面需要的静态资源，也是按类型建立了文件夹：css/js 等，如果直接把 React 打包后的资源直接复制到 static_folder 中，那么不同的 js 文件都混杂在一起了。React 每次重新打包生成的 js 文件都不一样的话，每次更新起来还要把原来的删除再复制过去。
