Angular SSR 结合 Firebase Cloud Function 部署后直接访问URL始终返回404的问题排查与解决

I’ve run into this exact issue before—local testing works perfectly with firebase serve, but production deployment throws 404s everywhere. Let’s break down the likely culprits and fix them step by step:

1. Fix the Cloud Function Path Reference (Most Common Issue) #

When running locally, process.cwd() points to your project root, so your path to the server bundle works. But once deployed, Cloud Functions runs from the functions directory, which means your original path breaks.

Update your functions/index.ts to use a path relative to the function’s directory (using __dirname instead of process.cwd()):

import * as functions from 'firebase-functions';
const regionalFunctions = functions.region('asia-east2');
// Adjust the path based on your project structure (this assumes dist is in your root, one level above functions)
const universal = require(`${__dirname}/../dist/myproject/server/main`).app();
export const ssr = regionalFunctions.https.onRequest(universal);

2. Ensure the Server Bundle is Included in the Function Deployment #

Firebase only deploys files inside the functions directory by default. You need to make sure your Angular server bundle gets included:

Option A: Update functions/package.json #

Add a files field to include the server bundle from your root dist folder:

{
  "name": "functions",
  "scripts": {...},
  "files": [
    "lib/**/*",
    "../dist/myproject/server/**/*"
  ]
}

Option B: Copy the Bundle in Predeploy Script #

Modify your firebase.json to copy the server bundle into the functions directory before deployment:

"functions": {
  "predeploy": [
    "npm --prefix \"$RESOURCE_DIR\" run lint",
    "npm --prefix \"$RESOURCE_DIR\" run build",
    "mkdir -p ./functions/dist/server",
    "cp -r ../dist/myproject/server/** ./functions/dist/server/"
  ]
}

Then update your index.ts path to ./dist/server/main.

3. Correct the Hosting Rewrite for Regional Functions #

Your Cloud Function is deployed to asia-east2, but Firebase Hosting defaults to looking for functions in us-central1 unless specified explicitly. Update your firebase.json hosting rewrites to target the correct region:

"rewrites": [
  {
    "source": "**",
    "function": "ssr",
    "region": "asia-east2"
  }
]

This is cleaner than using the destination field and avoids path mistakes with regional function URLs.

4. Verify Deployment and Debug #

• First, make sure you’ve built your Angular SSR bundle properly:

  ng build --configuration production && ng run myproject:server:production
  

• Deploy both hosting and functions together:

  firebase deploy --only hosting,functions
  

• Check function logs for errors (this will tell you if the server bundle is missing or path is wrong):

  firebase functions:log --function ssr
  

• Confirm your hosting target is correctly bound to your project:

  firebase target:list
  

  If not, link it with:

  firebase target:apply hosting myproject YOUR_PROJECT_ID
  

After making these changes, your production URLs should resolve correctly just like they did locally.

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