Jak wdrażasz aplikacje Angular?

Jak wdrażasz aplikacje Angular, gdy osiągną fazę produkcyjną?

Wszystkie przewodniki, które do tej pory widziałem (nawet na angular.io ) liczą na serwer lite do udostępniania i przeglądarkę Browser Sync, aby odzwierciedlały zmiany - ale kiedy skończysz programowanie, jak możesz opublikować aplikację?

Czy importuję wszystkie skompilowane .jspliki na index.htmlstronie, czy minimalizuję je za pomocą gulp? Czy będą działać? Czy w ogóle potrzebuję SystemJS w wersji produkcyjnej?

Jesteś tutaj, dotykając dwóch pytań w jednym.

Pierwszy to Jak hostować aplikację? .
Jak wspomniał @toskv, na jego naprawdę zbyt szerokie pytanie nie można odpowiedzieć i zależy od wielu różnych rzeczy.

Drugi to Jak przygotować wersję do wdrożenia aplikacji? .
Masz tutaj kilka opcji:

1. Wdróż bez zmian. Tylko tyle - brak minimalizacji, konkatenacji, zmiany nazw itp. Przełóż wszystkie swoje projekty ts skopiuj wszystkie wynikające z nich źródła js / css / ... + zależności na serwer hostingowy i gotowe.

2. Wdróż za pomocą specjalnych narzędzi do tworzenia pakietów, takich jak webpacklub systemjskreator.
   Pochodzą one ze wszystkimi możliwościami, których brakuje w # 1.
   Możesz spakować cały kod aplikacji w zaledwie kilka plików js / css / ..., do których odwołujesz się w kodzie HTML. systemjsKonstruktor pozwala nawet pozbyć się potrzeby dołączania systemjsjako części pakietu wdrożeniowego.

3. Możesz używać ng deployAngulara 8 do wdrażania aplikacji z poziomu interfejsu CLI. ng deploybędą musiały być używane w połączeniu z wybraną platformą (np. @angular/fire). Można sprawdzić oficjalne dokumenty, aby zobaczyć, co działa najlepiej dla Ciebie tutaj

Tak, najprawdopodobniej będziesz musiał wdrożyć systemjsi kilka innych bibliotek zewnętrznych jako część pakietu. I tak, będziesz mógł spakować je w zaledwie kilka plików js, do których odwołujesz się ze strony HTML.

Nie musisz jednak odwoływać się do wszystkich skompilowanych plików js ze strony - systemjszajmie się tym moduł ładujący.

Wiem, że to zabłocone - aby pomóc w rozpoczęciu pracy z numerem 2, oto dwie naprawdę dobre przykładowe aplikacje:

Konstruktor SystemJS : ziarno angular2

WebPack: angular2 webpack starter

Prosta odpowiedź. Użyj Angular CLI i wydaj

ng build 

polecenie w katalogu głównym twojego projektu. Witryna zostanie utworzona w katalogu dist i możesz ją wdrożyć na dowolnym serwerze WWW.

Spowoduje to zbudowanie do testu, jeśli masz w aplikacji ustawienia produkcyjne, których powinieneś użyć

ng build --prod

Spowoduje to zbudowanie projektu w distkatalogu i będzie można go przekazać na serwer.

Wiele się wydarzyło, odkąd po raz pierwszy opublikowałem tę odpowiedź. Interfejs CLI jest w wersji 1.0.0, więc postępując zgodnie z tym przewodnikiem, przejdź do aktualizacji, zanim projekt zacznie się kompilować. https://github.com/angular/angular-cli/wiki/stories-rc-update

Dzięki Angular CLI jest to łatwe. Przykład dla Heroku:

1. Utwórz konto Heroku i zainstaluj interfejs CLI

2. Przesuń angular-clidep do dependenciesIN package.json(tak, że zostaje zainstalowany po naciśnięciu do Heroku.

3. Dodaj postinstallskrypt, który uruchomi się, ng buildgdy kod zostanie przekazany do Heroku. Dodaj także polecenie start dla serwera węzłów, który zostanie utworzony w następnym kroku. Spowoduje to umieszczenie plików statycznych aplikacji w distkatalogu na serwerze, a następnie uruchomi aplikację.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

4. Utwórz serwer Express do obsługi aplikacji.

// 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. Utwórz pilota Heroku i naciśnij, aby wdrożyć aplikację.

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

Oto krótki napisany przeze mnie opis , który zawiera więcej szczegółów, w tym sposób wymuszania żądań użycia HTTPS i obsługi PathLocationStrategy:)

Używam z wiecznością :

1. Zbuduj swoją aplikację Angular z folderem angular-cli to distng build --prod --output-path ./dist

2. Utwórz plik server.js w ścieżce aplikacji 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. Zacznij na zawsze forever start server.js

To wszystko! Twoja aplikacja powinna działać!

Mam nadzieję, że to może pomóc i mam nadzieję, że spróbuję tego w ciągu tygodnia.

1. Utwórz aplikację sieci Web na platformie Azure
2. Utwórz aplikację Angular 2 w kodzie vs.
3. Pakiet Webpack do pliku bundle.js.
4. Pobierz xml opublikowany profil witryny Azure
5. Skonfiguruj wdrożenie platformy Azure za pomocą https://www.npmjs.com/package/azure-deploy z profilem witryny.
6. Rozmieścić.
7. Spróbuj kremu.

Jeśli testujesz aplikację taką jak ja na localhost lub będziesz mieć problemy z pustą białą stroną, używam tego:

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

Wyjaśnienie:

ng build

Twórz aplikacje, ale w kodzie jest wiele spacji, tabulatorów i innych rzeczy, dzięki którym kod może być odczytany przez człowieka. Dla serwera nie jest ważne, jak wygląda kod. Dlatego używam:

ng build --prod --build-optimizer 

To sprawia, że ​​kod jest produkowany i zmniejsza rozmiar [ --build-optimizer] pozwala zmniejszyć więcej kodu].

Na koniec dodaję, --base-href="http://127.0.0.1/my-app/"aby pokazać aplikacji, gdzie jest „główna ramka” [w prostych słowach]. Dzięki niemu możesz mieć nawet wiele aplikacji kątowych w dowolnym folderze.

Aby wdrożyć aplikację Angular2 na serwerze produkcyjnym, przede wszystkim upewnij się, że aplikacja działa lokalnie na komputerze.

Aplikację Angular2 można również wdrożyć jako aplikację węzła.

Utwórz plik punktu wejścia węzła server.js / app.js (w moim przykładzie użyto ekspresu)

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

Dodaj także ekspres jako zależność w pliku package.json.

Następnie wdróż go w preferowanym środowisku.

Założyłem małego bloga do wdrożenia w IIS. kliknij link

Aby wdrożyć aplikację w IIS, wykonaj poniższe czynności.

Krok 1: Zbuduj aplikację Angular za pomocą polecenia ng build --prod

Krok 2: Po kompilacji wszystkie pliki są przechowywane w folderze dist ścieżki aplikacji.

Krok 3: Utwórz folder w C: \ inetpub \ wwwroot według nazwy QRCode .

Krok 4: Skopiuj zawartość folderu dist do folderu C: \ inetpub \ wwwroot \ QRCode .

Krok 5: Otwórz Menedżera IIS za pomocą polecenia (Window + R) i wpisz inetmgr kliknij OK.

Krok 6: Kliknij prawym przyciskiem myszy domyślną stronę internetową i kliknij Dodaj aplikację .

Krok 7: Wpisz Alias ​​nazwę „QRCode” i ustaw fizyczną ścieżkę na C: \ inetpub \ wwwroot \ QRCode .

Krok 8: Otwórz plik index.html i znajdź wiersz href = „\” i usuń „\”.

Krok 9: Teraz przeglądaj aplikację w dowolnej przeglądarce.

Możesz również śledzić wideo, aby lepiej zrozumieć.

Adres URL wideo: https://youtu.be/F8EI-8XUNZc

Jeśli wdrożysz aplikację w Apache (serwer Linux), możesz wykonać następujące kroki: Wykonaj następujące kroki :

Krok 1 : ng build --prod --env=prod

Etap 2 . (Kopiuj dist na serwer), a następnie utworzony folder dist, skopiuj folder dist i zainstaluj go w katalogu głównym serwera.

Etap 3 . Tworzy .htaccessplik w folderze głównym i wklej go w.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>

Najmniejszy i najszybszy pakiet produkcyjny można załadować, kompilując z kompilatorem Ahead of Time, i potrząsając drzewem / minify z pakietem, jak pokazano w kanciastej książce kucharskiej AOT tutaj: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

Jest to również dostępne z interfejsem Angular-CLI, jak wspomniano w poprzednich odpowiedziach, ale jeśli nie utworzono aplikacji za pomocą interfejsu CLI, należy postępować zgodnie z książką kucharską.

Mam również działający przykład z materiałami i wykresami SVG (wspieranymi przez Angular2), że zawiera pakiet utworzony za pomocą książki kucharskiej AOT. Znajdziesz również wszystkie konfiguracje i skrypty potrzebne do utworzenia pakietu. Sprawdź to tutaj: https://github.com/fintechneo/angular2-templates/

Zrobiłem szybki film pokazujący różnicę między liczbą plików i rozmiarem kompilacji AoT a środowiskiem programistycznym. Pokazuje projekt z powyższego repozytorium github. Możesz to zobaczyć tutaj: https://youtu.be/ZoZDCgQwnmQ

Wdrożenie Angular 2 na stronach Github

Testowanie wdrożenia Angular2 Webpack na stronach ghpages

Najpierw pobierz wszystkie odpowiednie pliki z distfolderu aplikacji, dla mnie były to: + pliki css w folderze zasobów + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Następnie wypchnij te pliki do utworzonego repozytorium.

1 - Jeśli chcesz, aby aplikacja działała w katalogu głównym - utwórz specjalne repozytorium o nazwie [twoja_nazwa_użytkownika] .github.io i umieść te pliki w gałęzi głównej

2 - W przypadku, gdy chcesz utworzyć te strony w podkatalogu lub w innej gałęzi niż główna, utwórz gałąź strony gh i wypchnij te pliki w tej gałęzi.

W obu przypadkach sposób, w jaki uzyskujemy dostęp do tych wdrożonych stron, będzie inny.

W pierwszym przypadku będzie to https: // [twojagithubusername] .github.io, a w drugim przypadku będzie to [twojgithubusername] .github.io / [Repo name] .

Jeśli załóżmy, że chcesz go wdrożyć przy użyciu drugiego przypadku, pamiętaj o zmianie podstawowego adresu URL pliku index.html w dist, ponieważ wszystkie odwzorowania tras zależą od podanej ścieżki i należy ustawić ją na [/ branchname].

Link do tej strony

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

Aby szybko i tanio hostować aplikację kątową, korzystam z hostingu Firbase. Jest bezpłatny na pierwszym poziomie i bardzo łatwo wdrażać nowe wersje za pomocą interfejsu Firebase CLI. W tym artykule wyjaśniono niezbędne kroki, aby wdrożyć produkcyjną aplikację kątową 2 w Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

Krótko mówiąc, uruchomisz, ng build --prodktóry tworzy folder dist w pakiecie i jest to folder, który jest wdrażany w Firebase Hosting.

Wdrożenie Angular 2 w lazurach jest łatwe

1. Uruchom ng build --prod , który wygeneruje folder dist ze wszystkim zawartym w kilku plikach, w tym index.html.

2. Utwórz w niej grupę zasobów i aplikację internetową.

3. Umieść pliki folderów dist za pomocą FTP. W lazurowym wyszuka index.html do uruchomienia aplikacji.

Otóż ​​to. Twoja aplikacja działa!

Od 2017 roku najlepszym sposobem jest użycie angular-cli (v1.4.4) dla twojego projektu kątowego.

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

Nie musisz dodawać --aot, ponieważ jest ona domyślnie włączona z opcją --prod. A użycie opcji --output-hashed jest zgodne z twoimi osobistymi preferencjami dotyczącymi pękania pamięci podręcznej.

Możesz jawnie dodać obsługę CDN , dodając:

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

jeśli planujesz używać CDN do hostingu, który jest znacznie szybki.

Za pomocą Angular CLI możesz użyć następującego polecenia:

ng build --prod

Generuje folder dist ze wszystkim, czego potrzebujesz do wdrożenia aplikacji.

Jeśli nie masz doświadczenia z serwerami internetowymi, zalecamy użycie Angular do chmury . Wystarczy skompresować folder dist jako plik zip i załadować go na platformę.

Powiedziałbym, że wiele osób z doświadczeniem internetowym przed angażowaniem się w sieć, jest przyzwyczajonych do rozmieszczania swoich artefaktów podczas wojny (tj. Jquery i html w projekcie Java / Spring). Skończyło się na tym, aby obejść problem CORS, po próbie oddzielenia moich projektów kątowych i REST.

Moim rozwiązaniem było przeniesienie całej zawartości kątowej (4), wygenerowanej za pomocą CLI, z mojej aplikacji do MyJavaApplication / angular. Następnie zmodyfikowałem moją wersję Maven, aby używać wtyczki maven-resources-plugin do przenoszenia zawartości z katalogu / angular / dist do katalogu głównego mojej dystrybucji (tj. $ Project.build.directory} / MyJavaApplication). Angular domyślnie ładuje zasoby od źródła wojny.

Kiedy zacząłem dodawać routing do mojego projektu kątowego, zmodyfikowałem kompilację maven, aby skopiować plik index.html z / dist do WEB-INF / app. I dodano kontroler Java, który przekierowuje wszystkie wywołania odpoczynku po stronie serwera do indeksu.

Po prostu kliknij poniższy link,

Zmień stronę Index.html Ścieżki do pliku skryptu Zmień ścieżkę do pliku component.html mogą wystąpić błędy, które nie mogą znaleźć lokalizacji

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