Узнайте, как создавать, рассказать и развернуть свое угловое приложение в контейнер, используя Google Cloud Run.
TL; DR: Рабочий пример GitHub Repo Анкет
Предварительные условия:
- Узел
- Угловой клин
- Докер
- Google Cloud SDK
- Активированный Google Cloud Platform учетная запись
Пропустить шаг 1. Если у вас уже есть рабочее угловое приложение.
1. Создать угловое приложение
Чтобы начать, используйте Angular CLI для создания нового углового приложения:
ng new
Вам будет предложено назвать ваше приложение и добавить некоторые варианты конфигурации.
Как только CLI сгенерировал все необходимые файлы для вашего углового приложения, вы можете проверить его, выполнив эти две команды.
CD
В вашем любимом браузере перейдите к http://localhost: 4200 Анкет С Angular 9 вы получите аналогичный приветственный экран с тем, что ниже.
2. Создать Google Cloud Project
Войдите в свою учетную запись GCP, затем Создайте новый проект Анкет Вы не обязаны использовать организацию, если у вас есть выставление счетов в вашей учетной записи.
После того, как вы увидите приборную панель GCP для вашего недавно созданного проекта, нажмите на меню гамбургера и перейдите к Cloud Run. Перейдите, нажав кнопку «Начать использование Cloud Run». Теперь вы должны увидеть свою панель панели Cloud Run. Нажмите на кнопку «Создать службу».
В настройках обслуживания введите имя службы, и URL -адрес изображения контейнера должен автозаполняться. Выберите область по вашему выбору, затем нажмите «Создать».
Ваш новый сервис теперь создан и готов к тому, чтобы к нему натолкнуло изображение.
3. Dockerize и подайте свое угловое приложение, используя ExpressJS
Cloud Run работает только с контейнерными изображениями. Для контейнера нашего углового приложения мы используем Docker. Вы можете сделать это, создав Dockerfile В вашем каталоге проекта с конфигурацией ниже.
Из узла: 12-lem Workdir/usr/src/app Копировать пакет*.json ./ Запустить NPM Install -g @angular/cli Запустите NPM Install Копия ./ Запустите сборку NPM Run Разоблачить 8080 Cmd [«Узел», «Server.js»]
Это Dockerfile позволяет нам устанавливать Angular CLI, а также все зависимости нашего проекта в контейнере Docker на основе узлов. Он также создает и генерирует необходимые статические файлы для обслуживания нашего углового приложения. Обратите внимание, что мы выставляем порт 8080, хотя порт сервера по умолчанию нашего углового приложения составляет 4200. Порт 8080 — порт по умолчанию Google Cloud Run. Это отличный переход к последней недостающей части головоломки: использование ExpressJS.
Чтобы получить наше приложение в Интернете, нам нужно обслуживать статические файлы, содержащиеся в нашем Dist Папка с использованием службы. ExpressJS — это библиотека Nodejs, которая позволяет нам сделать это в нескольких строках кода. Создать Server.js Задайте и скопируйте приведенный ниже фрагмент, заменив Проект-имени с именем вашего углового приложения.
var (‘Express’); var (); app.use (express.static (‘dist/project-name’) ) ; app.get (‘/’, function (req, res, next) { res.redirect (‘/’); }); app.listen (8080)
После добавления двух файлов не стесняйтесь проверить свой контейнер, создав изображение и запустив его, используя две команды ниже (заменив *App-Tag *на тег, который вы хотите использовать).
Docker Build -t -Tag. Docker Run -p 8080: 8080 Приложение -Tag
Перейдите к http://localhost: 8080 Чтобы увидеть ваше угловое приложение, обслуживаемое через ExpressJs из вашего контейнера (отсюда и «cmd [» Node «,» server.js «]» внизу вашего dockerfile ).
4. Развернуть свое угловое приложение (Источник)
Все, что осталось сделать, — это использовать Google Cloud SDK для создания и развертывания вашего веб -приложения в контейнер.
Это на самом деле так же просто, как кажется. Две команды, одна для создания, другая для развертывания. Вам понадобится ваш идентификатор проекта (можно найти в вашей панели Dashboard Google Project ), а также имя службы Cloud Run. Выполните две команды ниже, заменяющие идентификацию проекта и имени службы своими значениями.
Gcloud Builds Pured-tag gcr.io/project-id/service-name Gcloud Run Deploy-image gcr.io/project-id/project-name-platform управляется
Как только ваш ревизион (изображение) будет развернут, вы получите ссылку на свое живое угловое приложение. Если вы вернетесь к своей облачной консоли, вы увидите зеленую стрелку рядом с вашей службой на панели управления Cloud Run. Масштабирование и предоставление будут автоматически заботиться о.
Поздравляю! Вы только что развернули свой контейнер, используя Cloud Run! 🎉 Вот Демо -ссылка Для примера, используемого в этой статье вместе с GitHub Repo Анкет
5. Дополнения
Производительность:
Вы можете сделать процесс развертывания быстрее, добавив .dockerignore Файл, как приведенный ниже.
Dockerfile README.md node_modules npm-debug.log
Это скажет Docker Daemon не копировать эти конкретные файлы в ваш новый контейнер. Это сэкономит некоторое время, учитывая, что node_modules особенно тяжелые.
Очистка (Источник) :
В то время как Cloud Run не взимается, когда служба не используется, ты все еще может быть Заряжено за хранение изображения контейнера в реестре контейнеров . Ты Можно Удалите свое изображение или удалите свой облачный проект, чтобы избежать заряда. Удаление вашего облачного проекта прекращает выставление счетов за все ресурсы, используемые в этом проекте.
Первоначальный источник: https://medium
Оригинал: «https://dev.to/marwan01/deploy-an-angular-app-using-google-cloud-run-3p4a»