⛈️

SPA を AWS CloudFront で動かすときにカスタムエラーレスポンスを使わない

2021/10/12に公開

AWS

SPA を作るとき、ルーティングはフロントエンドが受け持つことになります
ぼくの場合は Vue.js で進行しているので vue-router を使いますね

で、それを CloudFront ＋ S3 の構成にデプロイするとき、CloudFrontからは未知のパスをフロントエンドに任せるために、エラーレスポンスを指定する対応をしているかと思います
なぜなら、ググってみるとそう対応する情報ばかりがでてくるからですね

エラーレスポンスの指定は、TSのCDKで言うと以下のように指定していました

            errorResponses: [
                {
                    httpStatus: 403,
                    responseHttpStatus: 200,
                    responsePagePath: '/index.html',
                    ttl: cdk.Duration.seconds(0),
                },
                {
                    httpStatus: 404,
                    responseHttpStatus: 404,
                    responsePagePath: '/index.html',
                    ttl: cdk.Duration.seconds(0),
                },
            ],

CloudFront Functions を使う

CDK的に書くとこうです

        const spaRoutingFunction = new cloudFront.Function(this, 'SpaRoutingFunction', {
            functionName: 'spa-routing-function',
            code: cloudFront.FunctionCode.fromFile({
                filePath: 'cloudfront-functions/spa-routing/index.js'
            })
        })
	
	
        this.distribution = new cloudFront.Distribution(this, 'Distribution', {
	// 略
	defaultBehavior: {
                // 略
                functionAssociations: [
                    {
                        eventType: cloudFront.FunctionEventType.VIEWER_REQUEST,
                        function: spaRoutingFunction,
                    },
                ],
            },

で、CloudFront Functions の実装の一例はこちら

// noinspection ES6ConvertVarToLetConst,JSUnusedGlobalSymbols

function handler(event) {
    var request = event.request;

    if (
         // ここに SPA として開かせたいURIの判定
	 // 例えば正規表現とかHTTPメソッドとか
    ) {
        request.uri = '/index.html';
    }


    return request;
}

これで、晴れて SPAのトップ以下のルートも x-cache: Hit from cloudfront になりました

CloudFront Functions を使う

Discussion