Question

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

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

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

现在我的问题是：

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

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

Answer 1

简答：使用选项＆＃34; - deploy-url ＆＃34;在做＆＃34; ng build＆＃34;。

＆＃34; - deploy-url＆＃34;的做法是强制<script>标记使用您指定的域使用绝对URL。这样浏览器将始终知道加载静态资产文件（JavaScript，图像等）的位置

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

使用案例

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

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

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

没有＆＃34; - deploy-url＆＃34;，＆＃34; ng build＆＃34;将产生一个index.html如下：

＆＃13;

<!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>

＆＃13;

使用＆＃34; - deploy-url＆＃34;，＆＃34; ng build＆＃34;将产生一个index.html如下：

＆＃13;

<!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>

＆＃13;

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

部署是什么样的：

例如，

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

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

现在，您可以让用户首先访问您自己的域名www.example.com。您可以将所有Angular生成的JS文件放到您想要的任何CDN中，而无需担心CORS。

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

注意：

此解决方案可以从高层次的角度解释问题。它确实在我的情况下工作。如果您有任何疑问，请随时发表评论。

Answer 2

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

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

gulp cdnify将替换main的所有本地主机链接和供应商将文件捆绑到s3存储桶的链接（您需要直接指定根目录到gulp来执行该操作自动）在index.html

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

我们采用这种方法的原因是Node在提供静态文件方面很慢，使用这种机制我们可以获得更快的性能，一旦index.html被加载，你不必担心其他模块，因为所有的供应商和主要的js文件将从index.html中更改的cdn链接加载。

对于参考，我使用了这些库 Gulp S3和gulp cdinfy

Answer 3

不确定这是否会有所帮助，但这是我在数据中心使用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服务器发送这些头文件：

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

注意：这也使得使用本地开发的代理过时，因为您只需指定本地apiUrl，包括environment.ts

中的端口

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

3 个答案: