如何在使用Node SSR适配器的Astro中配置页面重定向？

要实现你指定的重定向规则，最直接高效的方式是使用Astro的中间件，它能在Node SSR环境下拦截所有请求并处理重定向逻辑。以下是具体实现步骤：

1. 创建并配置中间件 #

在项目的src目录下新建middleware.ts（或.js）文件，将重定向规则与处理逻辑写入其中：

TypeScript版本 #

import { defineMiddleware } from 'astro:middleware';

// 你的重定向规则数组
const redirectRules = [
  {
    id: 1,
    source: "/blog/category/keyword/",
    destination: "/article/category/keyword/",
    permanent: true
  },
  {
    id: 2,
    source: "/features/pro/",
    destination: "/features/",
    permanent: true
  },
  {
    id: 3,
    source: "/blog/what-is-keyword/",
    destination: "/article/what-is-keyword/",
    permanent: true
  },
];

export const onRequest = defineMiddleware((context, next) => {
  const requestPath = context.url.pathname;
  
  // 匹配当前请求路径对应的重定向规则
  const matchedRule = redirectRules.find(rule => rule.source === requestPath);
  
  if (matchedRule) {
    // 永久重定向返回301状态码，临时重定向返回302
    return context.redirect(matchedRule.destination, matchedRule.permanent ? 301 : 302);
  }
  
  // 无匹配规则时，继续处理原请求
  return next();
});

JavaScript版本 #

import { defineMiddleware } from 'astro:middleware';

const redirectRules = [
  {
    id: 1,
    source: "/blog/category/keyword/",
    destination: "/article/category/keyword/",
    permanent: true
  },
  {
    id: 2,
    source: "/features/pro/",
    destination: "/features/",
    permanent: true
  },
  {
    id: 3,
    source: "/blog/what-is-keyword/",
    destination: "/article/what-is-keyword/",
    permanent: true
  },
];

export const onRequest = defineMiddleware((context, next) => {
  const requestPath = context.url.pathname;
  
  const matchedRule = redirectRules.find(rule => rule.source === requestPath);
  
  if (matchedRule) {
    return context.redirect(matchedRule.destination, matchedRule.permanent ? 301 : 302);
  }
  
  return next();
});

2. 确保Node SSR适配器已配置 #

检查你的astro.config.mjs文件，确认已启用Node SSR适配器，配置示例如下：

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: node({
    mode: 'standalone' // 根据部署需求选择，也可使用'middleware'模式
  }),
});

3. 处理动态路径重定向（可选） #

如果你的规则中keyword是动态占位符（例如要匹配所有/blog/category/xxx/路径到/article/category/xxx/），可以修改规则为正则表达式实现批量匹配：

const redirectRules = [
  {
    id: 1,
    source: /^\/blog\/category\/(.+)\/$/, // 正则匹配动态路径
    destination: "/article/category/$1/", // 用$1捕获动态部分
    permanent: true
  },
  // 其他规则...
];

export const onRequest = defineMiddleware((context, next) => {
  const requestPath = context.url.pathname;
  
  const matchedRule = redirectRules.find(rule => {
    if (typeof rule.source === 'string') {
      return rule.source === requestPath;
    }
    // 正则匹配逻辑
    return rule.source.test(requestPath);
  });
  
  if (matchedRule) {
    let destination = matchedRule.destination;
    // 替换正则捕获的动态部分
    if (matchedRule.source instanceof RegExp) {
      const matches = requestPath.match(matchedRule.source);
      if (matches) {
        destination = destination.replace(/\$(\d+)/g, (_, index) => matches[parseInt(index)]);
      }
    }
    return context.redirect(destination, matchedRule.permanent ? 301 : 302);
  }
  
  return next();
});

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