web-dev-qa-db-fra.com

Comment déployez-vous les applications Angular?

Comment déployez-vous Angular les applications dès leur 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 le app?

Dois-je importer tous les fichiers .js compilés sur la page index.html ou est-ce que je les réduis en utilisant gulp? Vont-ils travailler? Ai-je besoin de SystemJS dans la version de production?

typescriptangularproductionsystemjs
177
Joseph Girgis

Vous êtes ici en train de toucher deux questions en une. Le premier est comment héberger votre application. Et comme @toskv a mentionné sa question vraiment trop large pour y répondre et dépend de nombreuses choses différentes. La seconde est plus spécifique - comment préparer la version de déploiement de l’application. Vous avez plusieurs options ici:

  1. Déployer tel quel. Juste cela - pas de minification, concaténation, changement de nom, etc. Transpilez tout votre projet ts, copiez tous vos sources js/css/... résultantes + dépendances sur le serveur d'hébergement et vous êtes prêt à partir.
  2. Déployer à l'aide d'outils de regroupement spéciaux. Comme webpack ou constructeur de systemjs. Ils viennent avec toutes les possibilités qui manquent dans # 1. Vous pouvez regrouper tout votre code d'application dans seulement quelques fichiers js/css/... auxquels vous faites référence dans votre code HTML. Systemjs buider vous permet même de vous débarrasser de la nécessité d'inclure systemjs dans votre package de déploiement.

Oui, vous aurez probablement besoin de déployer systemjs et un groupe d’autres bibliothèques externes dans votre paquet. 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, mais systemjs en tant que chargeur de modules s'en chargera.

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

Constructeur SystemJS: angular2 seed

WebPack: démarreur angular2 webpack

Regardez comment ils le font - et espérons que cela vous aidera à trouver le moyen de regrouper les applications que vous créez.

87
Amid

Réponse simple. Utilisez la Angular CLI 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 construira 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 répertoire dist et pourra être envoyé au serveur.

Il s'est passé beaucoup de choses depuis que j'ai posté cette réponse pour la première fois. La CLI étant enfin à 1.0.0, suivez donc ce guide pour mettre à niveau votre projet avant que vous essayiez de le construire. https://github.com/angular/angular-cli/wiki/stories-rc-update

85
Nate Bunney

Avec la Angular CLI, rien de plus simple. Un exemple pour Heroku:

  1. Créer un compte Heroku et installer le CLI

  2. Déplacez le angular-cli dep vers le dependencies dans package.json (afin qu'il soit installé lorsque vous appuyez sur Heroku.

  3. Ajoutez un script postinstall qui exécutera ng build lorsque le code sera transmis à 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 répertoire dist sur le serveur, puis démarrera par la suite.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}
  1. Créez un serveur Express pour desservir 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 quitter l'application.
heroku create
git add .
git commit -m "first deploy"
git Push heroku master

Voici un rapide écriture Je l'ai fait qui a plus de détails, y compris comment forcer les demandes à utiliser HTTPS et comment gérer PathLocationStrategy :)

21
cienki

J'utilise avec pour toujours :

  1. Construisez votre application Angular avec angular-cli pour dist dossier ng build --prod --output-path ./dist

  2. Créez un 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. Commencer pour toujours forever start server.js

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

6
Yakir Tsuberi

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

  1. Créer une application Web sur Azure
  2. Créez l'application Angular 2 en code vs.
  3. Webpack à bundle.js.
  4. Télécharger le profil publié du site Azure xml
  5. Configurez Azure-deploy en utilisant https://www.npmjs.com/package/Azure-deploy avec le profil de site.
  6. Déployer.
  7. Goûtez la crème.
6
user6402762

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

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

Donc, créez un fichier point d'entrée de noeud 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.

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

J'ai mis en place un petit blog pour le déploiement sur IIS. suivez lien

5
Oduwole Oluwasegun

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 nom QRCode .

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

Étape 5: Ouvrez IIS Manager à l’aide de la commande (Fenêtre + R) et tapez inetmgr cliquez sur OK.

Étape 6: Cliquez avec le bouton droit sur 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 supprimer '\'.

É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

4
Avadhesh Maurya

Si vous déployez votre application dans Apache (serveur Linux) afin de pouvoir suivre les étapes suivantes: Suivez les étapes suivantes :

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

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

étape. Crée le fichier .htaccess dans le dossier racine et le colle dans le fichier .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>
4
Sumit Jaiswal

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

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

Explication:

ng build

Construire l'application, mais il y a beaucoup d'espaces, onglets et autres choses. Pour le serveur, l’importance du code n’est pas importante. C'est pourquoi j'utilise:

ng build --prod --build-optimizer

Cela rend le code pour la production et réduit la taille [--build-optimizer] permet de réduire davantage de code].

Donc, à la fin, j’ajoute --base-href="http://127.0.0.1/my-app/" pour afficher l’application où se trouve "image principale" [en termes simples]. Avec elle, vous pouvez même avoir plusieurs angular applications dans n'importe quel dossier.

3
Michał Wojtanis

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

Ceci est également disponible avec la CLI angulaire, 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 aussi un exemple de travail avec des matériaux et des graphiques SVG (soutenu par Angular2) qui inclut un paquet créé avec le livre de recettes AOT. Vous trouverez également toutes les configurations et tous les scripts nécessaires pour créer le paquet. Découvrez-le ici: https://github.com/fintechneo/angular2-templates/

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

2
Peter Salomonsen

Déploiement angulaire 2 dans les pages Github

Test du déploiement de Angular2 Webpack dans ghpages

Commencez par récupérer tous les fichiers pertinents dans le dossier dist de votre application. Il s’agissait pour moi du: + fichiers css dans le dossier des actifs + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Ensuite, poussez ces fichiers dans le dépôt que vous avez créé.

1 - Si vous souhaitez que l'application s'exécute sur le répertoire racine - créez un référentiel spécial portant le nom [votregithubusus] .github.io et appuyez sur ces éléments. fichiers dans la branche master

2 - Où comme si vous vouliez créer ces pages dans le sous-répertoire ou dans une autre branche 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, il s'agira de https: // [votregithubusername] .github.io et pour le deuxième cas, il s'agira [votregithubusername] .github.io/[nom du repo] .

Si supposons que vous souhaitiez le déployer en utilisant le second cas, assurez-vous de changer l'URL de base du fichier index.html dans le fichier dist, car tous les mappages de route dépendent du chemin que vous indiquez et doivent être définis sur [/ branchname].

Lien vers cette page

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

2
Rahul Singh

Avec CLI angulaire , 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’êtes pas habitué aux serveurs Web, je vous recommande d’utiliser Angular to Cloud . Il vous suffit de compresser le dossier dist en fichier Zip et de le télécharger sur la plate-forme.

1
Bruno Oliveira

Le déploiement de Angular 2 dans Azure est simple

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

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

  3. Placez vos fichiers de dossiers dist via FTP. Dans Azure, il faudra rechercher index.html pour exécuter l'application.

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

1
Malatesh Patil

Pour un moyen rapide et économique d’héberger une application angular, 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 la CLI Firebase. Cet article explique ici les étapes nécessaires pour déployer votre 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 --prod qui crée un dossier dist dans le package et qui est déployé dans Firebase Hosting.

1
npesa92

À partir de 2017, le meilleur moyen consiste à utiliser angular-cli (v1.4.4) pour votre projet angular.

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

Vous n'avez pas besoin d'ajouter explicitement --aot car il est activé par défaut avec --prod.Et l'utilisation de --output-hashing est selon vos préférences personnelles en ce qui concerne la rupture de la mémoire cache.

Vous pouvez explicitement ajouter CDN support en ajoutant:

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

si vous envisagez d’utiliser CDN pour un hébergement qui est extrêmement rapide.

1
Kay

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

Ma solution a été 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 construction Maven afin qu'elle utilise maven-resources-plugin pour déplacer le contenu de/angular/dist vers la racine de ma distribution (c'est-à-dire $ project.build.directory}/MyJavaApplication). Angular charge par défaut les ressources de la racine de la guerre.

Lorsque j'ai commencé à ajouter du routage à mon projet angular, j'ai modifié davantage la construction de maven pour copier index.html de/dist vers WEB-INF/app. Et ajouté un contrôleur Java qui redirige tous les appels restés côté serveur vers l'index.

1
Wallace Howery