Sie berühren hier tatsächlich zwei Fragen in einer.
Der erste ist Wie hosten Sie Ihre Anwendung? .
Und wie @toskv erwähnte, ist seine Frage wirklich zu weit gefasst, um beantwortet zu werden, und hängt von zahlreichen verschiedenen Dingen ab.
Die zweite ist Wie bereiten Sie die Bereitstellungsversion der Anwendung vor? .
Sie haben hier mehrere Möglichkeiten:
- Bereitstellen wie es ist. Nur das - keine Minimierung, Verkettung, Namensveränderung usw. Transpilieren Sie alle Ihre ts-Projekte, kopieren Sie alle resultierenden js / css / ... -Quellen + Abhängigkeiten auf den Hosting-Server und Sie können loslegen.
Bereitstellung mit speziellen Bündelungstools wie webpack
oder systemjs
Builder.
Sie kommen mit allen Möglichkeiten, die in # 1 fehlen.
Sie können Ihren gesamten App-Code in nur ein paar js / css / ... -Dateien packen, auf die Sie in Ihrem HTML-Code verweisen. systemjs
Mit Builder können Sie sogar die Notwendigkeit beseitigen systemjs
, sie in Ihr Bereitstellungspaket aufzunehmen.
Sie können verwendet werden, ng deploy
wie von Angular 8 Ihre App von Ihrem CLI bereitstellen. ng deploy
muss in Verbindung mit der Plattform Ihrer Wahl (z. B. @angular/fire
) verwendet werden. Sie können die offiziellen Dokumente überprüfen , um zu sehen , was am besten für Sie hier
Ja, Sie müssen höchstwahrscheinlich eine systemjs
Reihe anderer externer Bibliotheken als Teil Ihres Pakets bereitstellen . Und ja, Sie können sie in nur ein paar js-Dateien bündeln, auf die Sie auf Ihrer HTML-Seite verweisen.
Sie müssen jedoch nicht alle kompilierten js-Dateien von der Seite referenzieren - systemjs
ein Modullader kümmert sich darum.
Ich weiß, es klingt matschig - um Ihnen den Einstieg in die Nummer 2 zu erleichtern, finden Sie hier zwei wirklich gute Beispielanwendungen:
SystemJS Builder: Angular2 Seed
WebPack: Angular2 Webpack Starter
node_modules
. Hinweis - Sie sollten nur Abhängigkeiten kopieren, die für die Ausführung des Programms erforderlich sind. Kopieren Sie keine Deps, die nur für die Entwicklung verwendet werden (z. B. gulp / grunt / etc).Einfache Antwort. Verwenden Sie die Angular CLI und geben Sie die aus
Befehl im Stammverzeichnis Ihres Projekts. Die Site wird im Verzeichnis dist erstellt und kann auf jedem Webserver bereitgestellt werden.
Dies wird zu Testzwecken erstellt, wenn Sie Produktionseinstellungen in Ihrer App haben, die Sie verwenden sollten
Dadurch wird das Projekt im
dist
Verzeichnis erstellt und kann auf den Server übertragen werden.Es ist viel passiert, seit ich diese Antwort zum ersten Mal gepostet habe. Die CLI hat endlich die Version 1.0.0. Wenn Sie diese Anleitung befolgen, sollten Sie Ihr Projekt aktualisieren, bevor Sie versuchen, es zu erstellen. https://github.com/angular/angular-cli/wiki/stories-rc-update
quelle
Mit der Angular CLI ist das ganz einfach. Ein Beispiel für Heroku:
Erstellen Sie ein Heroku-Konto und installieren Sie die CLI
Verschieben Sie das
angular-cli
Dep nachdependencies
Inpackage.json
(damit es installiert wird, wenn Sie auf Heroku drücken.Fügen Sie ein
postinstall
Skript hinzu, das ausgeführt wird,ng build
wenn der Code an Heroku gesendet wird. Fügen Sie außerdem einen Startbefehl für einen Knotenserver hinzu, der im folgenden Schritt erstellt wird. Dadurch werden die statischen Dateien für die App in einemdist
Verzeichnis auf dem Server abgelegt und die App anschließend gestartet.Hier ist eine kurze Beschreibung, die ich gemacht habe und die detaillierter ist, einschließlich des Erzwingens von Anforderungen zur Verwendung von HTTPS und des Umgangs mit
PathLocationStrategy
:)quelle
Ich benutze mit für immer :
ng build --prod --output-path ./dist
Erstellen Sie die Datei server.js in Ihrem Angular-Anwendungspfad:
Beginne für immer
forever start server.js
Das ist alles! Ihre Anwendung sollte ausgeführt werden!
quelle
Hoffentlich kann dies helfen, und ich werde es hoffentlich während der Woche versuchen.
quelle
Can't resolve 'node-uuid' in path\azure-deploy\lib
. Ist das noch möglich? Ich habe Schritt 5 in konfiguriertapp.module
und bin mir nicht sicher, ob ich Schritt 3 und 4 richtig ausgeführt habe. Könnten Sie diese klären?Wenn Sie eine App wie mich auf localhost testen oder Probleme mit einer leeren weißen Seite haben, verwende ich diese:
Erläuterung:
App erstellen, aber im Code gibt es viele Leerzeichen, Tabulatoren und andere Dinge, die es ermöglichen, dass Code von Menschen gelesen werden kann. Für Server ist es nicht wichtig, wie Code aussieht. Deshalb benutze ich:
Dies macht Code für die Produktion aus und reduziert die Größe [
--build-optimizer
] ermöglicht es, mehr Code zu reduzieren].Also füge ich am Ende hinzu
--base-href="http://127.0.0.1/my-app/"
, um der Anwendung zu zeigen, wo sich der 'Hauptrahmen' befindet [in einfachen Worten]. Mit ihm können Sie sogar mehrere eckige Apps in jedem Ordner haben.quelle
Um Ihre Angular2-App auf einem Produktionsserver bereitzustellen, stellen Sie in erster Linie sicher, dass Ihre App lokal auf Ihrem Computer ausgeführt wird.
Die Angular2-App kann auch als Knoten-App bereitgestellt werden.
Erstellen Sie also eine Knoteneintrittspunktdatei server.js / app.js (in meinem Beispiel wird express verwendet).
Fügen Sie auch ausdrücklich als eine Abhängigkeit in Ihrer package.json Datei.
Stellen Sie es dann in Ihrer bevorzugten Umgebung bereit.
Ich habe einen kleinen Blog für die Bereitstellung auf IIS zusammengestellt. Folgen Sie dem Link
quelle
Führen Sie die folgenden Schritte aus, um Ihre Anwendung in IIS bereitzustellen.
Schritt 1: Erstellen Sie Ihre Angular-Anwendung mit dem Befehl ng build --prod
Schritt 2: Nach dem Erstellen werden alle Dateien im dist-Ordner Ihres Anwendungspfads gespeichert.
Schritt 3: Erstellen Sie einen Ordner in C: \ inetpub \ wwwroot mit dem Namen QRCode .
Schritt 4: Kopieren Sie den Inhalt des dist-Ordners in den Ordner C: \ inetpub \ wwwroot \ QRCode .
Schritt 5: Öffnen Sie den IIS-Manager mit dem Befehl (Fenster + R) und geben Sie inetmgr ein. Klicken Sie auf OK.
Schritt 6: Klicken Sie mit der rechten Maustaste auf Standardwebsite und klicken Sie auf Anwendung hinzufügen .
Schritt 7: Geben Sie den Aliasnamen 'QRCode' ein und setzen Sie den physischen Pfad auf C: \ inetpub \ wwwroot \ QRCode .
Schritt 8: Öffnen Sie die Datei index.html , suchen Sie die Zeile href = "\" und entfernen Sie '\'.
Schritt 9: Durchsuchen Sie nun die Anwendung in einem beliebigen Browser.
Sie können dem Video auch zum besseren Verständnis folgen.
Video-URL: https://youtu.be/F8EI-8XUNZc
quelle
Wenn Sie Ihre Anwendung in Apache (Linux-Server) bereitstellen, können Sie die folgenden Schritte ausführen : Führen Sie die folgenden Schritte aus :
Schritt 1 :
ng build --prod --env=prod
Schritt 2 . (Kopieren Sie dist in den Server), dann erstellen Sie den dist-Ordner, kopieren Sie den dist-Ordner und stellen Sie ihn im Stammverzeichnis des Servers bereit.
Schritt 3 . Erstellt eine
.htaccess
Datei im Stammordner und fügt diese in den Ordner ein.htaccess
quelle
Sie erhalten das kleinste und am schnellsten ladende Produktionspaket, indem Sie es mit dem Ahead of Time-Compiler kompilieren und mit Rollup baumschütteln / minimieren, wie im eckigen AOT-Kochbuch hier gezeigt: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html
Dies ist auch mit der Angular-CLI verfügbar, wie in den vorherigen Antworten angegeben. Wenn Sie Ihre App jedoch nicht mit der CLI erstellt haben, sollten Sie dem Kochbuch folgen.
Ich habe auch ein Arbeitsbeispiel mit Materialien und SVG-Diagrammen (unterstützt von Angular2), das ein mit dem AOT-Kochbuch erstelltes Bundle enthält. Sie finden auch alle Konfigurationen und Skripte, die zum Erstellen des Bundles erforderlich sind. Überprüfen Sie es hier: https://github.com/fintechneo/angular2-templates/
Ich habe ein kurzes Video gemacht, das den Unterschied zwischen der Anzahl der Dateien und der Größe eines AoT-kompilierten Builds im Vergleich zu einer Entwicklungsumgebung zeigt. Es zeigt das Projekt aus dem obigen Github-Repository. Sie können es hier sehen: https://youtu.be/ZoZDCgQwnmQ
quelle
"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
Angular 2-Bereitstellung in Github-Seiten
Testen der Bereitstellung von Angular2 Webpack in ghpages
Holen Sie sich zuerst alle relevanten Dateien aus dem
dist
Ordner Ihrer Anwendung, für mich waren es die: + CSS-Dateien im Assets-Ordner + main.bundle.js + polyfills.bundle.js + vendor.bundle.jsSchieben Sie diese Dateien dann in das von Ihnen erstellte Repo.
1 - Wenn die Anwendung im Stammverzeichnis ausgeführt werden soll, erstellen Sie ein spezielles Repo mit dem Namen [yourgithubusername] .github.io und verschieben Sie diese Dateien in den Hauptzweig
2 - Wenn Sie diese Seite im Unterverzeichnis oder in einem anderen Zweig als dem Stamm erstellen möchten, erstellen Sie einen Zweig gh-pages und verschieben Sie diese Dateien in diesen Zweig.
In beiden Fällen ist die Art und Weise, wie wir auf diese bereitgestellten Seiten zugreifen, unterschiedlich.
Im ersten Fall ist es https: // [yourgithubusername] .github.io und im zweiten Fall ist es [yourgithubusername] .github.io / [Repo name] .
Wenn Sie es im zweiten Fall bereitstellen möchten, müssen Sie die Basis-URL der Datei index.html in dist ändern, da alle Routenzuordnungen von dem von Ihnen angegebenen Pfad abhängen und auf [/ branchname] gesetzt werden sollten.
Link zu dieser Seite
https://rahulrsingh09.github.io/Deployment
Git Repo
https://github.com/rahulrsingh09/Deployment
quelle
Für eine schnelle und kostengünstige Möglichkeit, eine eckige App zu hosten, habe ich das Firbase-Hosting verwendet. Es ist kostenlos auf der ersten Ebene und sehr einfach, neue Versionen mithilfe der Firebase-CLI bereitzustellen. In diesem Artikel werden die erforderlichen Schritte zum Bereitstellen Ihrer Production Angular 2-App für Firebase erläutert: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d
Kurz gesagt, Sie führen
ng build --prod
einen dist-Ordner im Paket aus, und dieser Ordner wird für Firebase Hosting bereitgestellt.quelle
Die Bereitstellung von Angular 2 in Azure ist einfach
Führen Sie ng build --prod aus , wodurch ein dist-Ordner generiert wird, in dem alles in wenigen Dateien enthalten ist, einschließlich index.html.
Erstellen Sie eine Ressourcengruppe und eine Web-App darin.
Platzieren Sie Ihre dist-Ordner-Dateien über FTP. In Azure wird nach index.html gesucht, um die Anwendung auszuführen.
Das ist es. Ihre App läuft!
quelle
Ab 2017 ist es am besten, Angular -Cli (v1.4.4) für Ihr Winkelprojekt zu verwenden.
Sie müssen --aot nicht explizit hinzufügen, da es standardmäßig mit --prod aktiviert ist. Die Verwendung von --output-hashing entspricht Ihren persönlichen Vorlieben hinsichtlich des Cache-Bursts.
Sie können CDN- Unterstützung explizit hinzufügen, indem Sie Folgendes hinzufügen:
Wenn Sie CDN für das Hosting verwenden möchten, ist dies sehr schnell.
quelle
Mit Angular CLI können Sie den folgenden Befehl verwenden:
Es wird ein dist-Ordner mit allem erstellt, was Sie zum Bereitstellen der Anwendung benötigen.
Wenn Sie keine Erfahrung mit Webservern haben, empfehle ich Ihnen, Angular to Cloud zu verwenden . Sie müssen nur den dist-Ordner als Zip-Datei komprimieren und auf die Plattform hochladen.
quelle
Ich würde sagen, dass viele Leute mit Web-Erfahrung vor Angular es gewohnt sind, ihre Web-Artefakte innerhalb eines Krieges bereitzustellen (dh JQuery und HTML in einem Java / Spring-Projekt). Am Ende habe ich dies getan, um das CORS-Problem zu umgehen, nachdem ich versucht hatte, meine Winkel- und REST-Projekte getrennt zu halten.
Meine Lösung bestand darin, alle mit CLI generierten eckigen (4) Inhalte von my-app nach MyJavaApplication / angle zu verschieben. Dann habe ich meinen Maven-Build so geändert, dass er den Maven-Resources-Plugin verwendet, um den Inhalt von / angle / dist in das Stammverzeichnis meiner Distribution zu verschieben (dh $ project.build.directory} / MyJavaApplication). Angular lädt standardmäßig Ressourcen aus der Wurzel des Krieges.
Als ich anfing, meinem Winkelprojekt Routing hinzuzufügen, habe ich den Maven-Build weiter modifiziert, um index.html von / dist nach WEB-INF / app zu kopieren. Außerdem wurde ein Java-Controller hinzugefügt, der alle serverseitigen Restaufrufe zum Index umleitet.
quelle
Folgen Sie einfach dem unten stehenden Link,
Ändern Sie Ihre Index.html-Seite. Skriptdateipfade Ändern Sie Ihren component.html-Pfad, falls Sie einen Fehler erhalten, der den Speicherort nicht finden konnte
https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy
quelle