Создание приложений angular может быть удовлетворительным процессом. Тем не менее, что еще более полезно, так это развертывание вашего приложения на всеобщее обозрение. В этом посте я покажу вам, как запустить приложение Angular 6 (firebase / firestore), которое будет размещено на firebase. У Firebase есть несколько отличных бесплатных планов, которые помогут вам получить отзывы и протестировать свое приложение, прежде чем переходить на платный план.
Если у вас уже есть инициализированное приложение и установлены инструменты Firebase, вы можете развернуть приложение с помощью следующих команд
Используйте Angular Cli для создания наших файлов dist со следующими
ng build --prod
используйте инструменты командной строки Firebase для развертывания вашего приложения с
firebase deploy
Шаги по настройке первого развертывания
Сначала вам нужно установить инструменты firebase. Вы можете использовать NPM для установки инструментов firebase с помощью следующей команды
npm install -g firebase-tools
Теперь вам нужно использовать CLI для входа в firebase.
firebase login
Если вы еще этого не сделали, вам необходимо инициализировать свой сайт. Это создаст файл firebase.json, который будет использоваться во время развертывания вашего приложения. Запустить
firebase init
следуйте инструкциям на консоли. Это означает, что вы выберете «Да» на вопрос «готовы ли вы продолжить?». Затем используйте клавиши со стрелками для перехода вниз и используйте клавишу пробела, чтобы выбрать параметр «Хостинг». Нажмите Enter, чтобы перейти к следующим шагам.
Затем вам будет предложено выбрать проект, который вы используете, в консоли разработчика Firebase. После этого вам будет предложено задать следующий вопрос: «Что вы хотите использовать в качестве общедоступного каталога?» Для более старых версий angular приложение собирается в папку dist. Поэтому вы должны ввести «dist» для публичного каталога. Однако в Angular 6 вы также должны включить имя своего приложения «dist / you_applications_name». Затем укажите да для настройки одностраничного приложения и нет для перезаписи существующего index.html.
После выполнения вышеуказанных действий ваш файл firebase.json должен выглядеть следующим образом
Затем нам понадобится angular для создания файлов dist. Для этого мы запускаем следующую команду с включенным флагом «- prod», чтобы использовать наш производственный набор правил из environment.ts.prod при сборке приложения.
ng build --prod
Далее мы развернем наше приложение с помощью команды firebase
firebase deploy
Теперь ваше приложение развернуто и будет доступно для доступа по ссылке, указанной в консоли.
