如何通过NGINX配置实现Angular SPA的维护模式临时重定向

方案概述 #

无需重构Angular应用，也不用单独制作静态维护页，通过NGINX的文件检测机制触发维护模式，将所有非静态资源请求导向Angular内置的/maintenance路由，直接复用应用内的维护组件。

配置步骤 #

1. 添加维护模式触发逻辑
   在NGINX的server块（location /配置上方）加入以下代码：

set $maintenance 0;
if (-f /sites/mysite/.maintenance) {
    set $maintenance 1;
}

该逻辑会检测服务器上的.maintenance标识文件，文件存在则自动开启维护模式。

2. 修改原location路由配置
   替换你现有的location /配置为：

location / {
    root /sites/mysite/;

    # 维护模式下，转发非静态资源请求到index.html，交给Angular路由处理
    if ($maintenance = 1) {
        # 排除静态资源请求，避免维护页的样式、脚本、图片加载失败
        if ($uri !~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$) {
            rewrite ^(.*)$ /index.html last;
        }
    }

    # 正常模式与维护模式通用的静态资源、SPA路由处理规则
    try_files $uri $uri/ /index.html;
}

3. 确认Angular路由配置
   确保你的Angular应用已经配置了/maintenance路由，且对应组件是要展示的维护页面——无需修改任何应用代码，NGINX会将请求递交给Angular，由其自身渲染该路由页面。

维护模式切换方法 #

• 开启维护模式：在服务器上创建标识文件

touch /sites/mysite/.maintenance

• 关闭维护模式：删除标识文件

rm /sites/mysite/.maintenance

NGINX会实时检测文件状态，无需重启服务即可生效。

关键细节说明 #

• 避免直接用302重定向到/maintenance：SPA依赖前端路由，重定向后用户刷新页面仍需要NGINX转发到index.html，上述rewrite方式更稳妥，保证所有非静态请求都走Angular入口文件。
• 静态资源后缀需匹配实际情况：如果你的Angular应用构建后有其他类型的静态资源（如webp图片），需要将对应的后缀添加到正则规则中，防止资源加载失败。

内容的提问来源于stack exchange，提问作者Kh4zit