私は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
}
];
location/myappはlocation/myapp /ではないはずですか? – MikeOne
いずれにしても動作します。私の問題は、/ myapp/page1をAngular2ルート "page1"にマップすることができないことです。これは常に404 –
を返します。それはすべてをindex.htmlにリダイレクトしなければなりません。そうすれば、ルータはそれを受け取ることができます。 /myapp/index.htmlへのリダイレクトが行われないという事実は、場所またはtry_filesが正しくないことを正しく示しています。閉じる/を追加しようとしましたか? – MikeOne