How to rewrite paths with AWS CloudFront

[peacock0803sz]

Motivations

• Prerequisites: Hosting as a static page with AWS CloudFront (+ S3)
  • Multiple talk slides in a single CloudFront distribution (= domain)
  • slides.p3ac0ck.net/ <- Root
    • /some-talk/ <- Root of the talk slides
    • /another-talk/ <- Another talk slides
• Expected behavior: Rewriting paths like https://talks.antfu.me/2021/composable-vue/
  • slides.p3ac0ck.net/some-talk/index.html <- No redirections
  • slides.p3ac0ck.net/some-talk/1 to slides.p3ac0ck.net/some-talk/index.html

Problem

Putting bellow JavaScript for CloudFront Functions and associate to "Viewer request" (CloudFront > Distribution > Behaviors).
But it does not working... Is it wrong redirecting to index.html?

function handler(event) {
    const request = event.request;
    const paths = event.request.uri.split("/");
    // console.log(paths);
    // console.log(request.uri);

    if ((paths.length <= 2 && paths[1] !== "index.html") || (paths.length >= 3 && paths[2] !== "index.html")) {
        request.uri = `/${paths[1]}/index.html`;
    }
    return request;    
}

Then it shows just a blank page (not slide contents) like this:

CleanShot.2024-08-15.at.16.08.37.mp4

Any knowledges / know-hows? Please let me know.

[kermanx]

Have you added the base option?

slidev build --base /some-talk/

[peacock0803sz]

YES, using --base option to build like here:

https://github.com/peacock0803sz/slidev-slides/blob/4fa20e08156b942396c5edaab1463da8224b4ea9/talks/pyconapac2023/package.json#L6

And using them in GitHub Actions workflow:
https://github.com/peacock0803sz/slidev-slides/blob/4fa20e08156b942396c5edaab1463da8224b4ea9/.github/workflows/deploy.yml#L75

[kermanx]

It seems that the urls like /pyconapac2023/assets/* should be preserved. Maybe it should be

    if ((paths.length <= 2 && paths[1] !== "index.html") || (paths.length >= 3 && paths[2] !== "assets")) {
        request.uri = `/${paths[1]}/index.html`;
    }

[peacock0803sz]

@kermanx That's correct, now it works! Thank you ~~ 🥳