Как вы развертываете приложения Angular?

194

Как вы развертываете приложения Angular, как только они достигают производственной фазы?

Все руководства, которые я видел до сих пор (даже на angular.io ), рассчитывают на lite-сервер для обслуживания и browserSync для отражения изменений - но когда вы закончите разработку, как вы сможете опубликовать приложение?

Импортирую ли я все скомпилированные .jsфайлы на index.htmlстранице или минимизирую их, используя gulp? Будут ли они работать? Нужен ли вообще SystemJS в рабочей версии?

Джозеф Гиргис
источник

Ответы:

91

Вы на самом деле здесь, касаясь двух вопросов в одном.

Первый - Как разместить ваше приложение? ,
И как @toskv упомянул свой действительно слишком широкий вопрос, чтобы на него можно было ответить, и он зависит от множества разных вещей.

Второй : как подготовить версию для развертывания приложения? ,
У вас есть несколько вариантов здесь:

  1. Разверните как есть. Только это - без минификации, конкатенации, искажения имен и т. Д. Транспортируйте весь ваш проект ts, скопируйте все ваши полученные js / css / ... sources + зависимости на хост-сервер, и вы готовы к работе.
  2. Развертывание с использованием специальных инструментов комплектации, таких как webpackили systemjsстроитель.
    Они приходят со всеми возможностями, которые отсутствуют в # 1.
    Вы можете упаковать весь код своего приложения в пару файлов js / css / ..., на которые вы ссылаетесь в своем HTML. systemjsBuilder даже позволяет избавиться от необходимости включать его systemjsв состав пакета развертывания.

  3. Вы можете использовать ng deployначиная с Angular 8 для развертывания приложения из CLI. ng deployнеобходимо будет использовать вместе с выбранной вами платформой (например, @angular/fire). Вы можете проверить официальные документы, чтобы увидеть, что работает лучше для вас здесь

Да, вам, скорее всего, потребуется развернуть systemjsи связать другие внешние библиотеки как часть вашего пакета. И да, вы сможете объединить их в пару файлов js, на которые вы ссылаетесь со своей HTML-страницы.

Вам не обязательно ссылаться на все ваши скомпилированные js-файлы со страницы - systemjsоб этом позаботится загрузчик модулей.

Я знаю, это звучит грязно - чтобы помочь вам начать с # 2, вот два действительно хороших примера приложений:

Сборщик SystemJS: angular2 seed

WebPack: angular2, веб-пакет для начинающих

среди
источник
1
Я также рекомендовал бы JSPM ( jspm.io ): информация здесь gist.github.com/robwormald/429e01c6d802767441ec и начальный проект здесь github.com/madhukard/angular2-jspm-seed
Гарри
После 6 месяцев, когда Angular2 находится в rc5 и скоро будет выпущен, этот ответ по-прежнему актуален, поскольку он ссылается на начальный проект angular2. Отличный проект, много участников!
lame_coder
3
Я до сих пор в массовом замешательстве с пунктом (1). Что означает развертывание «КАК ЕСТЬ»? Означает ли это также копирование всех 50000 файлов node_module? Я пытаюсь развернуть пример HEROES и не уверен, что добавить в качестве источника сценария в индексном файле.
Оливер Уоткинс,
1
Да - это означает копирование всех ваших зависимостей, в том числе и из них node_modules. Примечание. Вам следует копировать только те зависимости, которые необходимы для запуска программы. Не копируйте deps, которые используются только для разработки (например, gulp / grunt / etc).
Среди
1
Да. В этом файле system.js указывается, что и где загружать из всех ваших зависимостей.
фоне
88

Простой ответ Используйте угловой CLI и выполните команду

ng build 

Команда в корневом каталоге вашего проекта. Сайт будет создан в каталоге dist, и вы можете развернуть его на любом веб-сервере.

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

ng build --prod

Это создаст проект в distкаталоге, и его можно будет отправить на сервер.

Многое произошло с тех пор, как я впервые опубликовал этот ответ. CLI наконец-то вышел на 1.0.0, поэтому, следуя этому руководству, обновите ваш проект, прежде чем пытаться его собрать. https://github.com/angular/angular-cli/wiki/stories-rc-update

Нейт Банни
источник
Как ты это делаешь? После быстрого запуска Angular 2 я запускаю эту команду вместо «npm start» и получаю «ng command not found»
Rahly
1
@NateBunney Я новичок в сцене веб-разработки. Я смущен. ng build производит кучу файлов в папке dist. Скажем, вы используете весеннюю загрузку в качестве веб-сервера, просто скопируйте и вставьте эти файлы в общедоступную папку web-inf при весенней загрузке? Или вам нужен сервер nodejs перед весенней загрузкой для обслуживания ng2 dist?
Срикант
3
Почему этого нет в документации? Это кажется огромным упущением!
Кокодоко
Помните, что первой версии Angular 2 едва исполнился месяц.
Нейт Банни
1
@ user1460043, да, но есть простое решение вашей проблемы. Просто накатайте новый угловой CLI-проект и скопируйте каталог src в CLI-проект.
Нейт Банни,
21

С Angular CLI это легко. Пример для Heroku:

  1. Создайте учетную запись Heroku и установите CLI

  2. Перемещение angular-cliотда к dependenciesдюйму package.json(так , что он получает установлен , когда вы нажимаете на Heroku.

  3. Добавьте postinstallскрипт, который будет запускаться, ng buildкогда код будет отправлен в Heroku. Также добавьте команду запуска для Node-сервера, который будет создан на следующем шаге. Это поместит статические файлы для приложения в distкаталог на сервере и запустит приложение позже.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}
  1. Создайте сервер Express для обслуживания приложения.
// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);
  1. Создайте пульт Heroku и нажмите, чтобы закрыть приложение.
heroku create
git add .
git commit -m "first deploy"
git push heroku master

Вот краткая запись, которую я сделал, которая содержит более подробную информацию, в том числе, как заставить запросы использовать HTTPS и как обрабатывать PathLocationStrategy:)

Cienki
источник
добавление angular-cli в зависимости увеличивает размер dist, как с этим справиться
Джанак Бхатта
7

Я использую с навсегда :

  1. Создайте свое приложение Angular с помощью angular-cli в папку distng build --prod --output-path ./dist
  2. Создайте файл server.js в вашем угловом пути приложения:

    const express = require('express');
    const path = require('path');
    
    const app = express();
    
    app.use(express.static(__dirname + '/dist'));
    
    app.get('/*', function(req,res) {
        res.sendFile(path.join(__dirname + '/dist/index.html'));
    });
    app.listen(80);
  3. Начни навсегда forever start server.js

Вот и все! Ваше приложение должно быть запущено!

Якир Цубери
источник
6

Надеюсь, это поможет, и, надеюсь, я попробую это в течение недели.

  1. Создать веб-приложение в Azure
  2. Создайте приложение Angular 2 против кода.
  3. Webpack для bundle.js.
  4. Скачать сайт Azure, опубликованный профиль xml
  5. Настройте развертывание Azure, используя https://www.npmjs.com/package/azure-deploy с профилем сайта.
  6. Deploy.
  7. Попробуйте крем.
user6402762
источник
58
Пожалуйста, не делайте подобных вещей в Microsoft, поскольку это просто совместимо с Azure. Это все равно что сказать, что если вы используете Angular, вы должны иметь возможность использовать только облачные сервисы Google.
ozanmuyes
2
Полезно знать, что для развертывания в Azure существует модуль npm.
Энтони Бренельер
1
@ user6402762 +1 для Вкус крема.
Леонардо Вильдт
Я пытаюсь развернуть свое Angular 4 веб-приложение, используя этот ответ, но я продолжаю получать ошибки, как Can't resolve 'node-uuid' in path\azure-deploy\lib. Это все еще возможно? Я настроил шаг 5, app.moduleи я не уверен, что сделал шаги 3 и 4 правильно. Не могли бы вы уточнить это?
Wouter Vanherck
6

Если вы тестируете приложение вроде меня на локальном хосте или у вас будут проблемы с пустой белой страницей, я использую это:

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

Объяснение:

ng build

Создайте приложение, но в коде есть много пробелов, вкладок и прочего, что делает код читаемым человеком. Для сервера не важно, как выглядит код. Вот почему я использую:

ng build --prod --build-optimizer 

Это делает код для производства и уменьшает размер [ --build-optimizer], позволяет уменьшить больше кода].

Поэтому в конце я добавляю --base-href="http://127.0.0.1/my-app/"приложение, чтобы показать, где находится «основной кадр» [простыми словами]. С его помощью вы можете иметь даже несколько угловых приложений в любой папке.

WatchTanis
источник
5

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

Приложение Angular2 также может быть развернуто как приложение узла.

Итак, создайте файл точки входа узла server.js / app.js (в моем примере используется экспресс)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

Также добавьте express в качестве зависимости в ваш файл package.json.

Затем разверните его в предпочитаемой среде.

Я собрал небольшой блог для развертывания на IIS. перейти по ссылке

Oduwole Oluwasegun
источник
5

Для развертывания приложения в 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

Авадеш Маурья
источник
4

Если вы развертываете свое приложение в Apache (Linux-сервер), то можете выполнить следующие шаги: Выполните следующие шаги :

Шаг 1 : ng build --prod --env=prod

Шаг 2 . (Скопируйте dist на сервер), затем создайте папку dist, скопируйте папку dist и разверните ее в корневом каталоге сервера.

Шаг 3 . Создает .htaccessфайл в корневой папке и вставляет его в.htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
Сумит Джайсвал
источник
что за сервер? должен быть сервером nginx или чем-то еще, что будет содержать dist
famas23
Может быть Tomcat, ваш выбор. Я бы сказал, используйте то, что вы знакомы.
Уоллес Хоури
Любой Apache Linux или другой сервер, где используются правила .htaccess.
Саммит Джайсвал
@TamaghnaBanerjee, проверить режим перезаписи сервера включен или нет?
Сумит Джайсвал
3

Вы получаете наименьшую и самую быструю загрузочную рабочую связку, компилируя ее с помощью компилятора 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

Питер Саломонсен
источник
Спасибо за ссылку на документацию и за упоминание компиляции AOT. Значение звучит реально,"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
аэро
1
Спасибо за отзыв - если вы не нашли время для тестирования AoT-компиляции самостоятельно, я добавил видео, показывающее разницу в количестве файлов и размере (используя проект github, указанный в ответе).
Питер Саломонсен
Потрясающие! Спасибо за помощь, Питер!
Аэро
2

Развертывание 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

Рахул Сингх
источник
1

Для быстрого и дешевого способа размещения углового приложения я использовал хостинг Firbase. Это бесплатно на первом уровне и очень легко развертывать новые версии с помощью Firebase CLI. В этой статье описываются необходимые шаги для развертывания вашего производственного приложения angular 2 в Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

Короче говоря, вы запускаете, ng build --prodкоторый создает папку dist в пакете, и именно эта папка развертывается на хостинге Firebase.

npesa92
источник
Спасибо - это был самый простой способ найти.
Брайан Бернс
1

Развернуть Angular 2 на лазурном языке легко

  1. Запустите ng build --prod , который сгенерирует папку dist со всем, что связано внутри нескольких файлов, включая index.html.

  2. Создайте группу ресурсов и веб-приложение внутри нее.

  3. Поместите свои файлы папок dist, используя FTP. В Azure он будет искать index.html для запуска приложения.

Вот и все. Ваше приложение работает!

Малатеш Патил
источник
Только если вы начнете свой проект с angular-cli нет?
Portekoi
Не таким образом. Если вы не запустили свой проект angular2 с помощью angular-cli, вы можете создать проект для производства. Только вам нужно установить angular-cli на вашем компьютере во время сборки. Используйте npm install -g @ angular / cli для глобальной установки angular-cli.
Малатеш Патил
1

Начиная с 2017 года, лучший способ - использовать angular- cli (v1.4.4) для вашего углового проекта.

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

Вам не нужно явно добавлять --aot, так как он включен по умолчанию с помощью --prod. И использование --output-hashing соответствует вашим личным предпочтениям в отношении взлома кэша.

Вы можете явно добавить поддержку CDN , добавив:

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

если вы планируете использовать CDN для хостинга, что значительно быстрее.

Кей
источник
1

С Angular CLI вы можете использовать следующую команду:

ng build --prod

Он создает папку dist со всем необходимым для развертывания приложения.

Если у вас нет практики работы с веб-серверами, я рекомендую вам использовать Angular to Cloud . Вам просто нужно сжать папку dist в виде zip-файла и загрузить ее на платформу.

Бруно Оливейра
источник
1

Я бы сказал, что многие люди, имеющие опыт работы с Интернетом до 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, который перенаправляет все остальные запросы на стороне сервера для индексации.

Уоллес Хоури
источник
-1

Просто перейдите по ссылке ниже,

Измените путь к файлу сценария страницы index.html. Измените путь component.html, если вы получили ошибку, которая не смогла найти местоположение

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy

Мухамед Шафик
источник