Azure Static Web App突破配置文件20KB限制添加重定向规则

之前我的博客从WordPress转为Hugo后，URL发生了重大变化，有507篇文章需要做301重定向。

Azure Static Web App可以通过配置文件staticwebapp.config.json添加重定向路由，例如：

{
	"routes": [
		{
			"route": "/1.html",
			"redirect": "/post/wdcp-v2-upgrade-v3-tutorial/",
			"statusCode": 301
		}
	],
	...
}

然而Azure Static Web App限制配置文件最大为20KB，完全不够用。而路由规则又不支持正则表达式捕获，所以只能通过函数计算来间接实现重定向。

首先参考官方教程创建Azure Static Web App托管函数，语言选择JavaScript。创建好后，在项目中会多出一个api目录。

修改azure-static-web-apps-<DEFAULT-HOSTNAME>.yml文件：

app_location: "/"
api_location: "api"

配置文件staticwebapp.config.json放到根目录，内容如下：

{
	"trailingSlash": "auto",
	"routes": [
		{
			"route": "/index.html",
			"redirect": "/",
			"statusCode": 301
		}
	],
	"responseOverrides": {
		"404": {
			"rewrite": "/404.html"
		}
	},
	"navigationFallback": {
		"rewrite": "/api/fallback"
	}
}

在配置文件中我指定了404页面为根目录下的404.html，各个参数功能可以参考官方配置Azure Static Web Apps教程。

在/api/src/functions目录中创建两个文件：

fallback.js
redirects.js

fallback.js的内容如下：

const { app } = require('@azure/functions');
const routes = require('./redirects');

app.http('fallback', {
	methods: ['GET'],
	authLevel: 'anonymous',
	handler: async (request, context) => {
		const originalUrl = await request.headers.get('x-ms-original-url');
		const urlObj = new URL(originalUrl);
		let oldUrl = urlObj.pathname;
		let matchedRoute = routes.find((route) => route.route == oldUrl);

		if (matchedRoute) {
			return {
				status: matchedRoute.statusCode,
				headers: {
					Location: urlObj.origin + matchedRoute.redirect
				}
			};
		} else {
			return {
				status: 302,
				headers: {
					Location: urlObj.origin + '/404'
				}
			};
		}
	}
});

redirects.js的内容如下：

const redirects = [
	{ route: '旧路径', redirect: '新路径', statusCode: 状态码 },
	...
];

module.exports = redirects;

redirects.js可以无限制添加重定向规则，不同跳转可以设置不同的状态码。例如：

const redirects = [
	{ route: '/1.html', redirect: '/post/wdcp-v2-upgrade-v3-tutorial/', statusCode: 301 },
	{ route: '/13.html', redirect: '/post/find-the-mysql-database-root-password-under-linux/', statusCode: 302 },
	...
];

参数说明：

  • route：旧路径；
  • redirect：要跳转到的新路径；
  • statusCode：状态码。

最后，本方法是参考Azure Static Web App代码仓库问题区国外网友OzBob的方法实现，在此表示感谢。

Typora