Вы на самом деле здесь, касаясь двух вопросов в одном.
Первый - Как разместить ваше приложение? ,
И как @toskv упомянул свой действительно слишком широкий вопрос, чтобы на него можно было ответить, и он зависит от множества разных вещей.
Второй : как подготовить версию для развертывания приложения? ,
У вас есть несколько вариантов здесь:
- Разверните как есть. Только это - без минификации, конкатенации, искажения имен и т. Д. Транспортируйте весь ваш проект ts, скопируйте все ваши полученные js / css / ... sources + зависимости на хост-сервер, и вы готовы к работе.
Развертывание с использованием специальных инструментов комплектации, таких как webpack
или systemjs
строитель.
Они приходят со всеми возможностями, которые отсутствуют в # 1.
Вы можете упаковать весь код своего приложения в пару файлов js / css / ..., на которые вы ссылаетесь в своем HTML. systemjs
Builder даже позволяет избавиться от необходимости включать его systemjs
в состав пакета развертывания.
Вы можете использовать ng deploy
начиная с Angular 8 для развертывания приложения из CLI. ng deploy
необходимо будет использовать вместе с выбранной вами платформой (например, @angular/fire
). Вы можете проверить официальные документы, чтобы увидеть, что работает лучше для вас здесь
Да, вам, скорее всего, потребуется развернуть systemjs
и связать другие внешние библиотеки как часть вашего пакета. И да, вы сможете объединить их в пару файлов js, на которые вы ссылаетесь со своей HTML-страницы.
Вам не обязательно ссылаться на все ваши скомпилированные js-файлы со страницы - systemjs
об этом позаботится загрузчик модулей.
Я знаю, это звучит грязно - чтобы помочь вам начать с # 2, вот два действительно хороших примера приложений:
Сборщик SystemJS: angular2 seed
WebPack: angular2, веб-пакет для начинающих
node_modules
. Примечание. Вам следует копировать только те зависимости, которые необходимы для запуска программы. Не копируйте deps, которые используются только для разработки (например, gulp / grunt / etc).Простой ответ Используйте угловой CLI и выполните команду
Команда в корневом каталоге вашего проекта. Сайт будет создан в каталоге dist, и вы можете развернуть его на любом веб-сервере.
Это создаст для теста, если у вас есть производственные настройки в вашем приложении, вы должны использовать
Это создаст проект в
dist
каталоге, и его можно будет отправить на сервер.Многое произошло с тех пор, как я впервые опубликовал этот ответ. CLI наконец-то вышел на 1.0.0, поэтому, следуя этому руководству, обновите ваш проект, прежде чем пытаться его собрать. https://github.com/angular/angular-cli/wiki/stories-rc-update
источник
С Angular CLI это легко. Пример для Heroku:
Создайте учетную запись Heroku и установите CLI
Перемещение
angular-cli
отда кdependencies
дюймуpackage.json
(так , что он получает установлен , когда вы нажимаете на Heroku.Добавьте
postinstall
скрипт, который будет запускаться,ng build
когда код будет отправлен в Heroku. Также добавьте команду запуска для Node-сервера, который будет создан на следующем шаге. Это поместит статические файлы для приложения вdist
каталог на сервере и запустит приложение позже.Вот краткая запись, которую я сделал, которая содержит более подробную информацию, в том числе, как заставить запросы использовать HTTPS и как обрабатывать
PathLocationStrategy
:)источник
Я использую с навсегда :
ng build --prod --output-path ./dist
Создайте файл server.js в вашем угловом пути приложения:
Начни навсегда
forever start server.js
Вот и все! Ваше приложение должно быть запущено!
источник
Надеюсь, это поможет, и, надеюсь, я попробую это в течение недели.
источник
Can't resolve 'node-uuid' in path\azure-deploy\lib
. Это все еще возможно? Я настроил шаг 5,app.module
и я не уверен, что сделал шаги 3 и 4 правильно. Не могли бы вы уточнить это?Если вы тестируете приложение вроде меня на локальном хосте или у вас будут проблемы с пустой белой страницей, я использую это:
Объяснение:
Создайте приложение, но в коде есть много пробелов, вкладок и прочего, что делает код читаемым человеком. Для сервера не важно, как выглядит код. Вот почему я использую:
Это делает код для производства и уменьшает размер [
--build-optimizer
], позволяет уменьшить больше кода].Поэтому в конце я добавляю
--base-href="http://127.0.0.1/my-app/"
приложение, чтобы показать, где находится «основной кадр» [простыми словами]. С его помощью вы можете иметь даже несколько угловых приложений в любой папке.источник
Чтобы развернуть приложение Angular2 на рабочем сервере, прежде всего, убедитесь, что ваше приложение работает локально на вашем компьютере.
Приложение Angular2 также может быть развернуто как приложение узла.
Итак, создайте файл точки входа узла server.js / app.js (в моем примере используется экспресс)
Также добавьте express в качестве зависимости в ваш файл package.json.
Затем разверните его в предпочитаемой среде.
Я собрал небольшой блог для развертывания на IIS. перейти по ссылке
источник
Для развертывания приложения в IIS выполните следующие действия.
Шаг 1. Создайте приложение Angular с помощью команды ng build --prod
Шаг 2: После сборки все файлы сохраняются в папке dist вашего приложения.
Шаг 3: Создайте папку в C: \ inetpub \ wwwroot по имени QRCode .
Шаг 4. Скопируйте содержимое папки dist в папку C: \ inetpub \ wwwroot \ QRCode .
Шаг 5. Откройте диспетчер IIS с помощью команды (Window + R) и введите inetmgr, нажмите ОК.
Шаг 6: Щелкните правой кнопкой мыши на веб-сайте по умолчанию и нажмите Добавить приложение .
Шаг 7. Введите псевдоним «QRCode» и задайте физический путь C: \ inetpub \ wwwroot \ QRCode .
Шаг 8: Откройте файл index.html, найдите строку href = "\" и удалите '\'.
Шаг 9: Теперь просмотрите приложение в любом браузере.
Вы также можете следить за видео для лучшего понимания.
URL видео: https://youtu.be/F8EI-8XUNZc
источник
Если вы развертываете свое приложение в Apache (Linux-сервер), то можете выполнить следующие шаги: Выполните следующие шаги :
Шаг 1 :
ng build --prod --env=prod
Шаг 2 . (Скопируйте dist на сервер), затем создайте папку dist, скопируйте папку dist и разверните ее в корневом каталоге сервера.
Шаг 3 . Создает
.htaccess
файл в корневой папке и вставляет его в.htaccess
источник
Вы получаете наименьшую и самую быструю загрузочную рабочую связку, компилируя ее с помощью компилятора Ahead of Time, и встряхиваете / минимизируете дерево с помощью накопительного пакета, как показано в угловой поваренной книге AOT, здесь: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html
Это также доступно с Angular-CLI, как сказано в предыдущих ответах, но если вы не сделали свое приложение с помощью CLI, вы должны следовать кулинарной книге.
У меня также есть рабочий пример с материалами и графиками SVG (при поддержке Angular2), который включает в себя комплект, созданный с помощью кулинарной книги AOT. Вы также найдете все конфигурации и скрипты, необходимые для создания пакета. Проверьте это здесь: https://github.com/fintechneo/angular2-templates/
Я сделал короткое видео, демонстрирующее разницу между количеством файлов и размером компиляции AoT и среды разработки. Он показывает проект из репозитория github выше. Вы можете увидеть это здесь: https://youtu.be/ZoZDCgQwnmQ
источник
"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
Развертывание Angular 2 на страницах Github
Тестирование развертывания Angular2 Webpack в ghpages
Сначала получите все соответствующие файлы из
dist
папки вашего приложения, для меня это были: + css файлы в папке активов + main.bundle.js + polyfills.bundle.js + vendor.bundle.jsЗатем вставьте эти файлы в репо, который вы создали.
1 - Если вы хотите, чтобы приложение запускалось в корневом каталоге - создайте специальное хранилище с именем [yourgithubusername] .github.io и поместите эти файлы в основную ветку
2 - Если вы хотите создать эти страницы в подкаталоге или в другой ветви, отличной от корневой, создайте ветку gh-pages и поместите эти файлы в эту ветку.
В обоих случаях способ доступа к этим развернутым страницам будет различным.
В первом случае это будет https: // [yourgithubusername] .github.io, а во втором случае это будет [yourgithubusername] .github.io / [Repo name] .
Если предполагается, что вы хотите развернуть его с использованием второго случая, обязательно измените базовый URL-адрес файла index.html в dist, поскольку все сопоставления маршрутов зависят от указанного вами пути, и для него должно быть установлено значение [/ branchname].
Ссылка на эту страницу
https://rahulrsingh09.github.io/Deployment
Гит Репо
https://github.com/rahulrsingh09/Deployment
источник
Для быстрого и дешевого способа размещения углового приложения я использовал хостинг Firbase. Это бесплатно на первом уровне и очень легко развертывать новые версии с помощью Firebase CLI. В этой статье описываются необходимые шаги для развертывания вашего производственного приложения angular 2 в Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d
Короче говоря, вы запускаете,
ng build --prod
который создает папку dist в пакете, и именно эта папка развертывается на хостинге Firebase.источник
Развернуть Angular 2 на лазурном языке легко
Запустите ng build --prod , который сгенерирует папку dist со всем, что связано внутри нескольких файлов, включая index.html.
Создайте группу ресурсов и веб-приложение внутри нее.
Поместите свои файлы папок dist, используя FTP. В Azure он будет искать index.html для запуска приложения.
Вот и все. Ваше приложение работает!
источник
Начиная с 2017 года, лучший способ - использовать angular- cli (v1.4.4) для вашего углового проекта.
Вам не нужно явно добавлять --aot, так как он включен по умолчанию с помощью --prod. И использование --output-hashing соответствует вашим личным предпочтениям в отношении взлома кэша.
Вы можете явно добавить поддержку CDN , добавив:
если вы планируете использовать CDN для хостинга, что значительно быстрее.
источник
С Angular CLI вы можете использовать следующую команду:
Он создает папку dist со всем необходимым для развертывания приложения.
Если у вас нет практики работы с веб-серверами, я рекомендую вам использовать Angular to Cloud . Вам просто нужно сжать папку dist в виде zip-файла и загрузить ее на платформу.
источник
Я бы сказал, что многие люди, имеющие опыт работы с Интернетом до angular, используют для развертывания своих веб-артефактов в войне (например, jquery и html внутри проекта Java / Spring). Я решил сделать это, чтобы обойти проблему с CORS, после того, как попытался разделить мои угловые и REST проекты.
Мое решение состояло в том, чтобы переместить все содержимое angular (4), созданное с помощью CLI, из my-app в MyJavaApplication / angular. Затем я изменил мою сборку Maven, чтобы использовать maven-resources-plugin для перемещения содержимого из / angular / dist в корень моего дистрибутива (т. Е. $ Project.build.directory} / MyJavaApplication). Angular загружает ресурсы из root of the war по умолчанию.
Когда я начал добавлять маршрутизацию в свой угловой проект, я дополнительно изменил сборку maven, чтобы скопировать index.html из / dist в WEB-INF / app. И добавил контроллер Java, который перенаправляет все остальные запросы на стороне сервера для индексации.
источник
Просто перейдите по ссылке ниже,
Измените путь к файлу сценария страницы index.html. Измените путь component.html, если вы получили ошибку, которая не смогла найти местоположение
https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy
источник