如何使用Firebase Hosting将两个React应用部署至同一域名不同路径？

Got it! Deploying two Create React App projects to different paths under the same Firebase domain is totally doable—let’s break this down step by step so you can get it up and running quickly:

Since React Router defaults to root path routing, you need to set a basename for each project to ensure routes work correctly under their subpaths.

• For your auth project:

  1. Open your routing config file (usually src/App.js or src/index.js), and add the basename="/auth" prop to your BrowserRouter:

     import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
     
     function App() {
       return (
         <Router basename="/auth">
           {/* Your existing route components go here */}
         </Router>
       );
     }
     
     export default App;
     

  2. Add "homepage": "/auth" to your package.json—this ensures build assets use the correct subpath instead of root.

• For your main project:
  Repeat the same steps, but use basename="/main" in the router and "homepage": "/main" in package.json.

Navigate to each project’s root directory and run the build command to generate static production files:

# In your auth project folder
npm run build

# In your main project folder
npm run build

Each project will now have a build folder with all compiled static assets.

First, if you haven’t already, install the Firebase CLI globally:

npm install -g firebase-tools

Then, initialize Firebase Hosting (you can do this in a new empty folder or one of your project directories):

firebase login
firebase init hosting

During initialization:

• Select the Firebase project you want to deploy to
• When asked for the public directory, enter a placeholder like temp (we’ll adjust this later)
• Choose No when asked to configure as a single-page app (we’ll set up custom rewrites instead)

Next, open the generated firebase.json file and replace its content with this configuration:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/auth/**",
        "destination": "/auth/index.html"
      },
      {
        "source": "/main/**",
        "destination": "/main/index.html"
      },
      // Optional: Set a default landing page (e.g., redirect root to auth)
      {
        "source": "**",
        "destination": "/auth/index.html"
      }
    ]
  }
}

Now create a public folder (matching the public directory in firebase.json), then copy each project’s build assets into subfolders:

# Create subdirectories for each app
mkdir -p public/auth public/main

# Copy auth build files (adjust paths to match your project locations)
cp -r ../auth/build/* public/auth/

# Copy main build files
cp -r ../main/build/* public/main/

Finally, deploy your setup with this command:

firebase deploy --only hosting

Once deployment finishes, you’ll be able to access your auth app at myapp.firebaseapp.com/auth and your main app at myapp.firebaseapp.com/main!

Quick Notes to Avoid Issues: #

• If you have absolute asset paths (like images or fonts), use process.env.PUBLIC_URL to reference them (e.g., <img src={process.env.PUBLIC_URL + '/logo.png'} />) to ensure they load correctly from the subpath.
• If you’re using HashRouter instead of BrowserRouter, you might not need the basename, but BrowserRouter is recommended for cleaner URLs.
• Test locally first with firebase serve to catch any path issues before deploying.

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