web-dev-qa-db-ja.com

nginx Angularでの404 Not Foundエラー：8.0.2ルーティング

mywebsiteurl/radar-inputまたはmywebsiteurl/daily-submissionsにアクセスしようとすると、404 Not Foundエラーが表示され、対応するコンポーネントを使用しないと正常に読み込まれるという問題が発生します。ルーティング方法、以下は私のapp-routing.module.tsです

次のコマンドを使用して静的ファイルを生成し、空の.nginxファイルを作成して、これらの静的ファイルをnginxサーバーでホストします

ng build --prod --outputPath=/<current working directory>/www

これをデバッグして修正する方法のガイダンスを提供できる人はいますか？

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { RadarInputComponent } from "./radar-input/radar-input.component";
import { LatestSubmittedProjectPageComponent } from './latest-submitted-project-page/latest-submitted-project-page.component';

const appRoutes: Routes = [
  { path: 'radar-input', component: RadarInputComponent },
  { path: 'daily-submissions', component: LatestSubmittedProjectPageComponent },
  {
    path: 'radar-input',
    component: RadarInputComponent,
    data: { title: 'Radar List' }
  },
  { path: '',
    redirectTo: '/radar-input',
    pathMatch: 'full'
  },
  { path: '**', component: RadarInputComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(
    appRoutes,
    { enableTracing: true } // <-- debugging purposes only
  )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

UPDATE1：

私は 404 Not Found nginx angular routing を見て、Staticfileを作成し、この行を追加しましたpushstate: enabledは、まだNOT私のために働く

UPDATE2：

以下のようにnginx.confファイルを作成しようとしましたが、それでもエラーが発生します

server {
    root /www;

    location / {
    }

    location /daily-submissions/ {
        index index.html
    }
}

wwwフォルダーの内容：

drwxr-xr-x  23 username  staff     736 Aug 19 13:59 ..
-rw-r--r--   1 username  staff    1440 Aug 19 13:59 runtime-es5.741402d1d47331ce975c.js
-rw-r--r--   1 username  staff  770212 Aug 19 13:59 main-es5.ded1413a886662a5ad02.js
-rw-r--r--   1 username  staff  113549 Aug 19 13:59 polyfills-es5.405730e5ac8f727bd7d7.js
-rw-r--r--   1 username  staff   14707 Aug 19 14:00 3rdpartylicenses.txt
-rw-r--r--   1 username  staff   28136 Aug 19 14:00 overlay.2663ca4a577f280aa709.png
-rw-r--r--   1 username  staff   50408 Aug 19 14:00 banner.6f97727962128487d41a.jpg
-rw-r--r--   1 username  staff    1440 Aug 19 14:00 runtime-es2015.858f8dd898b75fe86926.js
-rw-r--r--   1 username  staff  683152 Aug 19 14:00 main-es2015.81b9cbd6a9d33d23040d.js
-rw-r--r--   1 username  staff   37304 Aug 19 14:00 polyfills-es2015.5728f680576ca47e99fe.js
-rw-r--r--   1 username  staff  105076 Aug 19 14:00 styles.64346455fc558cf71e6a.css
-rw-r--r--   1 username  staff    5430 Aug 19 14:00 favicon.ico
drwxr-xr-x  14 username  staff     448 Aug 19 14:00 .
-rw-r--r--   1 username  staff    1050 Aug 19 14:00 index.html
angularnginxangular-ui-routerangular-routing
8
user2125827

私はあなたが問題が何であるかを正確に知っていることを望みます。この問題は、SPA（シングルページアプリケーション）で発生します。入力したURLは、ページディレクトリ/ファイルを探します。に行く場合はmywebsiteurl/radar-inputと言って、ファイルradar-inputを探します。 SPAではindex.htmlというファイルは1つだけなので、radar-inputファイルが見つからず、404がスローされます。

SPAにはすべてのロジックがあり、index.htmlでルーティングされます。SPAが提供されると、すべてが処理されます（非スパの場合は除く）。したがって、mywebsiteurl/にアクセスすると、正常に動作し、すべてのURLが正常に機能しますmywebsiteurl/がindex.htmlファイルを探して見つけ、それを提供するというアプリルーティングの理由で読み込まれます。したがって、ベースURLにアクセスしてWebサイトが正常に機能している場合は、静的ファイルが正しいディレクトリにあることを意味します。これをnginx.confに追加するだけです。

location / {
try_files  $uri /index.html;        #check if uri exists else serve index.html as rewrite
}

基本的に最初にurlでファイルを見つけようとしますが、存在しない場合はindex.htmlを提供します。

2
Omair Nabiel

angularルーターでハッシュタグを有効にしてみてください。Webサーバーが正しく構成されていない場合に役立つため、ルーティングはクライアント側で行われます。少なくとも問題を検索する場所はわかっています。ために。

RouterModule.forRoot(routes, {useHash: true})

ルーティングがハッシュタグでまだ間違っている場合、それは問題がルーター構成にあることを意味します。

1
Zsolt Tolvaly

Nginxの設定に問題があると思います。error.logを確認してください（/var/log/nginxである必要があります）。

また、クライアントルートでハッシュ（#）を使用しないため、nginx構成でtry_fileを使用してください。

これがフローとしての私のnginx設定です。これはangularアプリで完全に機能します。

location /myapp/ {
    alias /myapp/;
    index index.html index.htm;
    add_header Cache-Control no-cache;
    gzip_static on;
    try_files $uri /myapp/index.html;
}
0
zhimin

私はすべての例を試しましたが、Angular8ではnginx.confからの例が機能しません。nginxのドキュメントを読んだ後、実装されたソリューションをここに公開します。

Linux AlpineでSSHを有効にしたAzure用コンテナー-最終サイズ37Mb！

#Stage 1
FROM node:12-Alpine as node
WORKDIR /app
COPY angular-app .
RUN npm install
RUN npm run build --prod

#Stage 2
FROM nginx:Alpine
LABEL maintainer="Angular for Azure App Services Container <[email protected]>"

RUN apk add openssh openrc supervisor nginx-mod-http-headers-more\
     && echo "root:Docker!" | chpasswd 
COPY scripts/sshd_config /etc/ssh
COPY scripts/default.conf /etc/nginx/conf.d/
COPY scripts/supervisord.conf /etc/
RUN ssh-keygen -A
COPY --from=node /app/dist/angular-app /usr/share/nginx/html
EXPOSE 80 443 2222
CMD ["/usr/bin/supervisord"]

Nginx設定--default.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

   error_page  404              /index.html;
    server_tokens off;
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    header Strict-Transport-Security "max-age=15768000" always;
}

敬具

0
Jose Luis Mantilla G.

Nginx構成のlocationブロックを次のコードに置き換えてみてください。

location / {
    try_files $uri $uri/ /index.html;
}

設定した他のロケーションブロックを削除できます。これを追加するだけで十分です。すべてのリクエストをindex.htmlにリダイレクトします

0
koushikmln