Развертывание приложения¶
Развертывание приложения — это процесс компиляции, или сборки, вашего кода и размещения JavaScript, CSS и HTML на веб-сервере.
Этот раздел основывается на предыдущих шагах в руководстве Начало работы и показывает, как развернуть ваше приложение.
Предварительные условия¶
Лучшей практикой является локальный запуск проекта перед его развертыванием. Чтобы запустить проект локально, на вашем компьютере должно быть установлено следующее:
В терминале установите Angular CLI глобально, используя:
1 | |
С помощью Angular CLI вы можете использовать команду ng для создания новых рабочих пространств, новых проектов, обслуживания вашего приложения во время разработки или создания сборок для совместного использования или распространения.
Запуск приложения локально¶
1. Загрузите исходный код вашего проекта StackBlitz, нажав на иконку Download Project в левом меню, напротив Project, чтобы загрузить ваш проект в виде zip-архива.
2. Распакуйте архив и измените каталог на вновь созданный проект. Например:
1 | |
3. Чтобы загрузить и установить пакеты npm, используйте следующую команду npm CLI:
1 | |
4. Используйте следующую команду CLI для локального запуска приложения:
1 | |
5. Чтобы увидеть свое приложение в браузере, перейдите по адресу http://localhost:4200/. Если порт по умолчанию 4200 недоступен, вы можете указать другой порт с помощью флага port, как в следующем примере:
1 | |
Во время обслуживания приложения вы можете редактировать свой код и видеть, как изменения автоматически обновляются в браузере. Чтобы остановить команду ng serve, нажмите Ctrl+C.
Создание и размещение вашего приложения¶
1. Чтобы собрать приложение для производства, используйте команду build. По умолчанию эта команда использует конфигурацию сборки production.
1 | |
Эта команда создает в корневом каталоге приложения папку dist со всеми файлами, которые необходимы службе хостинга для обслуживания вашего приложения.
Если команда ng build выдает ошибку об отсутствии пакетов, добавьте отсутствующие зависимости в файл package.json вашего локального проекта, чтобы они совпадали с теми, что находятся в загруженном проекте StackBlitz.
2. Скопируйте содержимое папки dist/my-project-name на ваш веб-сервер.
Поскольку эти файлы статичны, вы можете разместить их на любом веб-сервере, способном обслуживать файлы; например, Node.js, Java, .NET или любом бэкенде, таком как Firebase, Google Cloud или App Engine.
Для получения дополнительной информации смотрите Создание и обслуживание приложений Angular и Руководство по развертыванию.
Что дальше¶
В этом руководстве вы заложили основу для изучения мира Angular в таких областях, как мобильная разработка, разработка UX/UI и рендеринг на стороне сервера. Вы можете углубиться, изучая больше возможностей Angular, взаимодействуя с активным сообществом и исследуя мощную экосистему.
Узнать больше об Angular¶
Более подробное руководство, которое поможет вам создать приложение на локальном уровне и изучить многие из наиболее популярных функций Angular, смотрите в Tour of Heroes.
Чтобы изучить основные концепции Angular, обратитесь к руководствам в разделе "Понимание Angular", таким как Обзор компонентов Angular или Синтаксис шаблонов.
Изучение экосистемы Angular¶
Для поддержки разработки UX/UI смотрите Angular Material.
Сообщество Angular также имеет обширную сеть сторонних инструментов и библиотек.
15.09.2021