如何在Firebase Hosting部署多个独立PWA应用（各占独立子域名）

Got it, let’s walk through exactly how to set this up—this is totally doable, and I’ve helped a few folks configure similar multi-PWA setups with Firebase Hosting before. Here’s a step-by-step guide tailored to your needs:

1. Organize Your Project Folder Structure #

First, structure your root project directory to keep each PWA completely separate. Create a dedicated folder for every app, like this:

your-project-root/
├── app1/          # All files for app1.site.com (index.html, assets, js, css, manifest.json)
├── app2/          # All files for app2.site.com
├── app3/          # All files for app3.site.com
└── firebase.json  # Firebase configuration file (we’ll set this up next)

Drop each PWA’s full codebase into its corresponding folder—no overlapping files needed.

2. Configure Firebase.json for Multi-Site Hosting #

Firebase Hosting supports multiple sites per project, which is exactly what we need for subdomains. Replace the default firebase.json content with this multi-site setup:

{
  "hosting": [
    {
      "target": "app1",
      "public": "app1",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [  # Optional: Add this if your PWA is a single-page app
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "app2",
      "public": "app2",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "app3",
      "public": "app3",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ]
}

• The target field is a unique identifier for each site (match this with what we’ll set up in the next step).
• The public field points directly to the folder containing your PWA’s files.
• The rewrites section is optional but recommended for SPAs (most PWAs fall into this category) to handle client-side routing.

3. Set Up Firebase Hosting Targets #

Targets let Firebase map your configuration to specific sites in your project. Run these commands in your terminal (from the project root):

firebase target:add hosting app1 app1-site
firebase target:add hosting app2 app2-site
firebase target:add hosting app3 app3-site

• The first app1 is the target name (must match what’s in firebase.json).
• The second app1-site is a friendly name for the site in Firebase’s console—feel free to name it whatever makes sense for you.

4. Add & Verify Your Subdomains #

Next, link each subdomain to your Firebase project:

1. Open the Firebase Console, navigate to your project, and go to the Hosting section.
2. Click Add custom domain.
3. Enter app1.site.com, then follow the prompts to verify ownership of your domain (you’ll need to add a DNS record to your domain provider—usually a TXT or CNAME record).
4. Repeat this process for app2.site.com and app3.site.com.
   • Note: If your main domain (site.com) is already verified in Firebase, subdomains will often auto-verify without extra steps.

5. Bind Subdomains to Your Targets #

Once your subdomains are verified, connect each one to its corresponding PWA target:

1. In the Firebase Hosting console, find each subdomain you added.
2. Click Connect to a site.
3. Select the matching target (e.g., app1 for app1.site.com) and confirm.

6. Deploy Your PWAs #

Now you’re ready to deploy:

• To deploy a single PWA: Run firebase deploy --only hosting:app1 (replace app1 with the target name for the app you want to deploy).
• To deploy all PWAs at once: Run firebase deploy --only hosting.

Key Notes for PWAs #

• Manifest.json: Make sure each PWA’s manifest.json has the correct start_url (should be / since each subdomain is an independent site) and scope set appropriately.
• HTTPS: Firebase automatically provisions HTTPS certificates for custom domains, which is required for PWAs to work properly.
• Cache Rules: If you need custom caching for assets, add a headers section to each hosting object in firebase.json (e.g., to cache CSS/JS files long-term).

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