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中抛出一个error，其中包含以下内容：

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

然而，这只是使用SveltKit的静态回退错误页面，而不是+error.svelte。我曾尝试创建src/error.html，希望为+layout.svelte创建一个自定义错误页面，但无法正常工作。我想使用自定义页面来显示"；"停机维护"；，但我不想为我的应用程序中的每个路由创建一个端点来检查MAINTENANCE_MODE是否设置为1。

感谢提供的任何帮助

Answer 1

您可以使用handle服务器挂钩，例如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.routeId != '/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调用添加一些定期检查，以导航到其他地方。(

Answer 2

您还可以使用+layout.ts来挂接维护模式。你甚至可以为网站的某些部分设置条件(让首页仍在运行(。

以下是我们使用的技巧：

import type { LayoutLoad } from './$types';
import { chainsUnderMaintenance } from '$lib/config';
import { error } from '@sveltejs/kit';
export const load: LayoutLoad = ({ params }) => {
// Check chain maintenance status; if under maintenance, trigger error (see +error.svelte)
const chainName = chainsUnderMaintenance[<string>params.chain];
if (chainName) {
throw error(503, `Chain under maintenance: ${chainName}`);
}
};