Azure存储账户静态站点非首页路径直接访问返回404求助

针对Next.js导出静态文件部署到Azure存储/CDN后，直接访问无后缀路由（如oursite.com/about）返回404的问题，以下是几种更优的解决思路：

方案1：调整Next.js静态导出结构（推荐） #

通过Next.js配置让静态导出的路由结构适配Azure存储的索引文档规则：

• 在项目根目录的next.config.js中添加trailingSlash: true配置：

  module.exports = {
    trailingSlash: true,
    // 其他原有配置
  };
  

• 重新执行next build && next export，此时导出的文件结构会自动变为文件夹嵌套index.html的形式：

  |- _next
     chunk.js
     style.css  
  
  |- blogs
     |- blog1
        index.html
     |- blog2
        index.html
     ...
  |- images 
     ...
  
  |- about
     index.html
  index.html
  others...
  

• Azure存储静态网站默认会寻找路径下的index.html作为索引文档，此时访问oursite.com/about会自动加载about/index.html，无需添加任何后缀，完美匹配预期路由。

方案2：利用Azure自定义404页面做无感知跳转 #

如果不想修改Next.js导出结构，可通过自定义404页面实现自动适配：

• 在Next.js项目中创建404.html页面，添加以下脚本：

  (function() {
    const currentPath = window.location.pathname;
    // 排除静态资源和_next目录的请求
    if (!currentPath.includes('.') && !currentPath.startsWith('/_next/')) {
      window.location.href = `${currentPath}.html`;
    }
  })();
  

• 在Azure存储账户的静态网站设置中，将自定义404页面指定为404.html。
• 当用户访问无后缀路由时，Azure返回404页面，脚本自动跳转到对应带.html后缀的路径，用户无感知。

方案3：优化Azure CDN规则引擎配置 #

若使用Azure CDN，可通过规则引擎实现地址栏无后缀的优雅访问：

• 添加两条CDN规则：
  1. 请求路由规则：检测请求路径是否无文件扩展名，若满足则自动追加.html（或/index.html，根据你的文件结构选择）。
  2. 响应重写规则：当返回的是.html文件时，修改响应头，让浏览器地址栏保持无后缀的原始路径，避免跳转时暴露.html后缀。
• 这种方式无需修改代码，纯通过CDN配置解决问题，体验更接近标准路由。

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