HTML5モードでのNGINX、proxy_pass、SPAルーティング

Question

NGINXは、コンテナとして動作しているドッカーコンテナの仮想ネットワークのリバースプロキシとして設定されています。これらのコンテナの1つは、クライアント側ルーティングがHTML5モードであるAngular 4ベースのSPAです。

アプリケーションはNGINXの/にマップされているので、http://server/はSPAのホーム画面に移動します。 SPA内をナビゲートするとき

server { 
    listen 80; 

    ... 

    location/{ 
     proxy_pass http://spa-server/; 
    } 

    location /other/ { 
     proxy_pass http://other/; 
    } 

    ... 
} 

角度ルータがhttp://server/homeまたは他のルートへのURLを変更します。

ただし、これらのURLに直接アクセスしようとすると、404が返されます。このエラーは、spa-serverに由来します。なぜなら、明らかにこれらのルートの内容を持っていないからです。

このシナリオをサポートするためにNGINXを設定する例では、常にSPAの静的コンテンツがNGINXから直接配信されると仮定しているため、try_filesは実行可能なオプションです。

未知のURLをSPAに転送して、それ自体を処理できるようにするにはどうすればよいですか？私の作品

Answer 1

ソリューションは、nginxの中location /にディレクティブproxy_intercept_errorsとerror_pageを追加することです：

server { 
    listen 80; 

    ... 

    location/{ 
     proxy_pass http://spa-server/; 
     proxy_intercept_errors on; 
     error_page 404 /index.html; 
    } 

    location /other/ { 
     proxy_pass http://other/; 
    } 

    ... 
} 

さて、nginxのはspa-serverたび、未知からSPAすなわち/index.htmlが返されますURLが要求されます。それでも、URLはAngularで利用可能で、ルータはSPAで即座に解決します。

もちろん、SPAは「実際の」404を処理する責任があります。幸運なことに、これは問題ではなく、とにかくSPA内での優れた実践です。