Flask 后端的 GAE app.yaml 设置与 React 和 Flask 前端一起在单个部署中

Question

我正在尝试在 GAE 上部署一个 Flask 应用程序，该应用程序提供一个内置的 React 前端以及 Flask 前端和后端路由，在多个蓝图中定义。

在本地，一切正常。在 Flask 应用程序中，我使用 React 的构建目录作为静态文件夹，并为大多数前端路由返回 React index.html 文件。

这是我的结构的基本概述：

- main.py
- build
     - index.html
     - static
          - css
          - js
- api
     - auth.py
     - templates
     - static

Flask 上的索引路由捕获 URL，有时通过 id 参数化，并将这些请求发送到 React 前端：

@views.route('/', defaults={'path': '', 'id': ''})
@views.route('/<string:path>', defaults={'id': ''})  # Match all strings
@views.route('/<path:path>', defaults={'id': ''})  # Match all paths
@views.route('/<string:path>/<string:id>')  # Match URLs that contain IDs
def index(path, id):
    return app.send_static_file('index.html')

但是，身份验证 UI 不在 React 前端。它需要由 Flask 单独提供。为了处理这些请求，身份验证蓝图会切换 url 前缀和静态文件夹。

authentication = Blueprint(
    'authentication', 
    __name__,
    url_prefix='/auth',
    static_folder='static',
    template_folder='templates'
)

@authentication.route('/admin_settings', methods=['GET'])
@login_required
def admin_settings():
    return render_template('admin_settings.html')

同样，在本地运行时，此设置运行良好。但是在部署到 GAE 时，我遇到了许多不同的错误，这些错误源于我如何构建 app.yaml 设置，包括 502、404 和无休止的待处理网络请求，这显然是工作人员超时的结果。

应该如何为此设置编写 GAE 上的 app.yaml 文件？我最成功的是使用以下 app.yaml 文件，它至少加载了 React 前端（尽管所有其他路由似乎都触发了超时）：

# app.yaml
runtime: python39
entrypoint: gunicorn -b :$PORT main:app

# handlers
handlers:
  - url: /.*
    script: main.app

Answer 1

您应该从您的应用程序中将您的app.yaml 配置为serve your static files 并使用您的应用程序的路由。例如：

runtime: python39
entrypoint: gunicorn -b :$PORT main:app

# handlers
handlers:
  - url: /api
    static_dir: api
  - url: /api/static
    static_dir: static
  - url: /.*
    script: auto