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的方法实现,在此表示感谢。

阿里云