Обработчики app.yaml App Engine для встроенного приложения React

Question

Я пытаюсь развернуть производственную сборку приложения React (созданного с помощью create-Reaction-app) в гибкой среде движка приложений gcloud.

После запуска npm run build, папка сборки была создана:

Это мой app.yaml:

# [START runtime]
runtime: nodejs
env: flex
# [END runtime]

# [START handlers]
handlers:
  - url: /
    static_files: build/index.html
    upload: build/index.html
  - url: /
    static_dir: build
  # [END handlers]

При развертывании в App Engine конфигурация версии показывает:

runtime: nodejs
api_version: '1.0'
env: flexible
threadsafe: true
handlers:
  - url: /
    application_readable: false
    static_files: build/index.html
    require_matching_file: false
    upload: build/index.html
  - url: '/(.*)'
    application_readable: false
    static_files: "build/\\1"
    require_matching_file: false
    upload: 'build/.*'
automatic_scaling:
  min_num_instances: 2
  max_num_instances: 20
  cpu_utilization:
    target_utilization: 0.5

Приложение для разработки обслуживается вместо рабочей версии из папки сборки. Что я делаю неправильно?

Answer 1

При развертывании приложения / службы GAE каталог, содержащий приложение / службу app.yaml Развертываемый файл считается каталогом верхнего уровня приложения / службы, а содержимое этого каталога - тем, что развертывается. Что, в вашем случае, соответствует тому, что я подозреваю, что вы называете версией разработки.

Если вы хотите, чтобы ваш build директория, которая будет главной директорией вашего приложения / сервиса, тогда вам нужно:

• создать app.yaml файл в build dir (вручную или проинструктируйте ваш процесс сборки сделать это)

  Примечание: вам нужно настроить пути в этом файле, так как не будет build каталог в каталоге приложения больше. Или попробуйте создать внутри него build -> . символическая ссылка на себя, возможно, позволяющая использовать существующие app.yaml контент как есть, без корректировки путей (хотя не уверен, что это будет работать на 100%).

• развернуть это build/app.yaml файл, а не тот сверху (bsn) реж.

Answer 2

Изменить скрипты в package.json использовать GAE serve служить build dir вместо корневого каталога.

После развертывания GAE будет работать npm start начать подачу заявления. Изменяя то, что start сценарий сопоставляется, вы можете иметь build каталог служил по желанию. Вам придется использовать npm run local при выполнении локальной разработки с этой настройкой, так как вы меняете то, что npm start делается.

Этот процесс требует от вас запуска npm run build перед развертыванием в GAE. Это послужит build каталог для вас, но он не запускает автоматически процесс сборки для вас, так что это все равно нужно сделать, чтобы обслуживать ваш последний код в /src,

Источник: https://github.com/facebook/create-react-app/issues/2077

Код:

"scripts": {
  "start": "serve -s build",
  "prestart": "npm install -g serve",
  "local": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}

Answer 3

GAE будет работать npm startдля запуска вашего приложения реакции. Поэтому вам нужно настроить свой package.json, чтобы GAE обслуживала вашу папку сборки:

  "scripts": {
    "start": "serve -s build",
    ...
  },

Также необходимо настроить свой .yaml файл соответственно:

handlers:
  - url: /
    static_files: build/index.html
    upload: build/index.html
  - url: /(.*)$
    static_files: build/\1
    upload: build/(.*)