Это краткое руководство, которое поможет вашему приложению перейти от локального к глобальному за пять шагов высокого уровня!
Примечание. В этом руководстве предполагается, что вы уже знаете, как создать собственное приложение React, имеете его исходный код в репозитории GitHub, настроили свою учетную запись GCP и знаете командную строку достаточно, чтобы перемещаться по папкам и удалять файлы.
Предполагая, что вы уже создали свое приложение React, сохранили его исходный код в репозитории GitHub и настроили учетную запись GCP, вот пять шагов, которые нам необходимо предпринять для успешного развертывания и размещения нашей тяжелой работы в Интернете. :
- Создайте наше приложение в GCP
- Клонируйте наше приложение из репозитория GitHub
- Создайте наше приложение для развертывания
- Удалить все остальное
- Добавьте app.yaml в корневой каталог и разверните!
1. Создайте наше приложение на App Engine.
Перейдите в Консоль Google App Engine и создайте новый проект:
2. Клонируйте исходный код нашего приложения с GitHub.
Откройте Cloud Shell, щелкнув значок в правом верхнем углу.
Как только ваша оболочка будет открыта, пора перенести исходный код нашего приложения в облако.
git clone <https://github.com/github-username/repo-name.git>
3. Создайте приложение для развертывания.
Для этого просто войдите в корневую папку вашего приложения (где находится ваша папка «src»),
cd <your github project folder> cd <your app's root directory>
И введите следующую команду:
npm i npm run build
Это создает папку с именем «build» в нашем корневом каталоге.
4. Удалите все, кроме папки сборки.
Избавьтесь от всего остального, кроме папки сборки.
rm <file-to-remove> rm -r <remove-recursively-like-directories-inside-directories>
5. Добавьте app.yaml и разверните!
В той же папке, где находится наша папка «build», создайте новый файл с именем app.yaml. К концу этого шага останутся только папка build и app.yaml. Это все, что потребуется App Engine для запуска нашего приложения.
touch app.yaml vim app.yaml
И добавьте к его содержанию следующее:
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
Если вы никогда не использовали vim или просто забыли:
i (to insert text) (ctr+v to paste above code) (esc key to exit insert mode) :wq! (to save and exit file)
Теперь разверните!
gcloud app deploy
Когда появится подсказка, просто введите «y», чтобы продолжить процесс развертывания. После развертывания вы сможете перейти на панель управления App Engine, где сможете увидеть результаты анализа вашего приложения. На панели инструментов в правом верхнем углу вы увидите ссылку на свое приложение. Ура!
