Phục vụ một ứng dụng tạo phản ứng với Flask

Question

Tôi có một back-end với các tuyến API được truy cập bởi một ứng dụng đơn React, được tạo ra bằng cách sử dụng bản mẫu ứng dụng tạo phản ứng. Khi sử dụng máy chủ dev tích hợp sẵn ứng dụng tạo ra phản ứng-ứng dụng, kết thúc ngược của Flask của tôi hoạt động, không có vấn đề gì với điều đó.

Bây giờ, tôi muốn phục vụ ứng dụng phản hồi tĩnh (sử dụng npm run build) được xây dựng từ máy chủ Flask của tôi. Xây dựng ứng dụng phản ứng dẫn đến cấu trúc thư mục sau:

- build 
    - static 
    - css 
     - style.[crypto].css 
     - style.[crypto].css.map 
    - js 
     - main.[crypto].js 
     - main.[crypto].js.map 
    - index.html 
    - service-worker.js 
    - [more meta files] 

By [crypto], tôi có nghĩa là chuỗi được tạo ngẫu nhiên được tạo ra ở thời gian xây dựng.

Sau khi nhận được hồ sơ index.html, trình duyệt sau đó làm cho các yêu cầu sau đây:

- GET /static/css/main.[crypto].css 
- GET /static/css/main.[crypto].css 
- GET /service-worker.js 

Câu hỏi của tôi là sau đó: làm thế nào tôi nên đi về phục vụ những tập tin này? Tôi đã đưa ra điều này:

from flask import Blueprint, send_from_directory 

static = Blueprint('static', __name__) 

@static.route('/') 
def serve_static_index(): 
    return send_from_directory('../client/build/', 'index.html') 

@static.route('/static/<path:path>') # serve whatever the client requested in the static folder 
def serve_static(path): 
    return send_from_directory('../client/build/static/', path) 

@static.route('/service-worker.js') 
def serve_worker(): 
    return send_from_directory('../client/build/', 'service-worker.js') 

Bằng cách này, tài sản tĩnh được phục vụ thành công. Nhưng nó không phải là một giải pháp rất thanh lịch.

Mặt khác, tôi có thể kết hợp điều này với các tiện ích tĩnh tích hợp trong bình. Nhưng tôi không hiểu làm thế nào để cấu hình này. Tôi thực sự không biết làm thế nào để xử lý điều này, đến mức nó làm cho tôi xem xét lại việc sử dụng ứng dụng tạo phản ứng của tôi, vì nó buộc tôi phải cấu trúc thư mục tĩnh của mình theo một cách rất bất tiện: Ở đó không có cách nào để tôi thay đổi cách ứng dụng yêu cầu nội dung tĩnh từ máy chủ.

Nhìn chung: Giải pháp của tôi có đủ mạnh không? Có cách nào để sử dụng các tính năng tích hợp trong bình để phục vụ các tài sản này không? Có cách nào tốt hơn để sử dụng ứng dụng tạo phản ứng? Bất kỳ đầu vào nào được đánh giá cao. Tôi có thể cung cấp thêm thông tin nếu cần.

Cảm ơn bạn đã đọc!

Answer 1

import os 
from flask import Flask, send_from_directory 

app = Flask(__name__, static_folder='react_app/build') 

# Serve React App 
@app.route('/', defaults={'path': ''}) 
@app.route('/<path:path>') 
def serve(path): 
    if(path == ""): 
     return send_from_directory('react_app/build', 'index.html') 
    else: 
     if(os.path.exists("react_app/build/" + path)): 
      return send_from_directory('react_app/build', path) 
     else: 
      return send_from_directory('react_app/build', 'index.html') 


if __name__ == '__main__': 
    app.run(use_reloader=True, port=5000, threaded=True) 

Đó là những gì tôi đã kết thúc. Vì vậy, bascially bắt tất cả các tuyến đường, kiểm tra nếu đường dẫn là một tập tin => gửi tập tin => khác gửi index.html. Bằng cách đó bạn có thể tải lại ứng dụng phản ứng từ bất kỳ tuyến đường nào bạn muốn và nó không bị hỏng.