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中抛出一个+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创建一个自定义错误页面，但无法让它正常工作。我想使用一个自定义页面来显示"Down“，但我不想为我的应用程序中的每一条路由创建端点，以检查MAINTENANCE_MODE是否设置为1。

任何帮助都是非常感谢的。

Answer 1

您可以使用服务器钩，例如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连接维护模式。您甚至可以为站点的某些部分设置条件(让frontpage仍在启动并运行)。

下面是我们使用的技巧

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}`);
    }
};