求助：Surge部署Create React App项目后访问出现404错误

Let’s break down the possible issues and fixes step by step—this is super common with SPA deployments on Surge, so we’ll get you sorted:

• Make sure you’re deploying the correct build folder
  When you run npm run build, create-react-app compiles all your code into the build directory. If you just run surge from your project root, you’re deploying your source files (not the compiled app), which will definitely cause a 404. Fix this by running:
  surge ./build http://jamming-1990.surge.sh/
  Double-check that the terminal output shows it’s uploading files from the build folder.

• Fix SPA routing issues on Surge
  React apps are single-page applications, meaning all routing is handled client-side. Surge doesn’t know to redirect all requests to index.html by default—so when you refresh or navigate directly to a route, it throws a 404. Here’s the quick fix:

  1. Go into your build folder.
  2. Copy index.html and rename the copy to 200.html.
  3. Re-deploy the build folder with Surge.
     This tells Surge to send the 200.html (which is identical to your app’s entry point) for any request that would otherwise return a 404, letting React Router handle the routing correctly.

• Double-check your Spotify redirect URI
  Even if you updated it, tiny mismatches can break things. Ensure the URI in your code exactly matches what’s in the Spotify Developer Dashboard:

  • Include the trailing slash if your code uses it (http://jamming-1990.surge.sh/ vs http://jamming-1990.surge.sh matters).
  • Make sure your Spotify app isn’t still in "draft" mode—sometimes draft apps have restricted access that can cause unexpected errors (though this might not directly trigger a 404, it’s worth verifying).

• Verify your build process completed successfully
  Run npm run build again and watch the terminal output. If there are any compilation errors (like missing dependencies, syntax issues, or unresolved imports), the build folder might be incomplete. Fix any errors before re-deploying.

• Clear browser cache or use incognito mode
  Sometimes your browser caches old, broken versions of your app. Try clearing your cache, or opening the Surge URL in an incognito window to rule out cached content causing the 404.

内容的提问来源于stack exchange，提问作者user6495201