Возможно, вы создали несколько приложений react на локальной машине и получили к ним доступ, запустив npm start. Вы когда-нибудь задавались вопросом, как развернуть их и разместить где-нибудь? В этой статье мы рассмотрим, как развернуть приложение react, созданное с помощью create react app, на Google Cloud App Engine.
Создание приложения react
Если у вас уже есть существующее приложение, перейдите к следующему разделу.
Выполните следующую команду, чтобы создать новое приложение react:
npx create-react-app react-gcp-app-engine
Создание файла app.yaml
Google Cloud требует наличия файла app.yaml в корневом каталоге проекта, который указывает ему, как развернуть ваше приложение. Создайте файл с именем app.yaml в корневом каталоге вашего проекта со следующим содержимым:
runtime: nodejs16
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
Вышеуказанный файл указывает Google Cloud загрузить все содержимое внутри папки build и направлять любой входящий запрос в корень на build/index.html.
Создание нового проекта в Google Console
Если вы еще не зарегистрировались в Google Cloud, вы можете сделать это, перейдя по адресу http://console.cloud.google.com/.
После регистрации в Google Cloud перейдите на панель Cloud Console Dashboard и создайте новый проект.
Нажмите на кнопку Новый проект:
Дайте имя проекту и нажмите на кнопку Создать:
Создание проекта займет некоторое время. Вы можете просмотреть прогресс, нажав на значок уведомления в заголовке:
Теперь выберите только что созданный проект и откройте его:
Создание App Engine
Теперь давайте создадим App Engine, на котором будет размещено наше приложение.
Найдите «App Engine» в строке поиска и нажмите на App Engine:
Теперь нажмите на Create Application:
Выберите регион, если хотите (выберите регион страны, из которой большинство ваших пользователей), в противном случае оставьте все как есть. В выпадающем списке Service account выберите учетную запись по умолчанию и нажмите Next:
Подождите, пока приложение будет создано. Как только оно будет завершено, в заголовке появится уведомление.
Развертывание на Google App Engine
Существует два способа развертывания в Google Cloud: один — с помощью Google Cloud SDK, другой — с помощью Google Cloud Shell. Мы рассмотрим оба способа.
Развертывание с помощью Google Cloud SDK
Сначала установите Google Cloud SDK, выполнив следующую команду Powershell в Windows:
(New-Object Net.WebClient).DownloadFile("https://dl.google.com/dl/cloudsdk/channels/rapid/GoogleCloudSDKInstaller.exe", "$env:TempGoogleCloudSDKInstaller.exe")
& $env:TempGoogleCloudSDKInstaller.exe
Если вы используете любую другую операционную систему, вы можете найти инструкции по установке здесь.
После установки SDK откройте командную строку в режиме администратора, перейдите в каталог проекта и выполните следующую команду:
gcloud init
Программа попросит вас войти в систему, если вы запускаете ее в первый раз. После входа в систему укажите параметры, как показано ниже:
Теперь соберите проект с помощью следующей команды (в качестве альтернативы можно использовать yarn build):
npm run build
После завершения сборки выполните следующую команду deploy, чтобы развернуть файлы сборки на Google App Engine:
gcloud app deploy
Когда появится запрос на подтверждение, введите Y:
После завершения развертывания будет выведен URL-адрес, на котором развернуто приложение. Вы можете посетить его (https://my-react-app-338316.uc.r.appspot.com) и проверить, нормально ли загружаются страницы.
Развертывание с помощью Google Cloud Shell
Альтернативным способом развертывания без локальной установки Google Cloud SDK является запуск развертывания из Google Cloud Shell.
Прежде чем продолжить, убедитесь, что вы разместили свой проект в git-репозитории, чтобы мы могли загрузить его на машину Cloud Shell.
Вы можете активировать Cloud Shell, нажав на значок терминала в заголовке вашей консоли Google:
В браузере откроется консоль. Теперь клонируйте свой репозиторий, выполнив следующую команду (замените git URL на свой):
git clone https://github.com/collegewap/react-gcp-app-engine.git
Теперь перейдите в клонированный каталог, используя cd react-gcp-app-engine/.
Установите все зависимости, запустив npm i.
После установки зависимостей начните сборку проекта, используя следующую команду:
npm run build
После завершения сборки запустите gcloud app deploy, чтобы развернуть ваше приложение.
Может появиться запрос на авторизацию облачной оболочки, пожалуйста, нажмите на Authorize:
После завершения развертывания будет распечатан URL, на котором развернуто приложение, и вы сможете получить к нему доступ.
Настройка пользовательского домена в Google App Engine
App Engine по умолчанию назначит вашему сайту случайный поддомен типа https://my-react-app-338316.uc.r.appspot.com/. Если вы хотите настроить свой собственный домен, вы можете сделать это, нажав Настройки → Пользовательский домен → Добавить пользовательский домен.
Вам придется проверить свой домен и обновить записи DNS у регистратора доменов.