web-dev-qa-db-fra.com

Comment configurer nginx pour exécuter l'application angular4

Je suis nouveau sur angular et je voudrais mettre l'application sur le serveur Nginx sur un conteneur Docker.

1. Exécution de l'application angular via @ angular/cli

Pour ce faire, j'ai effectué les étapes suivantes:

1.1. Installation de @ angular/cli et création d'une application angular4

Sudo npm install -g @angular/cli
ng new angular4-on-nginx-with-docker

1.2. Servir l'application via npm start

L'application angular fonctionne correctement via

npm start

Maintenant, je veux éviter la commande npm start car je pense à développer une application dockée. Pour ce faire, voici:

2. Exécution de l'application angular sur nginx

2.1. Dockerfile fichier pour nginx

FROM debian:jessie

MAINTAINER NGINX Docker Maintainers "[email protected]"

ENV NGINX_VERSION 1.11.9-1~jessie


RUN apt-key adv --keyserver hkp://pgp.mit.edu:80 --recv-keys 573BFD6B3D8FBC641079A6ABABF5BD827BD9BF62 \
    && echo "deb http://nginx.org/packages/mainline/debian/ jessie nginx" >> /etc/apt/sources.list \
    && apt-get update \
    && apt-get install --no-install-recommends --no-install-suggests -y \
                        ca-certificates \
                        nginx=${NGINX_VERSION} \
    && rm -rf /var/lib/apt/lists/*

# forward request and error logs to docker log collector
RUN ln -sf /dev/stdout /var/log/nginx/access.log \
    && ln -sf /dev/stderr /var/log/nginx/error.log


EXPOSE 80 443

CMD ["nginx", "-g", "daemon off;"]

2.2. La configuration de nginx est ci-dessous:

server {
    server_name angular4.dev;
    root /var/www/frontend/src;

    try_files $uri $uri/ index.html;

    error_log /var/log/nginx/angular4_error.log;
    access_log /var/log/nginx/angular4_access.log;
}

2.3. Le docker-compose.yml

version: '2'

services:
  nginx:
    build: nginx
    ports:
      - 88:80
    volumes:
      - ./nginx/frontend:/var/www/frontend
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./nginx/logs/nginx/:/var/log/nginx

2.4. création de l'image docker et exécution du conteneur

docker-compose up -d --build

2.5. Identification de l'adresse IP du conteneur

docker inspect angular4onnginxwithdocker_nginx_1 | grep IPA
            #"SecondaryIPAddresses": null,
            #"IPAddress": "",
            #        "IPAMConfig": null,
            #        "IPAddress": "172.18.0.2",

Ouvrez votre navigateur sur 172.18.0.2

Le problème

Je pense que les packages npm ne sont pas accessibles ... Je ne sais pas exactement ce qui ne va pas. Mais, ce que je peux dire, c'est que la page est vide et sans aucun message d'erreur dans la console.

Voici le code obtenu lors de l'utilisation de nginx

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular4 on nginx with docker</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

C'est le code de la page obtenu par l'utilisation de la commande npm start

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular4 on nginx with docker</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

Alors, qu'est-ce qui ne va pas ???

Un dépôt pour cet exemple est disponible sur github

angularnginx
16
Amine Jallouli

Une chose qui ne va pas, c'est que vous essayez de publier vos fichiers source, au lieu de faire une génération de production en utilisant le cli et de publier la sortie de ces fichiers. ng start est utilisé pour le développement local. Lorsque vous êtes satisfait de votre résultat, vous pouvez utiliser ng build --prod pour construire votre application, et tout ce qui réside dans votre /dist le dossier doit être placé dans le menu fixe.

Si vous voulez tout avoir dans votre docker, vous devez ng build --prod après avoir créé votre nouveau projet, puis pointez la racine de votre nginx vers /var/www/frontend/dist;. Cela augmentera fortement le temps de démarrage de votre docker. Evidemment selon la taille de votre projet

9
PierreDuc

Si quelqu'un éprouve toujours des difficultés avec la configuration de production de angular 2/4/5 app + Nginx (c'est-à-dire sans Docker), 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.

21
viks