如何将 Angular 4+（前端）部署到 CDN？

Question

我想将我的 Angular 应用程序（使用 AOT）部署到 CDN，同时使用我自己的 REST 服务器。

我希望第一个请求总是发送到我的 REST 服务器（比方说 https://example.com）。然后第一个响应将指示浏览器从 CDN 加载 Angular 的第一个模块。

所有资源请求（API 请求）当然会转到我的 REST 服务器（比方说 https://example.com/api/XXXX）。

现在我的问题是：

代码如何知道从哪里加载下一个 Angular 模块？

有人可以解释一下这背后的机制吗？

Answer 1

您需要使用 Cdnify 。尝试使用 gulpCDN 等库

对于我们的问题，我所做的是在 S3 中构建产品后上传所有 Dist 文件，然后运行

the gulp cdnify which will replace all the local host links of main and vendor bundle files to the links from the s3 bucket (you need to specify the root directly to the library for gulp to do that automatically) in the index.html

我的节点服务器将作为服务器的文件，然后使用它。

我们采用这种方法的原因是 Node 在提供静态文件时速度很慢 sso 使用这种机制我们可以获得更快的性能，一旦 index.html 被加载，您就不必担心其他模块，因为所有vendor 和 main js 文件将从 cdn link 加载，在 index.html .

中发生了变化

为了参考，我使用了这些库 Gulp S3 and gulp cdinfy

Answer 2

不确定这是否有帮助，但这是我在数据中心使用 REST 服务器在 S3 上托管前端的解决方案：我们有 www.example.com 的 CNAME 指向前端所在的 S3 存储桶和 api.example.com 到我们的 REST 服务器。

在您的 environment.prod.ts 中指定 apiUrl:

export const environment = {
    production: true,
    apiUrl: 'https://api.example.com'
};

您可以将其用于 API 这样的调用：

import {environment} from '../environments/environment';

getHttp(url: string, params?: RequestOptions): Observable<any> {
    // prefix API URL if not already given
    if (url.indexOf(environment.apiUrl) === -1) {
        url = environment.apiUrl + url;
    }
    return this.http.get(url, params).map().catch();
}

只需确保您在构建时确实通过了环境，而不仅仅是目标：

ng build --env=prod

最重要的是，允许来自 www.到 api。 (CORS) 通过从您的 REST 服务器发送这些 headers：

Access-Control-Allow-Origin: https://www.example.com
Vary: Origin

注意：这也使得使用代理进行本地开发变得过时，因为您可以简单地指定本地 apiUrl，包括 environment.ts

中的端口

Answer 3

简答：在执行 "ng build".

时使用选项“--deploy-url”

“--deploy-url”的作用是强制 <script> 标签使用您指定的域使用绝对 URL。这样浏览器将始终知道在哪里加载静态资产文件（JavaScript、图像等）

=========================

用例：

REST 服务器运行在我们的数据中心。它不仅提供 REST API，还提供初始 index.html（意味着来自浏览器的非常第一个请求总是转到此 REST 服务器）。

我们所有的 Angular 静态文件（它们只是 JavaScript 文件）都部署到 CDN（例如 AWS、AZURE、GOOGLE ...）

=========================

如果没有“--deploy-url”，"ng build" 将产生一个 index.html，如下所示：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
  <script type="text/javascript" src="/inline.bundle.js"></script>
  <script type="text/javascript" src="/polyfills.bundle.js"></script>
  <script type="text/javascript" src="/styles.bundle.js"></script>
  <script type="text/javascript" src="/vendor.bundle.js"></script>
  <script type="text/javascript" src="/main.bundle.js"></script>
 </body>
</html>

使用“--deploy-url”，"ng build" 将产生一个 index.html，如下所示：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
  <script type="text/javascript" src="https://any.cdn.com/inline.bundle.js"></script>
  <script type="text/javascript" src="https://any.cdn.com/polyfills.bundle.js"></script>   
  <script type="text/javascript" src="https://any.cdn.com/styles.bundle.js"></script>    
  <script type="text/javascript" src="https://any.cdn.com/vendor.bundle.js"></script>  
  <script type="text/javascript" src="https://any.cdn.com/main.bundle.js">
  </script>
</body>
</html>

=========================

部署是什么样的：

例如，

ng build --deploy-url YOUR-CDN-SERVER-DOMAIN --prod --aot

这应该会生成一个 /dist 文件夹，其中包含所有内容（包括 index.html）。接下来只需将 index.html 移动到您的 REST 服务器，并将其余文件部署到 CDN。

现在您可以让用户先访问您自己的域 www.example.com。您可以将所有这些 Angular 生成的 JS 文件放入您想要的任何 CDN，而不必担心 CORS。

=======================

备注：

这个解决方案可以从高层次的角度解释事情。它在我的情况下工作得很好。如果您有任何问题，请随时发表评论。

如何将 Angular 4+（前端）部署到 CDN？

How to Deploy Angular 4+ (front-end) to CDN?

rest

cdn

aot

angular