Jak wdrażasz aplikacje Angular?

194

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?

Joseph Girgis
źródło

Odpowiedzi:

91

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

Wśród
źródło
1
Poleciłbym również JSPM ( jspm.io ): informacje tutaj gist.github.com/robwormald/429e01c6d802767441ec i projekt nasion tutaj github.com/madhukard/angular2-jspm-seed
Harry
Po 6 miesiącach, gdy Angular2 jest w rc5 i zostanie wkrótce wydany, ta odpowiedź jest nadal aktualna, ponieważ odnosi się do projektu nasion angular2. Świetny projekt, wielu współpracowników!
lame_coder
3
Nadal jestem bardzo mylony z punktem (1). Co oznacza wdrożenie „TAK JAK JEST”? Czy to oznacza również skopiowanie wszystkich 50000 plików modułu_węzła? Próbuję wdrożyć przykład HEROES i nie jestem pewien, co dodać jako źródło skryptu w pliku indeksu.
Oliver Watkins
1
Tak - oznacza to skopiowanie wszystkich twoich zależności, w tym również tych z node_modules. Uwaga - należy kopiować tylko zależności wymagane do uruchomienia programu. Nie kopiuj dep, które są używane tylko do programowania (na przykład gulp / grunt / etc).
Wśród
1
Tak. W tym pliku system.js jest instruowany, jakie są i gdzie załadować ze wszystkich swoich zależności.
Wśród
88

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

Nate Bunney
źródło
Jak to robisz? Po szybkim uruchomieniu Angulara 2 uruchamiam to polecenie zamiast „npm start” i otrzymuję polecenie „ng not found”
Rahly,
1
@NateBunney Jestem nowy na scenie tworzenia stron internetowych. Jestem zdezorientowany. ng build tworzy kilka plików w folderze dist. Powiedzmy, że używasz Spring Boot jako serwera WWW, czy po prostu kopiujesz te pliki do publicznego folderu inf-web w Spring Boot? A może potrzebujesz serwera nodejs przed wiosennym bootowaniem, aby obsługiwać ng2 dist?
Srikanth,
3
Dlaczego nie ma tego w dokumentacji? To wydaje się ogromnym pominięciem!
Kokodoko
Pamiętaj, że pierwsza wersja Angular 2 ma teraz zaledwie miesiąc.
Nate Bunney
1
@ user1460043, tak, ale istnieje łatwe rozwiązanie problemu. Wystarczy rzucić nowy kątowy projekt CLI i skopiować katalog src do projektu CLI.
Nate Bunney
21

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"
}
  1. 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);
  1. 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:)

cienki
źródło
dodanie kątowych cli w zależnościach zwiększa rozmiar dista, jak sobie z tym poradzić
Janak Bhatta
7

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ć!

Yakir Tsuberi
źródło
6

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.
użytkownik6402762
źródło
58
Proszę nie Microsoft tego typu rzeczy, ponieważ jest to po prostu zgodne z platformą Azure. To tak, jakby powiedzieć, że jeśli używasz Angulara, powinieneś mieć możliwość korzystania tylko z usług Google Cloud.
ozanmuyes
2
Warto wiedzieć, że istnieje moduł npm do wdrożenia na platformie Azure.
Anthony Brenelière
1
@ user6402762 +1 za Smakowanie śmietany.
Leonardo Wildt,
Próbuję wdrożyć moją aplikację internetową Angular 4 przy użyciu tej odpowiedzi, ale wciąż pojawiają się błędy Can't resolve 'node-uuid' in path\azure-deploy\lib. Czy to nadal możliwe? Skonfigurowałem krok 5 app.modulei nie jestem pewien, czy poprawnie wykonałem krok 3 i 4. Czy możesz to wyjaśnić?
Wouter Vanherck
6

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.

WatchTanis
źródło
5

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

Oduwole Oluwasegun
źródło
5

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

Avadhesh Maurya
źródło
4

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>
Sumit Jaiswal
źródło
jaki serwer? powinien być serwerem nginx lub tym, co będzie zawierać dist
famas23
To może być Tomcat, twój wybór. Powiedziałbym, że używaj tego, co znasz.
Wallace Howery
Dowolny używany serwer Apache Linux lub inny serwer, wherr .htaccess.
Sumit Jaiswal
@TamaghnaBanerjee, sprawdź, czy tryb ponownego zapisu serwera jest włączony czy nie?
Sumit Jaiswal
3

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

Peter Salomonsen
źródło
Dziękujemy za odniesienie do dokumentacji i za wspomnienie kompilacji AOT. Wartość brzmi prawdziwie,"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
aero
1
Dzięki za opinie - jeśli nie znalazłeś czasu na przetestowanie kompilacji AoT, dodałem film pokazujący różnicę w liczbie plików i rozmiarze (używając projektu github wymienionego w odpowiedzi).
Peter Salomonsen,
Niesamowite! Dzięki, że jesteś tak pomocny Peter!
aero
2

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

Rahul Singh
źródło
1

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.

npesa92
źródło
Dzięki - to był najprostszy sposób, jaki mogłem znaleźć.
Brian Burns
1

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!

Malatesh Patil
źródło
Tylko jeśli rozpoczniesz swój projekt od angular-cli nie?
Portekoi
Nie tak. Jeśli nie rozpocząłeś projektu angular2 przy użyciu angular-cli, możesz zbudować projekt do produkcji. Tylko musisz mieć zainstalowany kątowy-cli na komputerze w czasie kompilacji. Użyj npm install -g @ angular / cli, aby zainstalować angular-cli globalnie.
Malatesh Patil
1

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.

Kay
źródło
1

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ę.

Bruno Oliveira
źródło
1

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.

Wallace Howery
źródło