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:
- 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.
Wdróż za pomocą specjalnych narzędzi do tworzenia pakietów, takich jak webpack
lub systemjs
kreator.
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. systemjs
Konstruktor pozwala nawet pozbyć się potrzeby dołączania systemjs
jako części pakietu wdrożeniowego.
Możesz używać ng deploy
Angulara 8 do wdrażania aplikacji z poziomu interfejsu CLI. ng deploy
bę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ć systemjs
i 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 - systemjs
zajmie 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
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).Prosta odpowiedź. Użyj Angular CLI i wydaj
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ć
Spowoduje to zbudowanie projektu w
dist
katalogu 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
źródło
Dzięki Angular CLI jest to łatwe. Przykład dla Heroku:
Utwórz konto Heroku i zainstaluj interfejs CLI
Przesuń
angular-cli
dep dodependencies
INpackage.json
(tak, że zostaje zainstalowany po naciśnięciu do Heroku.Dodaj
postinstall
skrypt, który uruchomi się,ng build
gdy 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 wdist
katalogu na serwerze, a następnie uruchomi aplikację.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
:)źródło
Używam z wiecznością :
ng build --prod --output-path ./dist
Utwórz plik server.js w ścieżce aplikacji Angular:
Zacznij na zawsze
forever start server.js
To wszystko! Twoja aplikacja powinna działać!
źródło
Mam nadzieję, że to może pomóc i mam nadzieję, że spróbuję tego w ciągu tygodnia.
źródło
Can't resolve 'node-uuid' in path\azure-deploy\lib
. Czy to nadal możliwe? Skonfigurowałem krok 5app.module
i nie jestem pewien, czy poprawnie wykonałem krok 3 i 4. Czy możesz to wyjaśnić?Jeśli testujesz aplikację taką jak ja na localhost lub będziesz mieć problemy z pustą białą stroną, używam tego:
Wyjaśnienie:
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:
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.źródło
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)
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
źródło
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
źródło
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
.htaccess
plik w folderze głównym i wklej go w.htaccess
źródło
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
źródło
"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
Wdrożenie Angular 2 na stronach Github
Testowanie wdrożenia Angular2 Webpack na stronach ghpages
Najpierw pobierz wszystkie odpowiednie pliki z
dist
folderu aplikacji, dla mnie były to: + pliki css w folderze zasobów + main.bundle.js + polyfills.bundle.js + vendor.bundle.jsNastę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
źródło
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 --prod
który tworzy folder dist w pakiecie i jest to folder, który jest wdrażany w Firebase Hosting.źródło
Wdrożenie Angular 2 w lazurach jest łatwe
Uruchom ng build --prod , który wygeneruje folder dist ze wszystkim zawartym w kilku plikach, w tym index.html.
Utwórz w niej grupę zasobów i aplikację internetową.
Umieść pliki folderów dist za pomocą FTP. W lazurowym wyszuka index.html do uruchomienia aplikacji.
Otóż to. Twoja aplikacja działa!
źródło
Od 2017 roku najlepszym sposobem jest użycie angular-cli (v1.4.4) dla twojego projektu kątowego.
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:
jeśli planujesz używać CDN do hostingu, który jest znacznie szybki.
źródło
Za pomocą Angular CLI możesz użyć następującego polecenia:
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ę.
źródło
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.
źródło
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
źródło