用于具有HTML5应用程序缓存的单页应用程序的Nginx配置 [英] Nginx config for single page app with HTML5 App Cache

问题描述

我正在尝试构建一个利用HTML5 App Cache的单页面应用程序，该应用程序将为每个不同的URL缓存该应用程序的全新版本，因此我必须将所有人重定向到/，然后让我的应用程序将其路由(这是 devdocs.io 上使用的解决方案.)

I'm trying to build a single page app that utilizes HTML5 App Cache, which will cache a whole new version of the app for every distinct URL, thus I must redirect everyone to / and have my app route them afterward (this is the solution used on devdocs.io).

这是我的Nginx配置.我希望所有请求都发送一个文件(如果存在)，将其重定向到位于/auth和/api的API，并将所有其他请求重定向到index.html.为什么以下配置导致我的浏览器说有重定向循环?如果用户点击了位置2，并且其路线与静态文件不匹配，那么他将被发送到位置3，这会将他重定向到"/"，后者应该到达位置1，并投放index.html，对吗?是什么导致重定向循环在这里?有没有更好的方法可以做到这一点?

Here's my nginx config. I want all requests to send a file if it exists, redirect to my API at /auth and /api, and redirect all other requests to index.html. Why is the following configuration causing my browser to say that there is a redirect loop? If the user hits location block #2 and his route doesn't match a static file, he's sent to location block #3, which will redirect him to "/" which should hit location block #1 and serve index.html, correct? What is causing the redirect loop here? Is there a better way to accomplish this?

root /files/whatever/public;
index index.html;

# If the location is exactly "/", send index.html.
location = / {
    try_files $uri /index.html;
}

location / {
    try_files $uri @redirectToIndex;
}

# Set the cookie of the initialPath and redirect to "/".
location @redirectToIndex {
    add_header Set-Cookie "initialPath=$request_uri; path=/";
    return 302 $scheme://$host/;
}

# Proxy requests to "/auth" and "/api" to the server.
location ~* (^\/auth)|(^\/api) {
    proxy_pass http://application_upstream;
    proxy_redirect off;
}

推荐答案

该循环消息表明/files/whatever/public/index.html不存在，因此，位置/的try_files在以下情况下找不到$ uri它等于/index.html，因此try_files始终在内部将那些请求重定向到@位置，从而进行外部重定向.

That loop message suggests that /files/whatever/public/index.html doesn't exist, so the try_files in location / doesn't find $uri when it's equal to /index.html, so the try_files always internally redirects those requests to the @ location which does the external redirect.

除非您的设置比概述的要复杂，否则我认为您无需做太多事情.您不需要为单文件js应用发送外部重定向(甚至内部重定向)或服务器端Cookie.应用程序和api的正则表达式匹配也不完全正确.

Unless you have a more complicated setup than you've outlined, I don't think you need to do so much. You shouldn't need external redirects (or even internal redirects) or server-side cookie sending for a one-file js app. The regex match for app and api wasn't quite right, either.

root /files/whatever/public;
index index.html;

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

# Proxy requests to "/auth" and "/api" to the server.
location ~ ^/(auth|api) {
    proxy_pass http://application_upstream;
    proxy_redirect off;
}

这篇关于用于具有HTML5应用程序缓存的单页应用程序的Nginx配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！