单域名适配两个Firebase项目可行性及同项目部署方案咨询

Great question! Let's break this down into two clear scenarios to help you decide the best approach for your setup.

Can I use a single domain to access both Firebase projects? #

Yes, it's possible—but the most straightforward and recommended approach is to use subdomains, not the same root domain with paths. Here's why:

• Subdomain setup (cleanest option): Bind Project A (landing page) to www.foo.com and Project B (Angular app) to app.foo.com. Firebase Hosting natively supports mapping multiple subdomains to different projects. You just need to configure CNAME records in your domain provider for each subdomain pointing to Firebase's hosting endpoints. This keeps your projects fully independent—deployments, resources, and configurations don't interfere with each other. This is absolutely a reasonable and scalable solution, especially if the two apps are managed by separate teams or need isolated quotas (bandwidth, storage, etc.).

• Path-based forwarding (possible but not ideal): If you insist on using paths like www.foo.com/bar for the Angular app, you'd need to set up proxying from Project A's hosting to Project B's hosted URL. This requires:

  1. Configuring CORS rules on Project B's Hosting to allow requests from www.foo.com.
  2. Adding rewrite rules in Project A's firebase.json to forward /bar/** requests to Project B's URL (or using a Cloud Function as an intermediary).
     This approach adds complexity, potential performance overhead, and makes debugging cross-project issues harder. It's not the most maintainable long-term solution.

Can I deploy both the landing page and Angular app in the same Firebase project? #

Absolutely—and this is often the simpler choice if you don't need strict separation between the two apps. Here's how to set it up:

1. Structure your files locally:

   • Place your static landing page files (index.html, CSS, JS, assets) in the root of your project's public folder.
   • Build your Angular app (run ng build) and move the generated dist folder contents into a bar subfolder inside public (so you have public/bar/index.html and associated assets).

2. Configure firebase.json for routing:
   You need rewrite rules to handle both the landing page and Angular's single-page app routing. Here's a sample config:

   {
     "hosting": {
       "public": "public",
       "ignore": [
         "firebase.json",
         "**/.*",
         "**/node_modules/**"
       ],
       "rewrites": [
         // Handle Angular app routing: send all /bar requests to its index.html
         {
           "source": "/bar/**",
           "destination": "/bar/index.html"
         },
         // Default: send all other requests to the landing page's index.html
         {
           "source": "**",
           "destination": "/index.html"
         }
       ]
     }
   }
   

3. Deploy as usual: Run firebase deploy --only hosting to push both the landing page and Angular app to your Firebase project.

Pros of this combined approach: #

• Single domain configuration (no subdomain setup needed).
• Unified project management—you only have one Firebase project to monitor and maintain.
• No cross-project proxying or CORS headaches.

Cons to consider: #

• Deployments are tied together (though you can deploy specific folders with firebase deploy --only hosting:public/bar to update just the Angular app, or hosting:public for the landing page).
• Resource quotas (like hosting bandwidth) are shared between both apps.

Final Recommendation #

• Use subdomains if the two apps are independent, managed by separate teams, or need isolated resources.
• Combine into one project if the apps are closely linked, you want simpler management, or don't need strict separation.

内容的提问来源于stack exchange，提问作者Carlos E.