2

I'm deploying an Astro static site to S3 and serving it via CloudFront. Here's my deploy script:

"deploy": "npm run build && aws s3 sync dist s3://mybucket/WEBSITE --delete"

I enabled static website hosting on S3 and pointed my CloudFront origin path to /WEBSITE, since all files are uploaded there.

This is my astro.config.mjs:

import { defineConfig } from 'astro/config';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  base: "/",
  vite: {
    plugins: [tailwindcss()],
  },
});

The issue: When I click a nav link like this:

<a href="/pricing" class="text-gray-700 hover:text-black">Pricing</a>

It results in a 404 error:

404 Not Found
Code: NoSuchKey
Key: WEBSITE/WEBSITE/pricing/index.html

From the network tab, I see:

  1. The browser requests /pricing

  2. It gets a 302 redirect to /WEBSITE/pricing

  3. That path doesn't exist, so it fails

  4. However, if I directly type www.mysite.com/pricing in the browser, it loads fine.

Questions:

  • Why is clicking the link causing a redirect to /WEBSITE/pricing?

  • There’s no reference to /WEBSITE in my Astro code.

  • Could this be caused by CloudFront config or Astro itself?

I'd appreciate guidance on how to fix this so links like /pricing don’t get redirected incorrectly.

Improve this question
Related questions
11
Subfolder redirect issue with static website hosting using S3, CloudFront and Origin Path
2
AWS CloudFront redirect to path
11
CloudFront redirect all requests with path prefix
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.