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

Question

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

在本地，一切正常。在 Flask 应用程序中，我使用 React 的构建目录作为静态文件夹，return 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 设置，包括 502s、404s 和无休止的挂起网络请求，这显然是工作人员超时的结果。

应该如何为此设置编写 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

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

GAE app.yaml settings for Flask backend with React and Flask frontend together on single deployment

python

google-app-engine

nginx

flask

reactjs