如何基于Flask后端部署React应用？适配生产与开发环境

核心思路 #

通过环境变量区分开发/生产场景，实现：

• 开发环境：前后端独立运行，保留CRA热重载等工具链优势，前端通过环境变量指定后端地址
• 生产环境：Flask后端同时提供前端静态文件服务和接口服务，接口使用同域名相对路径

前端（CRA）配置 #

1. 环境变量设置 #

CRA仅识别前缀为REACT_APP_的环境变量，创建两个环境配置文件：

• .env.development（开发环境）：

REACT_APP_BACKEND_URL_BASE=http://localhost:5000

• .env.production（生产环境）：

REACT_APP_BACKEND_URL_BASE=

2. API请求封装 #

统一封装接口请求逻辑，根据环境变量自动拼接请求地址：

// src/utils/api.js
const BACKEND_BASE = process.env.REACT_APP_BACKEND_URL_BASE || '';

export const requestApi = async (endpoint, options = {}) => {
  const fullUrl = `${BACKEND_BASE}${endpoint}`;
  const response = await fetch(fullUrl, {
    headers: {
      'Content-Type': 'application/json',
      // 可添加其他通用请求头
    },
    ...options,
  });

  if (!response.ok) {
    throw new Error(`请求失败: ${response.status}`);
  }
  return response.json();
};

调用示例：

import { requestApi } from './utils/api';

const fetchData = async () => {
  try {
    const data = await requestApi('/api/data');
    console.log(data);
  } catch (err) {
    console.error(err);
  }
};

后端（Flask）配置 #

1. 核心逻辑 #

通过环境变量FRONTEND_PATH控制是否启用前端静态文件服务：

• 生产环境：设置该变量为CRA构建后的build文件夹路径，Flask同时提供静态文件和接口
• 开发环境：不设置该变量，Flask仅提供接口服务

2. Flask代码实现 #

# app.py
import os
from flask import Flask, send_from_directory, jsonify

app = Flask(__name__)

# ------------------------------
# 后端接口示例
# ------------------------------
@app.route('/api/data')
def get_sample_data():
    return jsonify({
        'status': 'success',
        'data': 'Hello from Flask backend!'
    })

# ------------------------------
# 生产环境前端静态文件服务
# ------------------------------
FRONTEND_BUILD_PATH = os.getenv('FRONTEND_PATH')

if FRONTEND_BUILD_PATH and os.path.isdir(FRONTEND_BUILD_PATH):
    # 提供静态资源（CSS/JS/图片等）
    @app.route('/static/<path:filename>')
    def serve_static_files(filename):
        return send_from_directory(
            os.path.join(FRONTEND_BUILD_PATH, 'static'),
            filename
        )
    
    # 处理SPA路由：所有非接口请求返回index.html
    @app.route('/', defaults={'path': ''})
    @app.route('/<path:path>')
    def serve_frontend(path):
        # 排除接口路径，避免接口请求被拦截
        if path.startswith('api/'):
            return jsonify({'error': 'Not found'}), 404
        return send_from_directory(FRONTEND_BUILD_PATH, 'index.html')

if __name__ == '__main__':
    # 开发环境开启debug，生产环境关闭
    app.run(debug=os.getenv('FLASK_DEBUG') == '1')

运行方式 #

开发环境 #

1. 启动前端：在React项目根目录执行

npm start

（自动加载.env.development，前端请求指向http://localhost:5000）

2. 启动后端：在Flask项目根目录执行

flask --app=app.py run --debug

（不设置FRONTEND_PATH，后端仅提供接口服务）

生产环境 #

1. 构建前端：在React项目根目录执行

npm run build

2. 启动后端（指定前端构建路径）：

• Linux/macOS：

FRONTEND_PATH=/绝对路径/to/react项目/build flask --app=app.py run --host=0.0.0.0 --port=80

• Windows（Command Prompt）：

set FRONTEND_PATH=C:\绝对路径\to\react项目\build && flask --app=app.py run --host=0.0.0.0 --port=80

内容的提问来源于stack exchange，提问作者bisgardo