Come si distribuiscono le app angolari?


194

Come si distribuiscono le app Angular quando raggiungono la fase di produzione?

Tutte le guide che ho visto finora (anche su angular.io ) contano su un server Lite per servire e browserSync per riflettere i cambiamenti - ma quando hai finito con lo sviluppo, come puoi pubblicare l'app?

Importare tutti i .jsfile compilati sulla index.htmlpagina o li minimizzo usando gulp? Funzioneranno? Ho bisogno di SystemJS nella versione di produzione?

Risposte:


91

In realtà sei qui a toccare due domande in una.

Il primo è Come ospitare la tua applicazione? .
E poiché @toskv ha menzionato la sua domanda davvero troppo ampia per rispondere e dipende da numerose cose diverse.

Il secondo è Come si prepara la versione di distribuzione dell'applicazione? .
Hai diverse opzioni qui:

  1. Distribuire così com'è. Solo questo: nessuna minificazione, concatenazione, modifica del nome, ecc. Traspila tutto il tuo progetto ts copia tutte le tue sorgenti js / css / ... risultanti + dipendenze sul server di hosting e sei a posto.
  2. Distribuisci utilizzando strumenti di raggruppamento speciali, come webpacko systemjsbuilder.
    Vengono con tutte le possibilità che mancano nel n. 1.
    Puoi comprimere tutto il codice dell'app in un paio di file js / css / ... a cui fai riferimento nel tuo codice HTML. systemjsbuilder ti consente persino di eliminare la necessità di includere systemjscome parte del pacchetto di distribuzione.

  3. Puoi utilizzare ng deployAngular 8 per distribuire l'app dalla tua CLI. ng deploydovrà essere utilizzato insieme alla tua piattaforma di scelta (come @angular/fire). Puoi consultare i documenti ufficiali per vedere cosa funziona meglio per te qui

Sì, molto probabilmente dovrai implementare systemjs e raggruppare altre librerie esterne come parte del tuo pacchetto. E sì, sarai in grado di raggrupparli in un paio di file js a cui fai riferimento dalla tua pagina HTML.

Tuttavia, non è necessario fare riferimento a tutti i file js compilati dalla pagina, systemjspoiché un caricatore di moduli se ne occuperà.

So che sembra fangoso - per aiutarti a iniziare con il n. 2 ecco due applicazioni di esempio davvero buone:

Costruttore SystemJS: seme angular2

WebPack: angular2 webpack starter


1
Consiglierei anche JSPM ( jspm.io ): informazioni qui gist.github.com/robwormald/429e01c6d802767441ec e progetto seed qui github.com/madhukard/angular2-jspm-seed
Harry

Dopo 6 mesi quando Angular2 è in rc5 e verrà rilasciato presto, questa risposta è ancora rilevante perché fa riferimento al progetto seed angular2. Ottimo progetto, molti collaboratori!
lame_coder

3
Sono ancora fortemente confuso con il punto (1). Cosa significa distribuire "COSÌ COM'È"? Significa anche copiare tutti i file 50000 node_module? Sto cercando di distribuire l'esempio HEROES e non sono sicuro di cosa aggiungere come fonte di script nel file di indice.
Oliver Watkins,

1
Sì, significa copiare tutte le dipendenze, comprese anche quelle da node_modules. Nota: è necessario copiare solo le dipendenze richieste per l'esecuzione del programma. Non copiare deps usati solo per lo sviluppo (ad esempio gulp / grunt / etc).
Tra il

1
Sì. In quel file system.js viene indicato cosa sono e dove caricare da tutte le dipendenze.
Tra il

88

Semplice risposta. Utilizzare la CLI angolare ed emettere il

ng build 

comando nella directory principale del progetto. Il sito verrà creato nella directory dist ed è possibile distribuirlo su qualsiasi server Web.

Questo verrà compilato per il test, se hai impostazioni di produzione nella tua app che dovresti usare

ng build --prod

Questo costruirà il progetto nella distdirectory e questo può essere inviato al server.

Sono successe molte cose da quando ho pubblicato questa risposta per la prima volta. L'interfaccia della riga di comando è finalmente alla 1.0.0, quindi seguendo questa guida vai all'aggiornamento il tuo progetto dovrebbe avvenire prima di provare a compilare. https://github.com/angular/angular-cli/wiki/stories-rc-update


Come si fa a farlo? Dopo l'avvio rapido di Angular 2, eseguo quel comando invece di 'npm start' e ottengo 'ng command not found'
Rahly,

1
@NateBunney Sono nuovo nella scena degli sviluppatori web. Sono confuso. ng build produce un mucchio di file nella cartella dist. Supponiamo che tu stia utilizzando Spring Boot come server Web, copi semplicemente incolla quei file nella cartella Web-inf pubblica in Spring Boot? O hai bisogno di un server nodejs di fronte all'avvio di primavera per servire ng2 dist?
Srikanth,

3
Perché non è presente nella documentazione? Sembra un'enorme omissione!
Kokodoko,

Ricorda che la prima versione di Angular 2 ha appena un mese.
Nate Bunney,

1
@ user1460043, sì, ma esiste una soluzione semplice al tuo problema. Basta inserire un nuovo progetto CLI angolare e copiare la directory src nel progetto CLI.
Nate Bunney,

21

Con la CLI angolare è facile. Un esempio per Heroku:

  1. Crea un account Heroku e installa la CLI

  2. Sposta il angular-clidep dependenciesin package.json(in modo che venga installato quando premi Push su Heroku.

  3. Aggiungi uno postinstallscript che verrà eseguito ng buildquando il codice viene inviato a Heroku. Aggiungere anche un comando di avvio per un server Node che verrà creato nel passaggio seguente. Ciò posizionerà i file statici per l'app in una distdirectory sul server e avvierà successivamente l'app.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}
  1. Crea un server Express per servire l'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);
  1. Crea un telecomando Heroku e premi per deporre l'app.
heroku create
git add .
git commit -m "first deploy"
git push heroku master

Ecco un breve resoconto che ho fatto che ha più dettagli, incluso come forzare le richieste per usare HTTPS e come gestire PathLocationStrategy:)


l'aggiunta di angular-cli nelle dipendenze aumenta la dimensione della dist come gestirla
Janak Bhatta,

7

Uso per sempre :

  1. Crea la tua applicazione angolare con angular-cli nella cartella distng build --prod --output-path ./dist
  2. Creare il file server.js nel percorso dell'applicazione angolare:

    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. Inizia per sempre forever start server.js

È tutto! la tua applicazione dovrebbe essere in esecuzione!


6

Spero che questo possa aiutare, e spero che ci proverò durante la settimana.

  1. Creare un'app Web in Azure
  2. Crea l'app Angular 2 nel codice vs.
  3. Webpack su bundle.js.
  4. Scarica xml del profilo pubblicato sul sito di Azure
  5. Configurare la distribuzione di Azure usando https://www.npmjs.com/package/azure-deploy con il profilo del sito.
  6. Deploy.
  7. Assaggia la crema.

58
Si prega di non Microsoft-ify questo tipo di cose in quanto è solo compatibile con Azure. È come dire che se usi Angular, dovresti essere in grado di utilizzare solo i servizi Google Cloud.
ozanmuyes,

2
Utile sapere che esiste un modulo npm da distribuire in Azure.
Anthony Brenelière,

1
@ user6402762 +1 per Assaggiare la crema.
Leonardo Wildt,

Sto cercando di distribuire la mia webapp Angular 4 usando questa risposta, ma continuo a ricevere errori come Can't resolve 'node-uuid' in path\azure-deploy\lib. È ancora possibile? Ho configurato il passaggio 5 app.modulee non sono sicuro di aver eseguito correttamente i passaggi 3 e 4. Potresti chiarire quelli?
Wouter Vanherck,

6

Se testate un'app come me su localhost o avrete dei problemi con una pagina bianca vuota, utilizzo questo:

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

Spiegazione:

ng build

Costruisci app ma nel codice ci sono molti spazi, schede e altre cose che rendono il codice leggibile dall'uomo. Per il server non è importante l'aspetto del codice. Questo è il motivo per cui utilizzo:

ng build --prod --build-optimizer 

Questo rende il codice fuori produzione e riduce le dimensioni [ --build-optimizer] consente di ridurre più codice].

Quindi alla fine aggiungo --base-href="http://127.0.0.1/my-app/"per mostrare l'applicazione dove si trova 'main frame' [in parole semplici]. Con esso Puoi avere anche più app angolari in qualsiasi cartella.


5

Per distribuire la tua app Angular2 su un server di produzione, assicurati innanzitutto che l'app sia eseguita localmente sul tuo computer.

L'app Angular2 può anche essere distribuita come app nodo.

Quindi, crea un file punto di ingresso nodo server.js / app.js (il mio esempio usa express)

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

Aggiungi anche express come dipendenza nel tuo file package.json.

Quindi distribuirlo nel proprio ambiente preferito.

Ho creato un piccolo blog per la distribuzione su IIS. segui il link


5

Per distribuire l'applicazione in IIS, attenersi alla seguente procedura.

Passaggio 1: crea l'applicazione Angular usando il comando ng build --prod

Passaggio 2: dopo la compilazione, tutti i file vengono archiviati nella cartella dist del percorso dell'applicazione.

Passaggio 3: Creare una cartella in C: \ inetpub \ wwwroot per nome QRCode .

Passaggio 4: copiare il contenuto della cartella dist nella cartella C: \ inetpub \ wwwroot \ QRCode .

Passaggio 5: Aprire Gestione IIS utilizzando il comando (Window + R) e digitare inetmgr fare clic su OK.

Passaggio 6: fare clic con il pulsante destro del mouse sul sito Web predefinito e fare clic su Aggiungi applicazione .

Passaggio 7: immettere il nome alias "QRCode" e impostare il percorso fisico su C: \ inetpub \ wwwroot \ QRCode .

Passaggio 8: Apri il file index.html e trova la riga href = "\" e rimuovi '\'.

Passaggio 9: ora sfoglia l'applicazione in qualsiasi browser.

Puoi anche seguire il video per una migliore comprensione.

URL del video: https://youtu.be/F8EI-8XUNZc


4

Se si distribuisce l'applicazione in Apache (server Linux) in modo da poter seguire i seguenti passi: Seguire i seguenti passi :

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

Passaggio 2 . (Copia dist nel server) quindi dist cartella creata, copia la cartella dist e distribuiscila nella directory principale del server.

Passaggio 3 . Crea il .htaccessfile nella cartella principale e incollalo nel file.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>

che tipo di server? dovrebbe essere un server nginx o quello che conterrà la dist
famas23

Potrebbe essere Tomcat, la tua scelta. Direi usa ciò che conosci.
Wallace Howery,

Qualsiasi Apache linux o altri server, con le regole .htaccess utilizzate.
Sumit Jaiswal,

@ TamaghnaBanerjee, verificare che la modalità di riscrittura del server sia abilitata o no?
Sumit Jaiswal,

3

Ottieni il pacchetto di produzione di caricamento più piccolo e più veloce compilando con il compilatore Ahead of Time e agitando / minimizza l'albero con rollup come mostrato nel ricettario angolare AOT qui: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

Questo è disponibile anche con la CLI angolare, come indicato nelle risposte precedenti, ma se non hai creato la tua app utilizzando la CLI, dovresti seguire il ricettario.

Ho anche un esempio funzionante con materiali e grafici SVG (supportati da Angular2) che include un pacchetto creato con il ricettario AOT. Troverai anche tutte le configurazioni e gli script necessari per creare il pacchetto. Dai un'occhiata qui: https://github.com/fintechneo/angular2-templates/

Ho realizzato un breve video che dimostra la differenza tra numero di file e dimensioni di una build compilata AoT rispetto a un ambiente di sviluppo. Mostra il progetto dal repository github sopra. Puoi vederlo qui: https://youtu.be/ZoZDCgQwnmQ


Grazie per un riferimento al documento e per aver menzionato la compilazione AOT. Il valore sembra reale,"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
aero

1
Grazie per il feedback: se non hai trovato il tempo per testare la compilazione AoT da solo, ho aggiunto un video che mostra la differenza nel numero di file e dimensioni (usando il progetto github a cui fa riferimento la risposta).
Peter Salomonsen

Eccezionale! Grazie per essere stato così utile Peter!
aero

2

Distribuzione angolare 2 nelle pagine di Github

Test della distribuzione di Angular2 Webpack in ghpages

Per prima cosa prendi tutti i file rilevanti dalla distcartella della tua applicazione, per me sono stati: + file css nella cartella risorse + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Quindi inviare questi file nel repository che è stato creato.

1 - Se si desidera che l'applicazione venga eseguita nella directory principale, creare un repository speciale con il nome [nomeutente_di_processo] .github.io e inviare questi file nel ramo principale

2 - Dove vuoi creare queste pagine nella sottodirectory o in un ramo diverso da quello root, crea un ramo gh-pages e invia questi file in quel ramo.

In entrambi i casi il modo in cui accediamo a queste pagine distribuite sarà diverso.

Per il primo caso lo sarà https: // [yourgithubusername] .github.io e per il secondo caso sarà [yourgithubusername] .github.io / [nome repository] .

Se supponi di volerlo distribuire usando il secondo caso assicurati di cambiare l'URL di base del file index.html nella dist poiché tutte le mappature del percorso dipendono dal percorso che hai dato e dovrebbe essere impostato su [/ branchname].

Link a questa pagina

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment


1

Per un modo rapido ed economico per ospitare un'app angolare, ho usato l'hosting Firbase. È gratuito al primo livello ed è molto semplice distribuire nuove versioni utilizzando l'interfaccia della riga di comando di Firebase. Questo articolo spiega i passaggi necessari per distribuire l'app Angular 2 di produzione su Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

In breve, si esegue ciò ng build --prodche crea una cartella dist nel pacchetto e questa è la cartella che viene distribuita su Firebase Hosting.


Grazie - questo è stato il modo più semplice che ho trovato.
Brian Burns,

1

La distribuzione di Angular 2 in azzurro è semplice

  1. Esegui ng build --prod , che genererà una cartella dist con tutto raggruppato in pochi file incluso index.html.

  2. Crea un gruppo di risorse e un'app Web al suo interno.

  3. Posiziona i file delle cartelle dist usando FTP. In azzurro cercherà index.html per eseguire l'applicazione.

Questo è tutto. La tua app è in esecuzione!


Solo se inizi il tuo progetto con angular-cli no?
Portekoi,

Non come quello. Se non è stato avviato il progetto angular2 utilizzando angular-cli, è possibile creare il progetto per la produzione. Solo tu devi avere angular-cli installato nella tua macchina al momento della creazione. Utilizzare npm install -g @ angular / cli per installare angular-cli a livello globale.
Malatesh Patil,

1

A partire dal 2017 il modo migliore è usare angular -cli (v1.4.4) per il tuo progetto angolare.

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

Non è necessario aggiungere --aot esplicitamente come è attivato per impostazione predefinita con --prod. E l'uso di --output-hashing è secondo le tue preferenze personali riguardo allo scoppio della cache.

È possibile aggiungere esplicitamente il supporto CDN aggiungendo:

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

se prevedi di utilizzare CDN per l'hosting che è notevolmente veloce.


1

Con la CLI angolare , è possibile utilizzare il comando seguente:

ng build --prod

Genera una cartella dist con tutto il necessario per distribuire l'applicazione.

Se non hai pratica con i server web, ti consiglio di usare Angular to Cloud . Devi solo comprimere la cartella dist come file zip e caricarla sulla piattaforma.


1

Direi che molte persone con esperienza Web prima di angolare, sono abituate a distribuire i loro artefatti all'interno di una guerra (ad esempio jquery e html all'interno di un progetto Java / Spring). Ho finito per farlo per aggirare il problema CORS, dopo aver tentato di mantenere separati i miei progetti angolari e REST.

La mia soluzione era quella di spostare tutti i contenuti angolari (4), generati con CLI, dalla mia app a MyJavaApplication / angular. Quindi ho modificato la mia build Maven per usare maven-resources-plugin per spostare i contenuti da / angular / dist alla radice della mia distribuzione (ad esempio $ project.build.directory} / MyJavaApplication). L'angolo carica le risorse dalla radice della guerra per impostazione predefinita.

Quando ho iniziato ad aggiungere il routing al mio progetto angolare, ho ulteriormente modificato maven build per copiare index.html da / dist a WEB-INF / app. E, aggiunto un controller Java che reindirizza tutte le chiamate di riposo lato server all'indice.


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.