如何将 nextjs 应用程序置于维护模式（使用 Vercel）

Posted 2023-03-06

【中文标题】如何将 nextjs 应用程序置于维护模式（使用 Vercel）

【英文标题】：How do I put a nextjs app in maintenance mode (using Vercel)

【发布时间】：2020-09-27 14:11:22

【问题描述】：

我刚刚使用 Vercel 将我的 nextjs 应用发布到生产环境。

我喜欢整个体验，除了一小部分：我希望能够将我的应用程序置于维护模式，但这个选项似乎在 Vercel 上不可用。

我的问题是：以前有没有人做到这一点并且可以在这里分享一些细节？

我猜它可以在 2 个级别上完成：

修改我的应用程序，以便在检测到环境变量（即MAINTENANCE_MODE=true）时，每个页面都会重定向到维护屏幕。但是，这并不理想，因为在 Vercel 上添加环境变量需要进行部署才能将其考虑在内。 有一个简单的每个项目切换来启用/禁用 Vercel 的维护模式。那将是令人兴奋的。

【问题讨论】：

“维护模式”是什么意思？

意味着每个页面都重定向到一个静态的“维护”页面。

【参考方案1】：

“维护模式”可以通过 next.config.js 中的环境变量和 redirects 属性来实现（需要 Next.js 9.5.0 或更高版本）。

module.exports = 
  redirects() 
    return [
      process.env.MAINTENANCE_MODE === "1"
        ?  source: "/((?!maintenance).*)", destination: "/maintenance.html", permanent: false 
        : null,
    ].filter(Boolean);
  
;

这会添加一个匹配传入请求的通配符路由，然后发出临时重定向 /maintenance.html 位置。

请注意，您不能在不重新部署的情况下更改部署（配置或环境变量）。

---

旧答案

如果您不使用 Next.js 或使用旧版本的 Next.js，则可以使用 vercel.json 中的 redirects 属性实现“维护模式”。

  "redirects": [
     "source": "/((?!maintenance).*)", "destination": "/maintenance.html", "permanent": false 
  ]

【讨论】：

这是一个很好的答案，非常感谢！我会尽快尝试的。

maintenance.html 文件必须在哪里？我尝试将它放在项目的根目录中，在 pages 文件夹和 public 文件夹中。使用vercel.json 文件重定向效果很好，但找不到该文件！

问题不是找不到文件，而是我的重定向太多，因为“/maintenance.html”匹配“/(.*)”模式，导致重定向， 很快。对我来说，解决方案就是在我的应用中直接添加一个路由。

啊，是的，它陷入了无限重定向，因为每条路径都会匹配。我更新了source 属性模式以排除以maintenance 开头的任何内容。

如果维护是 /pages/maintenance 则不起作用，因为 /_next/* 调用也会被重定向并阻止加载任何静态 (css/js)。

【参考方案2】：

添加 @ptrkcsk 的评论，如果您打算将维护页面放在 pages 目录中并使用来自 next/image 的 <Image> 组件渲染图像，您还希望将您的 static 文件夹包含到重定向正则表达式中。

这是对我有用的源模式：/((?!maintenance)(?!_next)(?!static).*)

【参考方案3】：

我目前使用的另一种解决方案是创建一个单独的维护页面，然后根据环境变量有条件地截取实际组件的呈现。

我通过将 _app.js 代码调整为：

function MyApp( Component, pageProps ) 
  if (process.env.NEXT_PUBLIC_MAINTENANCE_MODE === 'false') 
    return <Component ...pageProps />
   else 
    return <Maintenance />

请注意，如前面的答案中所述，这依赖于 Vercel 环境变量，根据他们的网站：“您的更改需要新的部署才能生效。”