Flask 使用 Flask 为使用 create-react-app 创建的前端提供服务

在本文中，我们将介绍如何使用 Flask 为使用 create-react-app 创建的前端应用提供服务。Flask 是一个用 Python 编写的轻量级 Web 框架，而 create-react-app 是一个用于快速搭建 React 应用的脚手架工具。通过将这两者结合起来，我们可以轻松地建立一个具有强大后端功能的全栈应用。

阅读更多：Flask 教程

创建 Flask 项目

首先，我们需要创建一个 Flask 项目。在命令行中执行以下命令来创建一个名为 “flask-react-app” 的新项目目录：

$ mkdir flask-react-app
$ cd flask-react-app

接下来，让我们创建一个虚拟环境并激活它：

$ python3 -m venv venv
$ source venv/bin/activate     # 在 Windows 上使用 "venv\Scripts\activate" 命令

然后，安装 Flask：

(venv) $ pip install Flask

创建 React 应用

在 Flask 项目目录下，我们可以使用 create-react-app 创建一个新的 React 应用：

(venv) $ npx create-react-app frontend

成功执行上述命令后，将会在项目目录中创建一个名为 “frontend” 的新文件夹，其中包含了 React 应用的初始文件和目录。

构建 React 应用

在开始构建 React 应用之前，我们需要确保在 Flask 项目根目录下创建一个名为 “static” 的文件夹。这个文件夹将用于存储 React 应用的构建文件。

切换到 “frontend” 目录并执行以下命令，将 React 应用构建为静态文件：

(venv) cd frontend
(venv) npm run build

上述命令将使用 React 的打包工具将项目构建为生产就绪的静态文件，并将这些文件放置在 “frontend/build” 目录中。

接下来，返回至 Flask 项目根目录并将构建后的文件夹复制到 “static” 目录下：

(venv) cd ..
(venv) cp -r frontend/build static

此时，我们已经将 React 应用构建完成并将它的静态文件放置在了 Flask 项目的 “static” 目录下。

创建 Flask 视图

在 Flask 项目根目录下创建一个名为 “app.py” 的 Python 文件，并在其中添加以下代码：

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(debug=True)

上述代码定义了一个名为 “index” 的 Flask 路由，该路由将使用 Flask 的 “render_template” 函数将 “static/index.html” 文件作为模板进行渲染。

运行 Flask 项目

现在，我们可以启动 Flask 项目并在浏览器中访问它了。在命令行中执行以下命令：

(venv) $ python app.py

Flask 项目将会在本地启动，并监听默认的 “http://127.0.0.1:5000/” 地址。

打开浏览器并访问该地址，您将会看到 React 应用在 Flask 项目中成功运行。

总结

通过将 Flask 和 create-react-app 结合起来，我们可以轻松地为 create-react-app 创建的前端应用提供服务。在本文中，我们介绍了如何创建 Flask 项目、创建 React 应用、构建 React 应用，并最终将其与 Flask 项目结合起来。希望本文能帮助您搭建起一个完整的全栈应用。