web-dev-qa-db-ja.com

HTML5プッシュステートURLを使用した単一ページWebサイト用のnginxの構成

すべてのURL（/apiまたはJS /画像などの静的リソースが前に付いていない）をindex.htmlにリダイレクトするようにnginxを構成するにはどうすればよいですか？理由は、シングルページアプリケーションでHTML5プッシュ状態のURLを使用しているためです。 URLに応じてAJAXまたはJS）のいずれかで意味内容が変更されます

私の現在のnginx設定は次のようになります：

server {
    listen 2000;
    server_name localhost;

    location / {
        root    /labs/Projects/Nodebook/public;
        index   index.html;
    }

    location /api/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_Host;
        proxy_set_header X-NginX-Proxy true;

        proxy_pass http://localhost:3000/;
        proxy_redirect off;
    }
}
htmlnginxsinglepage
17
Jiew Meng
location / {
  try_files $uri /index.html;
}

これにより、要求されたファイルが存在するかどうかがチェックされ、返されます。ファイルが存在しない場合は、index.htmlが返されます。

http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files

18
mattes

マットの答えはほとんど解決策ですが、ashepisが指摘したように、欠落しているファイル（favicon.iconなど）に対して404は提供されません。

Nginxは一致する最初の場所を選択します。したがって、最初にファイルを照合できます（ファイルが存在しない場合は404になります）。そして、すべてのURLに対してデフォルトでindex.htmlになる場所を配置した後。

    location /.+\..+ { # files (assuming they always have a dot)
        # use eg alias to serve some files here
    }

    location / { # url routed by client, client gives 404 for bad urls
        try_files $uri /index.html;
    }
6
j-a

Nginx設定ファイルに追加する必要があります：

 rewrite ^(.+)$ /index.html last;

次に、Backbone.jsを使用しているとしましょう。未定義のルートは、必ず404ページに再ルーティングしてください。

  routes: {
    // Other routes
    "*path"  : "notFound"
  },

  notFound: function(path) {
    // Load 404 template, probably of a cute animal.
  }

ソース： http://readystate4.com/2012/05/17/nginx-and-Apache-rewrite-to-support-html5-pushstate/

2
albertpeiro