基本 url 托管不会触发云功能

分享于2023年03月15日 angular angular-universal firebase-hosting google-cloud-functions 问答
【问题标题】:base url hosting doesn't trigger cloud functions基本 url 托管不会触发云功能
【发布时间】:2021-10-14 20:44:02
【问题描述】:

meta-tags-are-not-updating-for-root-url-www-domain-com Base url not triggered hosting

我遇到了与上面的链接相同的问题。 他们给出的解决方案似乎有点奇怪,每次我尝试构建/部署我的应用程序时删除 index.html 也不起作用,因为我的 Angular 应用程序在浏览器目录中给出了错误“无法查找索引”。 我尝试为“/”添加路线 我还为源正则表达式尝试了单 * 和双 **。

    "rewrites": [
    {
      "source": "/",
      "function": "ssr_h"
    },
    {
      "source": "**",
      "function": "ssr_h"
    }
    ]

并且还尝试定义相同的基本路由 server.ts。 因为有人告诉我在正则表达式中

** != ''

这是我的完整 server.ts 在 server.ts 中相同,在正则表达式中尝试使用单 * 和双 ** 作为源代码。

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
import * as express from 'express';

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');
const compression = require('compression');

// The Express app is exported so that it can be used by serverless Functions.
// export const app = (): express.Express => {
function server(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/app/browser');
  const indexHtml = existsSync(join(distFolder, 'index.html')) ? 'index.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1m'
  }));

  // All regular routes use the Universal engine
  server.get('/', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });
  server.get('**', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

export const app = server();
app.use(compression());

export * from './src/main.server';

我正在使用最新版本的 Angular 10。

"@angular/cli": "~10.2.3",
"@angular/compiler": "~10.2.5",
"@angular/compiler-cli": "~10.2.5",
"@angular/language-service": "~10.2.5",
"firebase-admin": "^8.10.0",
"firebase-functions": "^3.6.0",
"firebase-functions-test": "^0.2.2",
"firebase-tools": "^8.20.0",
"@nguniversal/express-engine": "^10.1.0",

这篇文章和这个 github 问题是同一个问题,因为我让其他所有单条路线都正常工作。


【解决方案1】:

我不喜欢我想出的解决方案,但我发现本教程帮助了我 angular universal tutorial

由于我的代码已经准备就绪,我只需要进行一些小改动。 我在它指向我的“dist//app//browser”之前更改了public。 将第一个重定向添加到 index2.html,如下面的代码所示。

{
 "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source" : "**/*.@(css|js)",
        "destination": "/index2.html"
      },
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  }
}

其他步骤是将其添加到我的部署脚本中并将 public 添加到我的 git ignore

cp -a functions/dist/browser/. public/
mv public/index.html  public/index2.html 

【讨论】: