Question

我很难将create-react-app单页应用程序集成到我的烧瓶后端。我希望能够从我的前端进行fetch / axios调用，如：axios.get（'/ getResults'）和fetch（'/ getResults'）。我尝试但不限于的一些事情是将Flask端口指定为3000，这与create-react-app使用的相同。此外，使用create-react-app的“package.json”文件中的代理配置功能但无济于事。我怀疑我的文件夹结构和Flask代码实现可能会导致这种情况。下面是我的文件夹结构和“app.py”代码。我能得到的任何帮助将不胜感激。如有必要，我可以提供其他信息。感谢

项目
-build（包含静态文件夹，index.html ...其他元文件）
-node_modules
-public
-src
app.py
的package.json
requirements.txt

app.py：

from flask import Flask, Response, request, jsonify, make_response, send_from_directory,render_template

app = Flask(__name__, static_path='/build/static/')
app.debug=True

@app.route('/')
def root():
    print('Inside root function')
    return app.send_static_file('index.html')

@app.route('/getResults', methods=["GET"])
def results():
    print('Inside getResults path')
    return app.send_static_file('index.html')

@app.route('/postData', methods=["POST"])
def data_results():
    print('Inside postData path')
    data = request.get_json
    return jsonify(data)

@app.route('/<path:path>')
def send_js(path):
    print("inside send_js fxn")
    return send_from_directory('./build/static',path)


if __name__ == "__main__":
    print("inside main host call")
    app.run(host='0.0.0.0', port=3000)

运行“python app.py”时得到的错误是：

在终端上：内部根功能 127.0.0.1 - - [12 / Jun / 2017 09:42:24]“GET / HTTP / 1.1”404 -

在浏览器上：找不到 - 在服务器上找不到请求的URL。如果您手动输入了URL，请检查拼写，然后重试。

Answer 1

我遇到了完全相同的问题，我可以通过使用符号链接来解决Flask问题。

将模板和静态目录路径保持为默认值，并使用Flask主文件保存在目录中，添加这些符号链接

ln -s build/ templates
ln -s build/static static

如果你很好奇，这是我的具体问题，它只涉及一些嵌套目录，但实质上是相同的：

Running NPM Build from Flask

然后您可以使用Nurzhan的根配置：

@app.route('/')
def root():
    print('Inside root function')
    return render_template('index.html')

但您只需要申请声明为：app = Flask(__name__)

对我来说唯一不起作用的是favicon，一旦我弄明白，我会更新这个答案。

Answer 2

在开发模式下，您需要配置create-react-app package.json以转发＆＃34; ajax＆＃34;请求烧瓶服务器。

以下是我package.json的样子：

{
  "name": "socialite",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8080",
  "devDependencies": {
    "react-scripts": "1.0.10"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

请参阅proxy字段？这就是魔术发生的地方，用烧瓶服务器地址替换它的值。这样，您就可以利用CRA热重新加载功能。这在create-react-app as "Proxying API Requests in Development"

中记录

然后运行您的应用程序，转到localhost:3000或任何为您打开的端口纱线。当您通过彩虹将javascript中的 API 调用到服务器时，例如：fetch('/api/model/')或某些nodejs＆＃39;服务器将转发到烧瓶应用程序。我认为nodejs服务器确实查看了ajax请求的content-type字段，以了解它是否应该将请求转发到后端服务器。

我建议您在所有后端路由前加上/api/v1/或类似的东西，以便nginx配置整洁，易于编写。

Answer 3

我认为你有一些误解。

create-react-app在端口3000上运行在自己的服务器上，如果您尝试在同一台机器上的同一端口上运行烧瓶应用程序，它会抱怨端口3000已在使用中。因此，我们转向另一个问题 - 应用程序的结构。

它是基于前端的烧瓶和api的单独的基于reactjs的客户端，它将是2个独立的应用程序通过HTTP相互通信？在这种情况下，前端和后端通常在不同的服务器上运行。

或者它将是一个将在其模板页面中使用reactjs的烧瓶应用程序？

您可以通过在代码中更改为此来找不到URL来解决当前问题：

@app.route('/')
def root():
    print('Inside root function')
    return render_template('index.html')

而且：

template_dir = os.path.abspath('build/templates')
app = Flask(__name__, static_path='/build/static/',
            template_folder=template_dir)

由于您的模板文件夹位于build目录。

无法从Flask后端渲染create-react-app样板视图

3 个答案: