firebase - Nuxt 3 SPA on Azure Storage Account: 404 on Initial Load & Possible Cache Issue - Stack Overflow

admin管理员组

文章数量:1401643

Issue:

I have a Nuxt 3 application configured as a Single Page Application (SPA) (ssr: false).

• Locally, everything works as expected,
• but when deployed to Azure Storage Account as a static site, I'm facing a 404 issue on page refresh.

Behavior:

1- Locally:

When refreshing a page like /overview, the initial request succeeds with a 200 status code.

2- In Production (Azure):

• Refreshing /overview results in a 404 error for the initial request.
• After the failed request, the page loads correctly.

Additionally, I suspect this issue might be causing another problem related to caching when users return from an external URL (Stripe Checkout Page).

Secondary Issue (Possibly Related to 404):

• In my app, users are redirected to Stripe Checkout.
• When they return, the user can navigate to /overview or any page.
• However, after returning, /overview displays outdated components and content from a previous deployment instead of the latest version. These old components should no longer appear, but they persist until a manual refresh happens.
• This only happens when returning from Stripe. If I navigate within the app normally, the issue doesn't occur.

Possible Cause & Question:

• Is the initial failed request (404 on refresh) causing the browser to serve a previously cached bundle?
• If not, could these be two separate issues?
• How can I fix the 404 issue on page refresh in Azure Storage?
• Is there a way to ensure that /overview always fetches fresh data when returning from Stripe?

Deployment Setup:

• Nuxt 3 (SPA Mode: ssr: false)
• Azure Storage Account for static hosting
• GitHub Actions for deployment

nuxt.config.ts (Relevant Parts)

  // Disables SSR to use SPA
  ssr: false,

  compatibilityDate: "2024-04-03",

  devtools: { enabled: true },

  hooks: {
    "prerender:routes": function ({ routes }) {
      routes.clear(); // SPA -> Do not generate any routes (except the defaults)
    },
  },

Commands Used for deployment:

• 1- nuxi generate to generate the static bundle
• 2- Those details used for Azure pipeline in github action .yml

   with:
          source_dir: .output/public
          container_name: ${{ secrets.AZURE_CONTAINER_NAME }}
          connection_string: ${{ secrets.AZURE_STAGING_STORAGE_CONNECTION_STRING }}
          overwrite: true

What I Have Tried:

• Checked Azure Static Web Hosting settings.
• Ensured Nuxt SPA mode is correctly set (ssr: false).
• When I deployed the app to Firebase Hosting, the 404 issue did not occur, even though I used the same build command. Could this be an Azure-specific issue? I haven’t tested the Stripe-related issue on Firebase yet, but I noticed that the 404 problem only happens on Azure.

Expected Outcome:

• 1- Page refresh (/overview) should not cause a 404 error.
• 2- After returning from Stripe, /overview should always show fresh data instead of an outdated version.

Would appreciate any guidance on fixing these issues!

本文标签： firebaseNuxt 3 SPA on Azure Storage Account 404 on Initial Load amp Possible Cache IssueStack Overflow