Nginx配置SPA

Question

我需要一些关于SPA的nginx配置的帮助。我把我的东西拼凑到谷歌上，但我不明白它是怎么工作的。

我需要的是：

1)服务静态文件

location ~ \.(css|js|svg|woff|woff2|ico|ttf|eot|jpe?g|png|txt)$ {          
  try_files $uri $uri/ =404;
  expires 1y;
  add_header Cache-Control "public"; 
}

如果没有找到文件，我返回404。如果我只是在URL中输入了错误的文件名也没问题，但是如果我在我的index.html中输入了错误的文件名，而不是404page，我会得到一个空白页面。是不是应该这样？

2)对/api的请求需要重定向到Node后台

location /api {
  try_files '' @proxy;
}

location @proxy  {
  proxy_pass http://localhost:3000;
}

我不太确定在这条线上，是不是应该这样

try_files '' @proxy;

3)最大的问题是，不匹配任何内容的请求都需要返回index.html

location / {
  try_files '' /index.html;
  expires -1;
}

location = /index.html {
  expires -1;
}

据我所知，第一个块将所有未知请求重定向到index.html，但我不明白第二个块是如何为这个index.html服务的。我不是为了服务这个文件而写的，没有try_files指令。

Answer 1

1)服务静态文件

您的解决方案非常好。只有当您需要为这些URI设置不同的缓存控制和过期标头时，才需要它。try_files语句是不必要的，因为它与默认行为相同。

2)对/api的请求需要重定向到Node后台

您的解决方案可以简化为：

location /api {
    proxy_pass http://localhost:3000;
}

这将处理任何以/api 开头的URI，除非匹配步骤(1)中的正则表达式。您可以通过使用^~操作符来避免这种情况。详情请参见this document。

3)最大的问题是，不匹配任何内容的请求都需要返回index.html

这通常实现为：

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

除非请求与任何其他location、文件或目录匹配，否则URI将在内部重写为/index.html。详情请参见this document。