React与Firebase托管异常求助：API部署及404缓存问题排查

Hey there! Let's get your React + Firebase project set up with proper hosting and fix that annoying cache issue where you have to clear cache to see the 404 page. Here's a step-by-step breakdown:

1. Update Your firebase.json Configuration #

Your current config is missing the hosting section, which is essential for deploying your React app. Replace your existing firebase.json with this complete version (I'll explain each part below):

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  },
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // Forward API requests to Firebase Functions
      {
        "source": "/api/**",
        "function": "api" // Make sure this matches your Functions entry point name
      },
      // Handle React SPA routing: send all other requests to index.html
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      // Prevent caching of index.html to avoid stale 404s or old app versions
      {
        "source": "/index.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      // Cache static assets (CSS, JS, images) for 1 year (adjust as needed)
      {
        "source": "**/*.@(css|js|png|jpg|jpeg|gif|svg|ico)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000, public, immutable"
          }
        ]
      }
    ]
  }
}

Key Config Explanations: #

• public: "build": React outputs production-ready files to the build folder after running npm run build—this tells Firebase to deploy those files.
• rewrites:
  • The first rule sends all /api/* requests to your Firebase Functions (assuming your API is hosted there). If your API uses a different function name, update "function": "api" to match.
  • The second rule ensures React's single-page app routing works correctly (all non-API requests load index.html).
• headers:
  • The index.html rule disables caching entirely, so you'll never have to clear cache to see updated content or proper 404 pages again.
  • Static assets get long-term caching to improve performance.

2. Prepare Your React App for Deployment #

Before deploying, generate the production build of your React app:

npm run build

This creates the build folder with optimized static files.

3. Deploy to Firebase Hosting #

Run this command to deploy just the hosting part (or omit --only hosting to deploy Firestore/Functions too):

firebase deploy --only hosting

4. Verify the Fix #

After deployment, visit your Firebase Hosting URL (like https://jp-db-2018.firebaseapp.com). Now:

• Your React app should load correctly.
• Visiting /api/getChannels will either hit your Functions API or show a proper 404 immediately (no more cache-clearing required!).

内容的提问来源于stack exchange，提问作者PARK JEONG KEUN