以最低成本在 Google Cloud 上部署 Angular 应用程序

Question

我希望将我的 Angular 应用部署到 Google Cloud，包括以下内容：

• 提供由

  ng build

生成的静态文件
• 在我的自定义域上：site.example.com
• 正确的 Angular 深度链接（另请参阅Angular 文档）：在 site.example.com、site.example.com/home、site.example.com/profile 等上提供 index.html，同时还提供其他文件（例如/资产/icon.png）通常
• 最大限度地降低成本，因为我的预算非常严格（<$5/month preferred)

我尝试将静态文件部署到 Google Cloud Storage 存储桶，并且可以通过设置“网站配置”->“索引（主）页面后缀”来提供 index.html。但是，我没有看到仅使用云存储将其他路由（例如 site.example.com/home ）重定向到 index.html 的方法。

我研究过的其他事情包括：

• 使用云负载均衡器（如本文中建议的那样），但我相信它会变得非常昂贵，因为它使用计算引擎（对吗？）
• 在 Cloud Run 或 Computer Engine 上使用自定义服务器，但这对于提供静态文件来说似乎有点矫枉过正，并且可能会耗费大量成本
• 使用 Google App Engine，但我不确定它是否支持我的所有要求（特别是 Angular 的 URL 重写），并且能够将我的静态文件与后端分开部署会很好，但我确实认为这是一个后备替代方案，如果您能提供有关如何使用 GAE 的指导，我们将不胜感激

TL;DR 我需要有关 Angular 的服务器端 URL 重写和最小化成本的帮助。

非常感谢您的帮助！

Answer 1

只要是静态文件，我强烈建议使用App Engine标准。您免费提供您的网站（无服务器费用，免费提供静态文件），并且您每天有高达 1Gb 的免费出站流量！

此外，您可以使用自定义域将您的 DNS 名称插入 App Engine 之上，并让 Google Cloud 管理 SSL 证书。

毫无疑问，这是托管静态网站最简单、最便宜的解决方案。

Answer 2

我尚未成功地正确设置 App Engine 实例来静态服务我的 Angular

dist

文件，并将路由重定向到具有根

index.html

的非静态文件，而不必显式列出所有可能的路由。

例如我当前的

app.yaml

文件

# --- NOT RECOMMNENDED: need to explicitly list all Angular routes ---
runtime: nodejs22

handlers:
  - url: /
    static_files: dist/index.html
    upload: dist/index.html
  - url: /(routeA|routeB|routeC).*
    static_files: dist/index.html
    upload: dist/index.html
  - url: /
    static_dir: dist

其中，我无法以有用的方式使用

error_handlers

。

我的解决方案是使用 Firebase 托管部署我的 SPA。交互式

firebase init

命令就像一个魅力，尤其是在询问 将所有 URL 重写为

index.html

时

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File dist/index.html already exists. Overwrite? No

对此替代方案有什么想法或者我应该如何配置我的

app.yaml

？