Nginx的Angular2/Angular路线

我有一个Angular2/Angular应用程序在码头集装箱内运行，并使用nginx来提供它。所以我的应用程序基地=/myapp /。使用基本URL即www.server.com/myapp或www.server.com/myapp/打应用程序时，一切工作正常Nginx的Angular2/Angular路线

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以开发模式提供应用程序时，可以击中这些路线。但是，一旦我containerize它（集装箱化不是问题），并使用nginx服务，然后我得到404时没有找到当试图访问/ myapp/page1或/ myapp/page2。错误日志输出

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文件映射我的所有的应用程序网址，但似乎没有任何工作。我如何得到这个工作？

更新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 
    } 
];

来源

2017-02-27 Steve Fitzsimons

不应该位置/ myapp位置/ myapp /？ – MikeOne

以任一方式工作。我的问题是我不能让/ myapp/page1映射到我的Angular2路由“page1”。这总是返回一个404 –

那么..它应该重定向到index.html，然后你的路由器可以拿起它。它不会重定向到/myapp/index.html的事实表明该位置或try_files不正确。你尝试添加关闭/？ – MikeOne

这里是我的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

的basehref在我的index.html

<base href="./">

希望这有助于！

来源

2017-06-20 20:34:29

Nginx的Angular2/Angular路线

回答

相关问题