Рубрики
Uncategorized

Угловое развертывание CLI

Угловые CLI, развертывающие быстрое развертывание быстрого развертывания Таким образом, у вас есть конференция или, возможно, … Теги с угловым, WebDev, DevOps, Statichosting.

Развертывание быстрого

Таким образом, у вас есть конференция или, возможно, на встрече Jamstackgr, которое вы создали угловое приложение, и мне нужно показать его миру. Как вы развертываете это в CDN (сеть доставки контента), чтобы мир мог получить доступ к вашему новому приложению? Есть много способов, которыми вы можете развернуть свой сайт, но один из заметок является угловой CLI, он позволяет развертывать до 6 различных платформ.

Сначала давайте убедитесь, что вы уже накрыли пару вещей.

  • Создать команду приложения NG NEW
  • Обслуживать команду NG служить
  • Проверьте полную сборку, используя NG Build - Prod Команда локально и Lite-Server и попробуйте на локальном браузере

Создайте свое приложение

Мы держим эту простоту и запуску угловой новой команды по умолчанию, выберите имя, а затем ответьте «Да»

ng new

Служить на местном уровне

Мы собираемся сделать одно простое изменение и использовать другое изображение по умолчанию в нашем приложении. Для этого мы собираемся открыть VSCode (Visual Studient Code).

code JAMStackGR-Deploy-v-GIT

Теперь, когда VSCode открыт, добавьте свое любимое изображение на SRC/Активы/ Так что мы можем получить доступ к нему в нашем приложении.

Вы можете сделать это в вашем любимом терминале или в VSCode Ctrl + ~ откроет терминал в VSCode

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

ng serve

Откройте браузер, чтобы увидеть угловое приложение по умолчанию

http://localhost:4200/

Теперь мы удалим все это и просто поставили нашу картинку на страницу. Между двумя комментариями приведена куча HTML между двумя комментариями ниже. Вы можете удалить все это!

app.component.html.

Когда угловые подают папку Asset, вы можете найти вышеуказанную добавленную картинку в каталоге /ресурсы/ . Мы будем обернуть нашу картинку в простой гибкой макете и добавить оставить <Маршрутизатор-розетка> В случае, если это приложение получает модули, добавленные позже.


  JAMStackGR 2 Logo

Создание производства

Как только ваша картинка отображается в браузере, это означает, что мы готовы сделать производственную версию нашего приложения. Для этого мы собираемся выполнить команду ниже.

ng build --prod

Как только это завершит, он составил полное приложение, и вы найдете его в новой папке в Dist/ каталог. Это полное приложение, и в этот момент мы можем служить этому локально с сервером. Простой, который мне нравится использовать Lite-Server Что также рекомендуется в угловой документации по развертыванию, мне нравится устанавливать это глобально.

npm i -g lite-server@latest

Пример для обслуживания нашего базового каталога — это команда ниже

lite-server --baseDir dist/JAMStackGR-Deploy-v-GIT/

Вы можете увидеть производственную площадку на https://localhost: 3000

Это может показаться таким же, как использование NG служить , но это запускает код производства!

Угловые платформы развертывания

Команда угловой CLI NG Развертывает (Введен в версии 8.3.0) Выполняет Развертывание CLI Builder связан с вашим проектом. Ряд сторонних строителей внедряют возможности развертывания на разные платформы. Вы можете добавить любой из них в свой проект, запустив NG Добавить [Имя пакета] Отказ ~ Угловое руководство

Также обратите внимание, что я сейчас нахожусь, что вы предлагаете вам использовать быстрые методы развертывания с публичными репоподами (так как все это клавиши) или что они готовы к истинному производственному использованию. Этот метод лучше всего используется в качестве демонстрации.

Хостинг Firebase

Хостинг Firebase Ходит на CDN Edge Servers по всему миру. Есть несколько Продукты На Firebase Suite, включая FireStore, который предлагает бэкэнду в качестве услуги. Вам понадобится учетная запись FireBase (учетная запись пользователя Google), чтобы использовать эту услугу, и создан проект FireBase.

Создание проекта FireBase https://console.firebase.google.com/ Войдите и выберите Добавить проект, дайте ему уникальное имя.

Развертывание команды

ng add @angular/fire

Эта команда добавила правильные пакеты NPM

"@angular/fire": "^5.2.1",

Войдите в систему, используя CLI, это направит вас в систему, чтобы CLI может быть предоставлен, чтобы действовать от вашего имени.

Затем вам нужно скопировать токен входа в систему, чтобы вы могли вставить его обратно в CLI.

Вставьте код, как ниже

Теперь, когда CLI может получить доступ к вашим проектам, он будет иметь их в списке. Выберите свой проект FireBase, который вы создали.

Если вы посмотрите на angular.json Теперь вы увидите, что есть запись для этого развертывания

"deploy": {
  "builder": "@angular/fire:deploy",
  "options": {}
}

CLI также создал несколько файлов Firebase по умолчанию в вашем проекте .firebaserc и Firebase.json Отказ Увидеть ниже.

Теперь, когда все установлено, вы можете запустить команду развертывания ниже

ng deploy

Это построит ваш проект и развертывает его для хостинга Firebase

Демо-сайт: https://jamstackgr-2-test.firebaseapp.com/

Продолжить чтение на ajonp.com

Вы можете увидеть остальные методы развертывания!

https://ajonp.com/lessons/angular-cli-deploying

Оригинал: «https://dev.to/codingcatdev/angular-cli-deploying-2780»