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

I am attempting to deploy a Flask app on GAE, which serves a built React frontend alongside Flask frontend and backend routes, defined in several blueprints.

Locally, everything works well. In the Flask app, I use React's build directory as the static folder and return the React index.html file for most of the frontend routes.

Here's a basic overview of my structure:

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

The index route on Flask catches URLs, sometimes parameterized by ids, and sends those requests to the React frontend:

@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')

However, the authentication UI is not in the React frontend. It needs to be served by Flask separately. To handle these requests, the authentication blueprint switches the url prefix and static folder.

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')

Again, when running locally, this setup works well. But when deploying to GAE, I have encountered a number of different errors, stemming from how I structure the app.yaml settings, including 502s, 404s, and endlessly pending network requests, which are apparently a result of workers timing out.

How should an app.yaml file on GAE be written for this setup? The most success I have had is with the following app.yaml file, which at least loads the React frontend (although all other routes seem to trigger the timeouts):

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

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

CodePudding user response：

You should configure your app.yaml to serve your static files from your app and to work the routing of your application. For example:

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

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