web-dev-qa-db-fra.com

Nginx Angular2 / Itinéraires angulaires

J'ai une application Angular2/Angular exécutée à l'intérieur d'un conteneur Docker et utilisant nginx pour la servir. Donc, ma base d'application =/myapp /. Tout fonctionne correctement lorsque vous appuyez sur l'application à l'aide de l'URL de base, à savoir www.server.com/myapp ou www.server.com/myapp/

events {
  worker_connections  4096;  ## Default: 1024
}

http {
  include /etc/nginx/conf/*.conf;

  server {
    listen       80 default_server;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;
    underscores_in_headers on;

    location /myapp {
      # If you want to enable html5Mode(true) in your angularjs app for pretty URL
      # then all request for your angularJS app will be through index.html
      try_files $uri /myapp/index.html;

    }

    #Static File Caching. All static files with the following extension will be cached for 1 day
    location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
      expires 1d;
    }

    ## PROXIES ##
    # location matcher for get requests. Any query params will be proxied using this location block
    location = /myapp/api {

      proxy_pass http://$hostname/api$is_args$query_string;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $Host;
      proxy_cache_bypass $http_upgrade;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_connect_timeout       120;
      proxy_send_timeout          120;
      proxy_read_timeout          120;
      send_timeout                120;
    }

    # location matcher for post requests i.e. updateAsset. Any request with additional path params will be proxied using this location block
    location ~ ^/myapp/api/(?<section>.*) {

      proxy_pass http://$hostname/api/$section;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $Host;
      proxy_cache_bypass $http_upgrade;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_connect_timeout       120;
      proxy_send_timeout          120;
      proxy_read_timeout          120;
      send_timeout                120;
    }
  }
}

Mon application propose plusieurs autres itinéraires, par exemple/myapp/page1 ou/myapp/page2. Ces routes peuvent être atteintes lors du service de l'application en mode dev à l'aide de nodejs. Cependant, une fois que je le conteneurise (la conteneurisation n'est pas le problème) et que je sers en utilisant nginx, j'obtiens un 404 non trouvé lorsque j'essaie d'accéder à/myapp/page1 ou/myapp/page2. Les sorties du journal des erreurs

2017/02/27 12:15:01 [error] 5#5: *3 open() "/usr/share/nginx/html/myapp/page1" failed (2: No such file or directory), client: 172.17.0.1, server: , request: "GET /myapp/page1 HTTP/1.1", Host: "localhost"

J'ai essayé de mapper toutes les URL de mes applications dans le fichier conf nginx mais rien ne semble fonctionner. Comment puis-je faire fonctionner cela?

Ajout de angular

Route principale de l'application:

import { Route } from '@angular/router';
import { MyAppComponent } from './index';

export const MyAppRoutes: Route[] = [
  {
    path: '',
    component: MyAppComponent
  }
];

Page 1 itinéraire:

import { Route } from '@angular/router';
import { Page1Component } from './index';

export const Page1Routes: Route[] = [
  {
    path:'page1',
    component: Page1Component
  }
];
angularnginxdockernginx-location
14
Steve Fitzsimons

Voici mes sites nginx disponibles/myapp

server {
    listen 80;
    listen 80 [::]:80;
    root /my/root/path;
    server_name www.mysite.com mysite.com;

    location /app1/ {
        alias /my/root/path/app1/;
        try_files $uri$args $uri$args/ $uri/ /app1/index.html;
    }

    location /app2/ {
         ...
    }    
}

Après avoir configuré la configuration que vous souhaitez rendre votre site activé, exécutez:

Sudo ln -s /pathtonginx/sites-available/myapp /pathtonginx/sites-enabled/myapp

La basehref sur mon index.html

<base href="./">

J'espère que cela t'aides!

15
David Pascoal