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

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

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

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

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

Первый - Как разместить ваше приложение? ,
И как @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, веб-пакет для начинающих

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

ng build 

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

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

ng build --prod

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

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

С 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"
}

4. Создайте сервер 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);

5. Создайте пульт Heroku и нажмите, чтобы закрыть приложение.

heroku create
git add .
git commit -m "first deploy"
git push heroku master

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

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

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

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

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

1. Создать веб-приложение в Azure
2. Создайте приложение Angular 2 против кода.
3. Webpack для bundle.js.
4. Скачать сайт Azure, опубликованный профиль xml
5. Настройте развертывание Azure, используя https://www.npmjs.com/package/azure-deploy с профилем сайта.
6. Deploy.
7. Попробуйте крем.

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

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/"приложение, чтобы показать, где находится «основной кадр» [простыми словами]. С его помощью вы можете иметь даже несколько угловых приложений в любой папке.

Чтобы развернуть приложение 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. перейти по ссылке

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

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

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

Развертывание 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 на лазурном языке легко

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

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

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

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

Начиная с 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 для хостинга, что значительно быстрее.

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

ng build --prod

Он создает папку 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