javascript - SvelteKit 维护模式

Question

有没有好的方法可以在访问我的 SvelteKit 网站的任何路线时显示维护页面？

我的应用程序托管在 Vercel 上，对于那些想了解的人来说。

到目前为止我已经尝试过:

• 在 Vercel 中设置一个名为 MAINTENANCE_MODE 的环境变量，其值为 1。
• 出于开发目的，我已在 .env 文件中将其设置为 VITE_MAINTENANCE_MODE 并使用 import.meta.env.VITE_MAINTENANCE_MODE 进行调用。

然后在 +layout.server.js 中，我有以下代码重定向到 /maintenance 路由

import { redirect } from "@sveltejs/kit";

export async function load({ url }) {
  const { pathname } = url;

  // Replace import.meta.env.VITE_MAINTENANCE_MODE with process.env.MAINTENANCE_MODE in Production
  if (import.meta.env.VITE_MAINTENANCE_MODE == 1) {
    if (pathname == "/maintenance") return;
    throw redirect(307, "/maintenance");
  } else {
    if (pathname == "/maintenance") {
      throw redirect(307, "/");
    };
  };
};

我还尝试过在 +layout.server.js 中抛出一个错误，内容如下:

import { error } from "@sveltejs/kit";

export async function load() {
  if (import.meta.env.VITE_MAINTENANCE_MODE == 1) {
    throw error(503, "Scheduled for maintenance");
  };
};

但是，这仅使用 SvelteKit 的静态后备错误页面，而不是 +error.svelte。我尝试创建 src/error.html 希望为 +layout.svelte 创建自定义错误页面，但无法让它工作。 我想使用自定义页面来显示“停机维护”，但我不想为应用中的每个路由创建端点来检查 MAINTENANCE_MODE 是否设置为 1。

感谢任何帮助

Answer 1

您可以使用 handle server hook ，例如src/hooks.server.ts:

import { env } from '$env/dynamic/private';
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
    if (env.MAINTENANCE_MODE == '1' && event.route.id != '/maintenance')
        return new Response(undefined, { status: 302, headers: { location: '/maintenance' } });

    // <other logic>
    
    // Default response
    return await resolve(event);
}

在维护页面上，您可以阻止所有进一步的导航:

import { beforeNavigate } from '$app/navigation';

beforeNavigate(async ({ cancel }) => {
    cancel();
});

(可能会通过 fetch 调用添加一些定期检查，以便在网站重新上线后导航到其他地方。)