Wie stellen Sie Angular-Apps bereit?

Wie stellen Sie Angular-Apps bereit, sobald sie die Produktionsphase erreicht haben?

Alle Anleitungen, die ich bisher gesehen habe (sogar auf angle.io ), setzen auf einen Lite-Server für Serving und BrowserSync, um Änderungen widerzuspiegeln. Aber wie können Sie die App veröffentlichen, wenn Sie mit der Entwicklung fertig sind?

Importiere ich alle kompilierten .jsDateien auf der index.htmlSeite oder minimiere ich sie mit gulp? Werden sie arbeiten? Benötige ich überhaupt SystemJS in der Produktionsversion?

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:

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

2. Bereitstellung mit speziellen Bündelungstools wie webpackoder systemjsBuilder.
   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. systemjsMit Builder können Sie sogar die Notwendigkeit beseitigen systemjs, sie in Ihr Bereitstellungspaket aufzunehmen.

3. Sie können verwendet werden, ng deploywie von Angular 8 Ihre App von Ihrem CLI bereitstellen. ng deploymuss 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 systemjsReihe 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 - systemjsein 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

Einfache Antwort. Verwenden Sie die Angular CLI und geben Sie die aus

ng build 

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

ng build --prod

Dadurch wird das Projekt im distVerzeichnis 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

Mit der Angular CLI ist das ganz einfach. Ein Beispiel für Heroku:

1. Erstellen Sie ein Heroku-Konto und installieren Sie die CLI

2. Verschieben Sie das angular-cliDep nach dependenciesIn package.json(damit es installiert wird, wenn Sie auf Heroku drücken.

3. Fügen Sie ein postinstallSkript hinzu, das ausgeführt wird, ng buildwenn 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 einem distVerzeichnis auf dem Server abgelegt und die App anschließend gestartet.

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

4. Erstellen Sie einen Express-Server für die App.

// 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. Erstellen Sie eine Heroku-Fernbedienung und drücken Sie, um die App zu deaktivieren.

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

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:)

Ich benutze mit für immer :

1. Erstellen Sie Ihre Angular-Anwendung mit dem Ordner angle-cli to distng build --prod --output-path ./dist

2. Erstellen Sie die Datei server.js in Ihrem Angular-Anwendungspfad:

   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. Beginne für immer forever start server.js

Das ist alles! Ihre Anwendung sollte ausgeführt werden!

Hoffentlich kann dies helfen, und ich werde es hoffentlich während der Woche versuchen.

1. Erstellen Sie eine Webanwendung in Azure
2. Erstellen Sie die Angular 2-App im vs-Code.
3. Webpack zu bundle.js.
4. Laden Sie die veröffentlichte Profil-XML-Datei der Azure-Site herunter
5. Konfigurieren Sie Azure-Deployment mithilfe von https://www.npmjs.com/package/azure-deploy mit Site-Profil.
6. Bereitstellen.
7. Probieren Sie die Sahne.

Wenn Sie eine App wie mich auf localhost testen oder Probleme mit einer leeren weißen Seite haben, verwende ich diese:

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

Erläuterung:

ng build

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:

ng build --prod --build-optimizer 

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.

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

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

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

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

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 .htaccessDatei im Stammordner und fügt diese in den Ordner ein.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>

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

Angular 2-Bereitstellung in Github-Seiten

Testen der Bereitstellung von Angular2 Webpack in ghpages

Holen Sie sich zuerst alle relevanten Dateien aus dem distOrdner Ihrer Anwendung, für mich waren es die: + CSS-Dateien im Assets-Ordner + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Schieben 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

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 --prodeinen dist-Ordner im Paket aus, und dieser Ordner wird für Firebase Hosting bereitgestellt.

Die Bereitstellung von Angular 2 in Azure ist einfach

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

2. Erstellen Sie eine Ressourcengruppe und eine Web-App darin.

3. 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!

Ab 2017 ist es am besten, Angular -Cli (v1.4.4) für Ihr Winkelprojekt zu verwenden.

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

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:

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

Wenn Sie CDN für das Hosting verwenden möchten, ist dies sehr schnell.

Mit Angular CLI können Sie den folgenden Befehl verwenden:

ng build --prod

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.

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.

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