我花了相当多的时间阅读 Stack Overflow 问题，但找不到我要找的东西。

我正在创建要部署在 GAE 上的 Flask API 和 React 前端。我的目录结构如下所示:

application_folder
-> api
-> -> app.yaml 
-> -> main.py
-> react_frontend
-> -> app.yaml
-> -> {directories after using create-react-app}

用于开发

1.) React 应用的package.json，我设置了一个代理:

  "proxy": "http://localhost:5000/"

我的 React 前端在端口 3000 上运行。

2.) 我在 React 前端的 App.js 文件中获取:

fetch('api/endpoint')

像梦一样工作。

用于生产

但是，在部署到 GAE 时，我必须进行以下更改:

1.) 从 package.json 中删除代理。当我在生产环境中的 React 前端收到 404 错误时，我找不到使用代理的方法。

2.) 在 main.py 中将 Access-Control-Allow-Origin 添加到 Flask API。

@app.route("/api/endpoint", methods=["GET"])
def endpoint():
    resp = make_response({"cat": 15})
    resp.headers["Access-Control-Allow-Origin"] = "*"
    return resp

3.) 现在，我必须从 App.js 获取绝对路径。

fetch('flask-production-domain.com/api/endpoint')

我的问题是，您是否会推荐一种部署到生产/设置本地开发的方法，这样我在部署到生产时就不必重写代码库？

顺便说一句，我的 app.yaml 文件是这样读的:

# api app.yaml
runtime: python38

env_variables:
  none_of: "your_business"

# frontend app.yaml
runtime: nodejs12
service: banana

handlers:
  - url: /static
    static_dir: build/static
  - url: /(.*\.(json|ico|js))$
    static_files: build/\1
    upload: build/.*\.(json|ico|js)$
  - url: .*
    static_files: build/index.html
    upload: build/index.html

提前致谢。

编辑

我接受了迪尚特的回答，但我的做法略微与他们建议的不同。

首先，这两个资源是不可思议的。这个人在 Flask 上写了“书”:

• https://www.youtube.com/watch?v=Q2eafQYgglM
• https://www.youtube.com/watch?v=qEfduVAQ8FQ&t=1289s

在第二个视频中，他描述了两种部署方法。第一个类似于 dishant 建议的。在视频中，Miguel 将此选项描述为他所描述的两个选项中他不太喜欢的选项，因为从 python 提供文件的速度很慢。对我来说，它目前运行良好，因为它是两者中“更容易”的一个，而且看起来你可以轻松地切换到这条路。

因此，我进行了以下更改:

1. 我将目录结构更改为:

Top Level
-> directories after using create-react-app
application_folder
-> api
-> -> app.yaml 
-> -> main.py

1. 我没有在 app.yaml 文件中创建路由，而是将以下内容添加到 main.py fie:

app = Flask(__name__, static_folder="build", static_url_path="/")


@app.route("/")
def index():
    return app.send_static_file("index.html")

1. 我将以下行添加到 package.json 以创建脚本来构建静态文件并将其移动到 api 目录。

"scripts": {
  "start": "react-scripts start",  
  "build": "react-scripts build",
  "create-app": "yarn build && rm -r api/build && cp -r build api/build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

所以现在我运行 yarn create-app 来构建。

我打算研究用于 CI/CD 的 Travis，因为我以前用过它。

最佳答案

来自 https://create-react-app.dev/docs/proxying-api-requests-in-development/ :

Keep in mind that proxy only has effect in development (with npm start), and it is up to you to ensure that URLs like /api/todos point to the right thing in production. You don’t have to use the /api prefix. Any unrecognized request without a text/html accept header will be redirected to the specified proxy.

您不会在已部署环境(应用引擎)中从内存中为您的前端提供服务。相反，您应该构建您的应用程序并将其与 Flask 应用程序一起打包，并在 app.yaml 中设置路由以正确指向前端和后端。

您只需要 1 个 app.yaml 文件。 示例:

1. 使用 npm run build 构建您的 React 应用

2. 将构建文件复制到名为 build 的新文件夹中的 Flask 应用。

3. 应用程序.yaml:

   runtime: python38
   
   env_variables:
     none_of: "your_business"
   
   handlers:
   # frontend
   - url: /static
     static_dir: build/static
   - url: /(.*\.(json|ico|js|html))$
     static_files: build/\1
     upload: build/.*\.(json|ico|js|html)$
   
   # backend
   - url: /.*
     script: auto
   

您可以利用 cloud build 或 Jenkins 等 ci/cd 服务来打包应用并将它们部署到应用引擎上。

关于reactjs - 如何使用代理将 Flask API 和 React 前端微服务部署到 Google App Engine？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64493492/