프록시를 사용하여 Flask API 및 React Frontend 마이크로 서비스를 Google App Engine에 배포하려면 어떻게하나요?

debugcn 에 게시 Dev

빅 -C- 노트

Stack Overflow 질문을 읽는 데 상당한 시간을 보냈지 만 원하는 내용을 찾을 수 없습니다.

GAE에 배포 할 Flask API와 React 프런트 엔드를 만들고 있습니다. 내 디렉토리 구조는 다음과 같습니다.

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

개발 용

1.) package.jsonReact 앱의 프록시를 설정했습니다.

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

내 React 프런트 엔드가 포트 3000에서 실행 중입니다.

2.) 나는 App.js다음과 같이 React 프런트 엔드의 파일 내에서 가져옵니다 .

fetch('api/endpoint')

꿈처럼 작동합니다.

생산 용

그러나 GAE에 배포 할 때 다음과 같이 변경해야합니다.

1.)에서 프록시를 제거 package.json합니다. 프로덕션의 React 프론트 엔드에서 404 오류를 받았기 때문에 프록시와 함께 작동하는 방법을 찾을 수 없습니다.

2.) .NET Framework에서 Flask API에 Access-Control-Allow-Origin을 추가 main.py합니다.

@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에 "책"을 썼습니다.

두 번째 비디오에서 그는 두 가지 배포 방법을 설명합니다. 첫 번째는 dishant가 제안한 것과 유사합니다. 비디오에서 Miguel은 Python에서 파일을 제공하는 것이 느리기 때문에이 옵션을 그가 설명하는 두 가지 중에서 덜 선호한다고 설명합니다. 저에게는 두 가지 중 "쉬운"방식이기 때문에 현재로서는 잘 작동하며 쉽게 전환 할 수있는 것처럼 보입니다.

그래서 다음과 같이 변경했습니다.

디렉토리 구조를 다음과 같이 변경했습니다.

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

app.yaml파일에 라우팅을 생성하는 대신 파일에 다음을 추가했습니다 main.py.

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


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

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은 빌드를 실행 합니다.

이전에 사용한 적이있는 Travis for CI / CD를 살펴 보겠습니다.

부정한 마 콰나

에서 https://create-react-app.dev/docs/proxying-api-requests-in-development/ :

프록시는 개발에만 영향을 미치며 (npm 시작 사용) / api / todos와 같은 URL이 프로덕션에서 올바른 것을 가리키는 지 확인하는 것은 사용자의 몫입니다. / api 접두사를 사용할 필요가 없습니다. text / html accept 헤더가없는 인식 할 수없는 요청은 지정된 프록시로 리디렉션됩니다.

배포 된 환경 (앱 엔진)의 메모리에서 프런트 엔드를 제공하지 않습니다. 대신 앱을 빌드하고 Flask 앱과 함께 패키징하고 app.yaml의 경로를 프런트 엔드 및 백엔드를 올바르게 가리 키도록 설정해야합니다.

app.yaml 파일은 1 개만 필요합니다. 예:

다음을 사용하여 반응 앱 빌드 npm run build
빌드 파일을 build라는 새 폴더의 플라스크 앱에 복사합니다.

app.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

클라우드 빌드 또는 Jenkins와 같은 ci / cd 서비스를 활용하여 앱을 패키징하고 앱 엔진에 배포 할 수 있습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사