首页 > 解决方案 > 当用户通过输入 URL 直接访问时,具有 Firebase Cloud 功能的 Angular SSR 始终返回 404

问题描述

我按照这个链接创建了一个带有 Firebase 云功能的 Angular SSR链接

firebase.json

{
  "hosting": [
    {
      "target": "myproject",
      "public": "dist/myproject/browser",
      "ignore": [
        "**/.*"
      ],
      "headers": [
        {
          "source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public,max-age=31536000,immutable"
            }
          ]
        }
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "ssr" <-- My cloud function name
        }
      ]
    }
  ],
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  }
}

函数/index.ts

import * as functions from 'firebase-functions';
const regionalFunctions = functions.region('asia-east2');
const universal = require(`${process.cwd()}/dist/myproject/server/main`).app();

export const ssr = regionalFunctions.https.onRequest(universal);

通过运行firebase serve命令,在我的本地机器上进行测试

i  hosting[myproject]: Serving hosting files from: dist/smyproject/browser
✔  hosting[myproject]: Local server: http://localhost:5000
✔  functions[asia-east2-ssr]: http function initialized (http://localhost:5001/myproject/asia-east2/ssr).

在我的本地机器上,当我输入 http://localhost:5000或类似的http://localhost:5000/some/path/in-my-angular-routing东西会被重定向到我的默认页面时它工作正常

但是当我ng deploy在生产中使用命令和测试时,如果我输入 https://myproject-id.web.app或类似的东西 https://myproject-id.web.app/some/path/in-my-angular-routing,它总是会返回 404。

我该如何解决这个问题?

标签: node.jsangularfirebasegoogle-cloud-functions

解决方案


推荐阅读