Comment déployez-vous des applications angulaires?

194

Comment déployez-vous les applications Angular une fois qu'elles atteignent la phase de production?

Tous les guides que j'ai vus jusqu'à présent (même sur angular.io ) comptent sur un serveur léger pour servir et browserSync pour refléter les changements - mais lorsque vous avez terminé le développement, comment pouvez-vous publier l'application?

Dois-je importer tous les .jsfichiers compilés sur la index.htmlpage ou est-ce que je les minimise à l'aide de gulp? Vont-ils travailler? Ai-je besoin de SystemJS dans la version de production?

Joseph Girgis
la source

Réponses:

91

Vous êtes ici en train de toucher deux questions en une.

Le premier est Comment héberger votre application? .
Et comme @toskv l'a mentionné, sa question est vraiment trop large pour être répondue et dépend de nombreuses choses différentes.

Le second est Comment préparez-vous la version de déploiement de l'application? .
Vous avez plusieurs options ici:

  1. Déployez tel quel. Juste ça - pas de minification, de concaténation, de changement de nom, etc. Transpilez tout votre projet ts, copiez toutes vos sources js / css / ... + dépendances résultantes sur le serveur d'hébergement et vous êtes prêt à partir.
  2. Déployez à l'aide d'outils de regroupement spéciaux, tels que webpackou systemjsBuilder.
    Ils viennent avec toutes les possibilités qui manquent au n ° 1.
    Vous pouvez regrouper tout le code de votre application dans quelques fichiers js / css / ... que vous référencez dans votre HTML. systemjsbuilder vous permet même de vous débarrasser de la nécessité d'inclure systemjsdans votre package de déploiement.

  3. Vous pouvez utiliser à ng deploypartir d'Angular 8 pour déployer votre application à partir de votre CLI. ng deploydevra être utilisé en conjonction avec votre plateforme de choix (telle que @angular/fire). Vous pouvez consulter les documents officiels pour voir ce qui fonctionne le mieux pour vous ici

Oui, vous aurez probablement besoin de déployer un systemjstas d'autres bibliothèques externes dans le cadre de votre package. Et oui, vous pourrez les regrouper dans quelques fichiers js que vous référencez à partir de votre page HTML.

Vous n'êtes pas obligé de référencer tous vos fichiers js compilés à partir de la page - systemjscar un chargeur de module s'en chargera.

Je sais que cela semble trouble - pour vous aider à démarrer avec le n ° 2, voici deux très bons exemples d'applications:

Générateur SystemJS: angular2 seed

WebPack: démarreur webpack angular2

Parmi
la source
1
Je recommanderais également JSPM ( jspm.io ): info ici gist.github.com/robwormald/429e01c6d802767441ec et projet de semences ici github.com/madhukard/angular2-jspm-seed
Harry
Après 6 mois où Angular2 est en rc5 et sortira bientôt, cette réponse est toujours d'actualité car elle fait référence au projet angular2 seed. Super projet, beaucoup de contributeurs!
lame_coder
3
Je suis encore massivement confondu avec le point (1). Que signifie déployer «TEL QUEL»? Cela signifie-t-il également copier tous les 50000 fichiers node_module? J'essaie de déployer l'exemple HEROES et je ne sais pas quoi ajouter comme source de script dans le fichier d'index.
Oliver Watkins
1
Oui, cela signifie copier toutes vos dépendances, y compris celles de node_modules. Remarque - vous ne devez copier que les dépendances nécessaires à l'exécution du programme. Ne copiez pas les deps qui sont utilisés uniquement pour le développement (par exemple gulp / grunt / etc).
Au milieu du
1
Oui. Dans ce fichier, system.js indique ce que sont et où charger à partir de toutes vos dépendances.
Au milieu du
88

Réponse simple. Utilisez la CLI angulaire et émettez le

ng build 

commande dans le répertoire racine de votre projet. Le site sera créé dans le répertoire dist et vous pourrez le déployer sur n'importe quel serveur Web.

Cela sera construit pour le test, si vous avez des paramètres de production dans votre application, vous devez utiliser

ng build --prod

Cela construira le projet dans le distrépertoire et cela peut être poussé vers le serveur.

Beaucoup de choses se sont passées depuis que j'ai publié cette réponse pour la première fois. L'interface de ligne de commande est enfin à 1.0.0, donc en suivant ce guide, mettez à niveau votre projet avant d'essayer de construire. https://github.com/angular/angular-cli/wiki/stories-rc-update

Nate Bunney
la source
Comment tu fais ça? Après le démarrage rapide d'Angular 2, j'exécute cette commande au lieu de `` npm start '', et j'obtiens `` ng command not found ''
Rahly
1
@NateBunney Je suis nouveau sur la scène de développement Web. Je suis confus. ng build produit un tas de fichiers dans le dossier dist. Supposons que vous utilisiez Spring Boot comme serveur Web, copiez-vous simplement ces fichiers dans le dossier public web-inf dans Spring Boot? Ou avez-vous besoin d'un serveur nodejs devant Spring Boot pour servir ng2 dist?
Srikanth
3
Pourquoi n'est-ce pas dans la documentation? Cela semble une énorme omission!
Kokodoko
Rappelez-vous que la première version d'Angular 2 a à peine un mois maintenant.
Nate Bunney
1
@ user1460043, oui, mais il existe une solution simple à votre problème. Lancez simplement un nouveau projet CLI angulaire et copiez votre répertoire src dans le projet CLI.
Nate Bunney
21

Avec la CLI angulaire, c'est facile. Un exemple pour Heroku:

  1. Créez un compte Heroku et installez la CLI

  2. Déplacez le angular-clidep à dependenciesen package.json(afin qu'il soit installé lorsque vous pousser à Heroku.

  3. Ajoutez un postinstallscript qui s'exécutera ng buildlorsque le code sera poussé vers Heroku. Ajoutez également une commande de démarrage pour un serveur Node qui sera créé à l'étape suivante. Cela placera les fichiers statiques de l'application dans un distrépertoire sur le serveur et démarrera l'application par la suite.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}
  1. Créez un serveur Express pour servir l'application.
// 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. Créez une télécommande Heroku et appuyez pour déposer l'application.
heroku create
git add .
git commit -m "first deploy"
git push heroku master

Voici un bref résumé que j'ai fait qui contient plus de détails, y compris comment forcer les demandes à utiliser HTTPS et comment gérer PathLocationStrategy:)

cienki
la source
ajouter angular-cli dans les dépendances augmenter la taille de la dist comment gérer cela
Janak Bhatta
7

J'utilise avec forever :

  1. Créez votre application Angular avec le dossier angular-cli to distng build --prod --output-path ./dist
  2. Créez le fichier server.js dans le chemin de votre application 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. Commencez pour toujours forever start server.js

C'est tout! votre application devrait être en cours d'exécution!

Yakir Tsuberi
la source
6

J'espère que cela peut aider, et j'espère que je pourrai essayer cela pendant la semaine.

  1. Créer une application Web sur Azure
  2. Créez une application Angular 2 dans vs code.
  3. Webpack à bundle.js.
  4. Télécharger le profil XML du site Azure publié
  5. Configurez Azure-deploy à l'aide de https://www.npmjs.com/package/azure-deploy avec le profil de site.
  6. Déployer.
  7. Goûtez la crème.
user6402762
la source
58
Veuillez ne pas Microsoft-ify ce genre de choses car c'est juste compatible avec Azure. C'est comme dire que si vous utilisez Angular, vous ne devriez pouvoir utiliser que les services Google Cloud.
ozanmuyes
2
Utile pour savoir qu'il existe un module npm à déployer dans Azure.
Anthony Brenelière
1
@ user6402762 +1 pour Goûter la crème.
Leonardo Wildt
J'essaye de déployer ma webapp Angular 4 en utilisant cette réponse mais je continue à recevoir des erreurs comme Can't resolve 'node-uuid' in path\azure-deploy\lib. Est-ce encore possible? J'ai configuré l'étape 5 app.moduleet je ne suis pas sûr d'avoir effectué correctement les étapes 3 et 4. Pourriez-vous clarifier cela?
Wouter Vanherck
6

Si vous testez l'application comme moi sur localhost ou si vous rencontrez des problèmes avec une page blanche vierge, j'utilise ceci:

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

Explication:

ng build

Créez une application, mais dans le code, il y a de nombreux espaces, onglets et autres éléments qui permettent au code d'être lu par l'homme. Pour le serveur, l'apparence du code n'est pas importante. C'est pourquoi j'utilise:

ng build --prod --build-optimizer 

Cela crée du code pour la production et réduit la taille [ --build-optimizer] permet de réduire plus de code].

Donc, à la fin, j'ajoute --base-href="http://127.0.0.1/my-app/"pour montrer l'application où se trouve le «cadre principal» [en termes simples]. Avec lui, vous pouvez même avoir plusieurs applications angulaires dans n'importe quel dossier.

RegarderTanis
la source
5

Afin de déployer votre application Angular2 sur un serveur de production, assurez-vous avant tout que votre application s'exécute localement sur votre machine.

L'application Angular2 peut également être déployée en tant qu'application de nœud.

Alors, créez un fichier de point d'entrée de nœud server.js / app.js (mon exemple utilise 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'));
});

Ajoutez également express en tant que dépendance dans votre fichier package.json.

Ensuite, déployez-le sur votre environnement préféré.

J'ai créé un petit blog pour le déploiement sur IIS. suivre le lien

Oduwole Oluwasegun
la source
5

Pour déployer votre application dans IIS, suivez les étapes ci-dessous.

Étape 1: Créez votre application Angular à l'aide de la commande ng build --prod

Étape 2: Après la construction, tous les fichiers sont stockés dans le dossier dist du chemin de votre application.

Étape 3: Créez un dossier dans C: \ inetpub \ wwwroot par le nom QRCode .

Étape 4: Copiez le contenu du dossier dist dans le dossier C: \ inetpub \ wwwroot \ QRCode .

Étape 5: Ouvrez le Gestionnaire des services Internet à l'aide de la commande (Fenêtre + R) et tapez inetmgr cliquez sur OK.

Étape 6: Faites un clic droit sur le site Web par défaut et cliquez sur Ajouter une application .

Étape 7: Entrez le nom d'alias 'QRCode' et définissez le chemin physique sur C: \ inetpub \ wwwroot \ QRCode .

Étape 8: Ouvrez le fichier index.html et recherchez la ligne href = "\" et supprimez '\'.

Étape 9: Parcourez maintenant l'application dans n'importe quel navigateur.

Vous pouvez également suivre la vidéo pour une meilleure compréhension.

URL de la vidéo: https://youtu.be/F8EI-8XUNZc

Avadhesh Maurya
la source
4

Si vous déployez votre application dans Apache (serveur Linux), vous pouvez suivre les étapes suivantes: Suivez les étapes suivantes :

Étape 1 : ng build --prod --env=prod

Étape 2 . (Copiez dist dans le serveur) puis le dossier dist créé, copiez le dossier dist et déployez-le dans le répertoire racine du serveur.

Étape 3 . Crée un .htaccessfichier dans le dossier racine et collez-le dans le.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
la source
quel genre de serveur? devrait être un serveur nginx ou ce que ça va contenir le dist
famas23
Peut-être Tomcat, votre choix. Je dirais d'utiliser ce que vous connaissez.
Wallace Howery
Tout serveur Apache Linux ou autre serveur, sur lequel les règles .htaccess sont utilisées.
Sumit Jaiswal
@TamaghnaBanerjee, vérifiez que le mode de réécriture du serveur est activé ou non?
Sumit Jaiswal
3

Vous obtenez le paquet de production de chargement le plus petit et le plus rapide en compilant avec le compilateur Ahead of Time, et tree-shake / minify avec rollup comme indiqué dans le livre de recettes angulaire AOT ici: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

Ceci est également disponible avec l'Angular-CLI comme indiqué dans les réponses précédentes, mais si vous n'avez pas créé votre application à l'aide de la CLI, vous devez suivre le livre de recettes.

J'ai également un exemple de travail avec des matériaux et des graphiques SVG (soutenu par Angular2) qui comprend un ensemble créé avec le livre de recettes AOT. Vous trouvez également toute la configuration et les scripts nécessaires pour créer le bundle. Découvrez-le ici: https://github.com/fintechneo/angular2-templates/

J'ai fait une vidéo rapide démontrant la différence entre le nombre de fichiers et la taille d'une compilation compilée AoT par rapport à un environnement de développement. Il montre le projet du référentiel github ci-dessus. Vous pouvez le voir ici: https://youtu.be/ZoZDCgQwnmQ

Peter Salomonsen
la source
Merci pour une référence au Doc et pour avoir mentionné la compilation AOT. La valeur semble réelle,"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
aero
1
Merci pour les commentaires - si vous n'avez pas trouvé le temps de tester vous-même la compilation AoT, j'ai ajouté une vidéo montrant la différence de nombre de fichiers et de taille (en utilisant le projet github référencé dans la réponse).
Peter Salomonsen
Impressionnant! Merci d'avoir été si utile Peter!
aero
2

Déploiement Angular 2 dans les pages Github

Test du déploiement d'Angular2 Webpack dans ghpages

Commencez par récupérer tous les fichiers pertinents du distdossier de votre application, pour moi c'était les: + fichiers css dans le dossier assets + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Ensuite, poussez ces fichiers dans le référentiel que vous avez créé.

1 - Si vous voulez que l'application s'exécute sur le répertoire racine - créez un dépôt spécial avec le nom [yourgithubusername] .github.io et poussez ces fichiers dans la branche master

2 - Où, comme si vous vouliez créer ces pages dans le sous-répertoire ou dans une branche différente autre que la racine, créez une branche gh-pages et poussez ces fichiers dans cette branche.

Dans les deux cas, la manière dont nous accédons à ces pages déployées sera différente.

Pour le premier cas, ce sera https: // [yourgithubusername] .github.io et pour le second cas, ce sera [yourgithubusername] .github.io / [Repo name] .

Si vous voulez le déployer en utilisant le deuxième cas, assurez-vous de changer l'URL de base du fichier index.html dans le dist car tous les mappages de routes dépendent du chemin que vous donnez et il doit être défini sur [/ branchname].

Lien vers cette page

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

Rahul Singh
la source
1

Pour un moyen rapide et peu coûteux d'héberger une application angulaire, j'utilise l'hébergement Firbase. C'est gratuit sur le premier niveau et très facile de déployer de nouvelles versions à l'aide de l'interface de ligne de commande Firebase. Cet article explique ici les étapes nécessaires pour déployer votre application de production angular 2 sur Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

En bref, vous exécutez ng build --prodce qui crée un dossier dist dans le package et c'est le dossier qui est déployé sur Firebase Hosting.

npesa92
la source
Merci - c'était le moyen le plus simple que j'ai pu trouver.
Brian Burns
1

Déployer Angular 2 dans Azure est facile

  1. Exécutez ng build --prod , qui générera un dossier dist avec tout ce qui est regroupé dans quelques fichiers, y compris index.html.

  2. Créez un groupe de ressources et une application Web à l'intérieur.

  3. Placez vos fichiers de dossiers dist en utilisant FTP. Dans Azure, il recherchera index.html pour exécuter l'application.

C'est tout. Votre application est en cours d'exécution!

Malatesh Patil
la source
Seulement si vous démarrez votre projet avec angular-cli no?
Portekoi
Pas comme ça. Si vous n'avez pas démarré votre projet angular2 avec angular-cli, vous pouvez créer le projet pour la production. Vous devez seulement avoir angular-cli installé sur votre machine au moment de la construction. Utilisez npm install -g @ angular / cli pour installer angular-cli globalement.
Malatesh Patil
1

À partir de 2017, le meilleur moyen est d'utiliser angular-cli (v1.4.4) pour votre projet angulaire.

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

Vous n'avez pas besoin d'ajouter --aot explicitement car il est activé par défaut avec --prod.Et l'utilisation de --output-hashing est conforme à vos préférences personnelles concernant l'éclatement du cache.

Vous pouvez ajouter explicitement le support CDN en ajoutant:

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

si vous envisagez d'utiliser CDN pour l'hébergement, ce qui est considérablement rapide.

Kay
la source
1

Avec Angular CLI , vous pouvez utiliser la commande suivante:

ng build --prod

Il génère un dossier dist avec tout ce dont vous avez besoin pour déployer l'application.

Si vous n'avez aucune pratique avec les serveurs Web, je vous recommande d'utiliser Angular to Cloud . Il vous suffit de compresser le dossier dist en tant que fichier zip et de le télécharger sur la plateforme.

Bruno Oliveira
la source
1

Je dirais que beaucoup de gens ayant une expérience Web avant angular, sont habitués à déployer leurs artefacts Web dans une guerre (c'est-à-dire jquery et html dans un projet Java / Spring). J'ai fini par faire cela pour contourner le problème CORS, après avoir tenté de séparer mes projets angulaire et REST.

Ma solution était de déplacer tous les contenus angular (4), générés avec CLI, de my-app vers MyJavaApplication / angular. Ensuite, j'ai modifié ma build Maven pour utiliser maven-resources-plugin pour déplacer le contenu de / angular / dist vers la racine de ma distribution (ie $ project.build.directory} / MyJavaApplication). Angular charge les ressources à partir de la racine de la guerre par défaut.

Quand j'ai commencé à ajouter le routage à mon projet angulaire, j'ai encore modifié maven build pour copier index.html de / dist vers WEB-INF / app. Et, ajouté un contrôleur Java qui redirige tous les appels de repos côté serveur vers l'index.

Wallace Howery
la source