Превратите свое приложение 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
или перейдя по ссылке в правом верхнем углу: