SvelteKit：预发布环境实现基础认证，Cloudflare生产环境禁用hooks.server.ts

方案1：环境变量条件判断（推荐） #

直接在hooks.server.ts内根据环境变量控制认证逻辑的执行，生产环境直接跳过，无需修改构建流程：

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
  // 仅在预发布环境启用认证
  if (import.meta.env.VITE_ENV === 'staging') {
    const authHeader = event.request.headers.get('Authorization');
    
    // 验证Authorization header格式
    if (!authHeader || !authHeader.startsWith('Basic ')) {
      return new Response('Unauthorized', {
        status: 401,
        headers: { 'WWW-Authenticate': 'Basic realm="Staging Environment"' }
      });
    }

    // 解码账号密码并验证
    const [user, pass] = Buffer.from(authHeader.slice(6), 'base64').toString().split(':');
    if (user !== import.meta.env.VITE_STAGING_USER || pass !== import.meta.env.VITE_STAGING_PASS) {
      return new Response('Unauthorized', { status: 401 });
    }
  }

  // 生产环境直接跳过认证，继续处理请求
  return resolve(event);
};

配置说明 #

• 在项目根目录创建.env.staging和.env.production文件，分别设置对应环境变量：

  # .env.staging
  VITE_ENV=staging
  VITE_STAGING_USER=your-staging-user
  VITE_STAGING_PASS=your-staging-password
  

  # .env.production
  VITE_ENV=production
  

• 部署到Cloudflare Pages时，在「环境变量」面板手动添加对应变量，避免敏感信息提交到代码仓库。

方案2：条件导入认证逻辑 #

将认证逻辑抽离为单独文件，仅在预发布环境导入，生产环境使用空的默认钩子：

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';

// 默认返回空钩子（生产环境用）
let handle: Handle = ({ event, resolve }) => resolve(event);

// 预发布环境加载认证逻辑
if (import.meta.env.VITE_ENV === 'staging') {
  handle = (await import('./staging-auth-hook.server.ts')).handle;
}

export { handle };

// src/staging-auth-hook.server.ts
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
  // 这里写基础认证逻辑（同方案1）
  // ...
  return resolve(event);
};

Vite的Tree Shaking会自动剔除生产环境未使用的staging-auth-hook.server.ts代码，减少打包体积。

方案3：构建时替换钩子文件（适配Cloudflare） #

通过构建命令动态替换hooks.server.ts文件，预发布环境用带认证的版本，生产环境用空版本：

1. 创建两个钩子文件：

   • src/hooks.server.staging.ts：包含基础认证逻辑
   • src/hooks.server.production.ts：空钩子实现

   // src/hooks.server.production.ts
   import type { Handle } from '@sveltejs/kit';
   export const handle: Handle = ({ event, resolve }) => resolve(event);
   

2. 在package.json中添加分环境的构建命令：

   "scripts": {
     "build:staging": "cp src/hooks.server.staging.ts src/hooks.server.ts && vite build",
     "build:production": "cp src/hooks.server.production.ts src/hooks.server.ts && vite build"
   }
   

3. Cloudflare Pages配置：

   • 为预发布分支（如staging）设置构建命令为npm run build:staging
   • 为生产分支（如main）设置构建命令为npm run build:production

注意事项 #

• 构建前的文件替换需要确保本地开发时使用正确的钩子文件，可添加dev脚本的前置步骤，或使用Git忽略hooks.server.ts（仅保留模板文件）。

关于构建时忽略文件 #

如果生产环境完全不需要hooks.server.ts，可以通过Vite的Rollup配置排除，但不建议这么做——SvelteKit允许无钩子文件存在，但空钩子更稳妥，避免潜在的框架行为异常。若一定要排除，可在vite.config.ts中配置：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  return {
    plugins: [sveltekit()],
    build: {
      rollupOptions: {
        // 生产环境排除钩子文件
        input: mode === 'production' ? {
          main: './src/routes/+page.svelte'
        } : undefined
      }
    }
  };
});

但这种方式可能引发SvelteKit构建流程的兼容性问题，更推荐方案1或方案2。

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