web-dev-qa-db-fra.com

Comment puis-je déployer mon Angular 2 + application TypeScript + Webpack

J'apprends actuellement Angular 2 avec TypeScript et j'ai développé une petite application basée sur le projet angular-seed ( angular-seed ). J'ai construit l'application pour la production fins et obtenu le dossier dist prêt à être déployé contenant mes fichiers bundle comme ceci:

dist/                    
  main.bundle.js              
  main.map         
  polyfills.bundle.js          
  polyfills.map            
  vendor.bundle.js         
  vendor.map

Cependant, pour plus de fraîcheur, je n'ai aucune idée de comment le déployer maintenant sur mon serveur EC2. J'ai lu que je dois configurer le serveur Nginx pour servir mon fichier statique mais dois-je le configurer en particulier pour travailler avec mes fichiers groupés?

Excusez mes erreurs, le cas échéant. Merci beaucoup d'avance!

nginxangulardeploymentamazon-ec2webpack
22
Antoine Guittet

Tu es sur la bonne piste.....

Installez simplement le nginx sur votre EC2. Dans mon cas, j'avais un Linux Ubuntu 14.04 installé sur "Digital Ocean".

J'ai d'abord mis à jour les listes de paquets apt-get:

Sudo apt-get update

Installez ensuite Nginx en utilisant apt-get:

Sudo apt-get install nginx

Ouvrez ensuite le fichier de configuration par défaut du bloc serveur pour le modifier:

Sudo vi /etc/nginx/sites-available/default

Supprimez tout dans ce fichier de configuration et collez le contenu suivant:

server {
    listen 80 default_server;
    root /path/dist-nginx;
    index index.html index.htm;
    server_name localhost;
    location / {
        try_files $uri $uri/ =404;
    }
}

Pour rendre les modifications actives, redémarrez le serveur Web nginx:

Sudo service nginx restart

Copiez ensuite index.html et les fichiers de l'ensemble dans /path/dist-nginx sur votre serveur et vous êtes opérationnel.

27
Herman Fransen

Un moyen plus rapide de déployer est le suivant:

1. Installez nginx comme mentionné par Herman.
2. Copiez vos fichiers dist/* dans/var/www/html/sans déranger/etc/nginx/sites-available/default.
Sudo cp/votre/chemin/vers/dist/*/var/www/html /
3. Redémarrez nginx:
Sudo systemctl redémarrer nginx

6
rzvAmmar

Si quelqu'un éprouve toujours des difficultés avec la configuration de production de angular 2/4/5 app + Nginx, alors voici la solution complète:

Supposons que vous souhaitiez déployer votre angular sur l'hôte: http://example.com et PORT: 8080 Remarque - L'hôte et le PORT peuvent être différents dans votre cas.

Assurez-vous que vous avez <base href="/"> dans votre balise head index.html.

  1. Tout d'abord, accédez à votre chemin angular repo (c'est-à-dire/home/user/helloWorld) sur votre machine.

  2. Créez ensuite/dist pour votre serveur de production à l'aide de la commande suivante:

    ng build --prod --base-href http://example.com:808

  3. Maintenant, copiez le dossier/dist (c'est-à-dire/home/user/helloWorld/dist) depuis le repo de votre machine angular repo sur la machine distante où vous souhaitez héberger votre serveur de production).

  4. Connectez-vous maintenant à votre serveur distant et ajoutez la configuration de serveur nginx suivante.

    server {

    listen 8080;

    server_name http://example.com;

    root /path/to/your/dist/location;

    # eg. root /home/admin/helloWorld/dist

    index index.html index.htm;

    location / {

        try_files $uri $uri/ /index.html;

        # This will allow you to refresh page in your angular app. Which will not give error 404.

    }

}

  5. Redémarrez maintenant nginx.

  6. C'est ça !! Vous pouvez maintenant accéder à votre application angular sur http://example.com:808

J'espère que ce sera utile.

6
viks

J'utilise à la place le --- angular CLI pour déployer en production et c'est très facile à faire. Vous pouvez déployer en pré-production c'est-à-dire, ou en production de cette façon:

ng build --env = pre --output-path = build/pre /

ng build --env = prod --output-path = build/prod /

0
Xavi Cl