2017-02-27 14 views
1

私はAngler2/Angularアプリをドッカーコンテナ内で実行しており、nginxを使ってそれを提供しています。だから私のアプリベース=/myapp /。Nginx Angular2/Angular routes

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; 
    } 
    } 
} 

すなわちwww.server.com/myappまたはwww.server.com/myapp/ベースURLを使ってアプリを打つ私のアプリは、例えば、いくつかの他のルートを持っているとき、すべてが正常に動作します/ myapp/page1または/ myapp/page2。これらのルートは、nodejを使用してdevモードでアプリを提供するときにヒットすることができます。しかし、一度私はそれをコンテナ化(コンテナ化は問題ではない)し、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"

私はnginxのconfのファイル内のすべての私のアプリのURLをマッピングしようとしたが、何も動作していないようにみえます。これをどのように機能させるには?

アップデート1

を追加しました角度のルート

メインアプリのルート:

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 
    } 
]; 
+0

location/myappはlocation/myapp /ではないはずですか? – MikeOne

+0

いずれにしても動作します。私の問題は、/ myapp/page1をAngular2ルート "page1"にマップすることができないことです。これは常に404 –

+0

を返します。それはすべてをindex.htmlにリダイレクトしなければなりません。そうすれば、ルータはそれを受け取ることができます。 /myapp/index.htmlへのリダイレクトが行われないという事実は、場所またはtry_filesが正しくないことを正しく示しています。閉じる/を追加しようとしましたか? – MikeOne

答えて

3

ここでは私の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/ { 
     ... 
    }  
} 
です あなたは、あなたのサイトが有効になってmakeを実行したい設定を設定した後

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

basehref私のindex.htmlに

<base href="./"> 

・ホープ、このことができます!