Превратите свое приложение React из локального в глобальное за 3 простых шага.

Предварительное требование

Мы предполагаем, что вы уже создали свое приложение React и загрузили исходный код в репозиторий GitHub. Вам также необходимо иметь учетную запись GCP (Google Cloud Platform).

Давайте встанем и побежим :)

Шаг 1: Создайте файлы конфигурации

Чтобы все заработало, мы выполним всю настройку в самом начале.

Откройте свой терминал и выберите корневую папку вашего реагирующего приложения.

Введите npm run build, нажмите Enter и позвольте реакции творить чудеса.

Создайте файл app.yaml, чтобы AppEngine знал, что делать — скопируйте, вставьте его в файл и загрузите все на GitHub.

runtime: nodejs12
handlers:
# Serve all static files with url ending with a file extension
- url: /(.*\\..+)$
  static_files: build/\\1
  upload: build/(.*\\..+)$
# Catch all handler to index.html
- url: /.*
  static_files: build/index.html
  upload: build/index.html

Шаг 2. Создайте новый проект AppEngine

Перейдите в Google App Engine Console и создайте новый проект:

Нажмите Новый проект.

Назовите его и нажмите создать.

Шаг 3. Разверните приложение

Теперь, когда наш проект настроен и код ожидает развертывания, просто откройте Cloud Shell в правом верхнем углу:

Когда терминал откроется, закройте репозиторий git git clone <https://github.com/github-username/repo-name.git›, откройте папку проекта cd <your github project folder> и инициализируйте проект с помощью npm i.

И последнее, но не менее важное: удалите все в папке, кроме папки сборки и файла app.yaml. Для этого запустите rm -r <Your File or Folder name> и, наконец, запустите gcloud app deploy, чтобы развернуть приложение, и нажмите y, когда появится запрос.

Теперь вы можете просмотреть свое приложение, запустив gcloud app browse или перейдя по ссылке в правом верхнем углу: