使用 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 文件都不一样的话,每次更新起来还要把原来的删除再复制过去。