web-dev-qa-db-ja.com

Nginx Angular2 / Angularルート

Angular2/AngularアプリをDockerコンテナー内で実行し、nginxを使用して提供しています。したがって、私のアプリベース=/myapp /です。ベースURL、つまりwww.server.com/myappまたは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;
    }
  }
}
_

私のアプリには他にもいくつかのルートがあります。/myapp/page1または/ myapp/page2。これらのルートは、nodejsを使用して開発モードでアプリを提供するときにヒットする可能性があります。ただし、コンテナー化して（コンテナー化は問題ではありません）、nginxを使用して配信すると、/ myapp/page1または/ myapp/page2にアクセスしようとしたときに404が見つかりません。エラーログ出力

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"

すべてのアプリのURLをnginx confファイルにマッピングしようとしましたが、何も機能しないようです。これを機能させるにはどうすればよいですか？

angularルートを追加

メインアプリルート：

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

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

ページ1ルート：

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

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

これが私のnginxサイト-利用可能/ 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/ {
         ...
    }    
}

サイトを有効にする設定をセットアップしたら、次を実行します。

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

私のindex.htmlのbasehref

<base href="./">

お役に立てれば！

15
David Pascoal