Як розгортати кутові програми?

Як ви розгортаєте програми Angular, коли вони досягають фази виробництва?

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

Чи імпортую всі скомпільовані .jsфайли на index.htmlсторінку чи їх мінімізую за допомогою gulp? Чи будуть вони працювати? Чи потрібен мені SystemJS взагалі у виробничій версії?

Ви насправді тут торкаєтесь двох питань в одному.

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

Другий - Як ви підготуєте версію програми для розгортання? .
Тут у вас є кілька варіантів:

1. Розгортайте як є. Просто це - ніяких мінімізацій, конкатенацій, керування іменами тощо. Транспілюйте всі ваші проектні копії всіх своїх джерел js / css / ... + залежностей на хостинг-сервер, і ви готові йти.

2. Розгортати за допомогою спеціальних інструментів для комплектування, як-от webpackабо systemjsbuilder.
   Вони мають усі можливості, яких не вистачає в №1.
   Ви можете упакувати весь код програми лише в пару файлів js / css / ..., на які ви посилаєтесь у своєму HTML. systemjsbuilder навіть дозволяє позбутися від необхідності включити systemjsдо складу пакету розгортання.

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

Так, вам, швидше за все, потрібно буде розгорнути systemjsта купувати інші зовнішні бібліотеки як частину вашого пакету. І так, ви зможете з'єднати їх у декілька файлів js, на які ви посилаєтесь зі своєї HTML сторінки.

Не потрібно посилатися на всі ваші компільовані файли js зі сторінки - systemjsяк завантажувач модулів подбає про це.

Я знаю, що це звучить каламутно - щоб розпочати роботу з №2, ось два справді хороших зразка програми:

SystemJS builder: кутовий2 насіння

WebPack : angular2 webpack starter

Проста відповідь. Використовуйте кутовий CLI та видайте

ng build 

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

Це буде створено для тестування, якщо у вашому додатку є виробничі налаштування

ng build --prod

Це створить проект у distкаталозі, і це може бути натиснуто на сервер.

Багато що трапилося з моменту вперше опублікування цієї відповіді. Зрештою, CLI знаходиться на рівні 1.0.0, тому дотримуючись цього посібника, перейдіть до оновлення свого проекту, перш ніж спробувати створити його. https://github.com/angular/angular-cli/wiki/stories-rc-update

З кутовим 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 to distng build --prod --output-path ./dist

2. Створіть файл server.js у вашому шляху програми Angular:

   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. Вебпакет до bundle.js.
4. Завантажте на сайті Azure опублікований профіль xml
5. Налаштуйте Azure-розгортання за допомогою https://www.npmjs.com/package/azure-deploy з профілем сайту.
6. Розгортання.
7. Смак вершків.

Якщо ви тестуєте додаток, як я, на localhost або у вас виникнуть проблеми з порожньою білою сторінкою, я використовую це:

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 (мій приклад використовує express)

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'));
});

Також додайте експрес як залежність у файл 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 і натисніть кнопку OK.

Крок 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

Кутове 2 розгортання на сторінках Github

Тестування розгортання Webpack Angular2 в ghpages

Спочатку отримайте всі відповідні файли з distпапки вашої програми, для мене це: + файли css у папці активів + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Потім натисніть ці файли в репо, яку ви створили.

1 - Якщо ви хочете, щоб програма запускалася в кореневій директорії - створіть спеціальне репо з ім'ям [yourgithubusername] .github.io і натисніть ці файли у головній гілці

2 - Де так, як ніби ви хочете створити цю сторінку в підкаталозі або в іншій гілці, окрім кореня, створіть gh-сторінки гілки та натисніть ці файли у цій гілці.

В обох випадках спосіб доступу до цих розгорнутих сторінок буде різним.

Для першого випадку це буде https: // [yourgithubusername] .github.io, а для другого випадку це буде [yourgithubusername] .github.io / [ім'я Repo] .

Якщо припустимо, що ви хочете розгорнути його за допомогою другого випадку, переконайтеся, що ви зміните базовий URL-адресу файлу index.html на розріз, оскільки всі відображення маршруту залежать від шляху, який ви надаєте, і його слід встановити на [/ ім'я гілки].

Посилання на цю сторінку

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

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

Коротше кажучи, ви запускаєте, ng build --prodяка створює папку dist у пакеті, і це папка, яка розгорнута на Firebase хостинг.

Розгортання кута 2 в лазурі дуже просто

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

2. Створіть у ній групу ресурсів та веб-додаток.

3. Розмістіть файли ваших папок за допомогою FTP. У лазурі він шукатиме index.html для запуску програми.

Це воно. Ваш додаток працює!

Станом на 2017 рік найкращим способом є використання angular -cli (v1.4.4) для вашого кутового проекту.

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

Вам не потрібно додавати --aot явно, оскільки його за замовчуванням увімкнено за допомогою --prod.І використання --outout-хешування відповідно до ваших особистих переваг щодо розриву кешу.

Ви можете явно додати підтримку CDN , додавши:

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

якщо ви плануєте використовувати CDN для хостингу, який значно швидше.

За допомогою Angular CLI ви можете використовувати таку команду:

ng build --prod

Він створює папку dist з усім необхідним для розгортання програми.

Якщо у вас немає практики з веб-серверами, я рекомендую вам використовувати Angular to Cloud . Вам просто потрібно стиснути папку dist як zip-файл і завантажити її на платформу.

Я б сказав, що багато людей, які мають досвід роботи в Інтернеті до кутового, використовують для розгортання своїх веб-артефактів всередині війни (тобто jquery та html всередині проекту Java / Spring). Я в кінцевому підсумку робив це, щоб вирішити проблему CORS, після того, як я намагався розділити мої кутові проекти та проекти REST.

Моє рішення полягало в тому, щоб перемістити весь кутовий (4) вміст, створений за допомогою CLI, з мого додатка до MyJavaApplication / angular. Потім я модифікував свою збірку Maven, щоб використовувати maven-ресурси-плагін для переміщення вмісту з / angular / dist до кореня мого розповсюдження (тобто $ project.build.directory} / MyJavaApplication). Кутове завантаження ресурсів з кореня війни за замовчуванням.

Коли я почав додавати маршрутизацію до свого кутового проекту, я далі модифікував збірку maven, щоб скопіювати index.html з / dist в WEB-INF / додаток. І додав контролер Java, який перенаправляє всі дзвінки відпочинку на стороні сервера, щоб індексувати.

Просто перейдіть за посиланням нижче,

Змінення вашої сторінки Index.html Шляхи до файлу сценарію Змініть шлях компонент.html у випадку помилки отримання, яка не могла знайти місцезнаходження

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