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

Question

我想將我的Angular應用程序（使用AOT）部署到CDN，同時使用我自己的REST服務器。

我想第一個請求總是轉到我的REST服務器（比如說https://example.com ）。 然后第一個響應將指示瀏覽器從CDN加載Angular的第一個模塊。

所有資源請求（API請求）當然都會轉到我的REST服務器（假設是https://example.com/api/XXXX ）。

現在我的問題是：

代碼如何知道從哪里加載下一個Angular模塊？

有人可以解釋一下這背后的機制嗎？

Answer 1

簡答：在執行“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

這應該生成一個包含所有內容（包括index.html）的/ dist文件夾。 接下來只需將index.html移動到REST服務器，然后將剩余的文件部署到CDN。

現在，您可以讓用戶首先訪問您自己的域名www.example.com。 您可以將所有Angular生成的JS文件放到您想要的任何CDN中，而無需擔心CORS。

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

筆記：

該解決方案可以從高層次的角度解釋事物。 它確實在我的情況下工作。 如果您有任何疑問，請隨時發表評論。

Answer 2

你需要使用Cdnify 。 嘗試使用像gulpCDN等庫。

對於我們的問題，我所做的是在S3中的prod構建之后上傳所有Dist文件，然后運行

gulp cdnify將把主要和供應商包文件的所有本地主機鏈接替換為來自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 個解決方案

解決方案1
11 已采納 2017-11-01 20:26:51

解決方案2
2 2017-10-27 06:55:16

解決方案3
2 2017-10-31 23:24:39

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

問題描述

3 個解決方案

解決方案1 11 已采納 2017-11-01 20:26:51

解決方案2 2 2017-10-27 06:55:16

解決方案3 2 2017-10-31 23:24:39

解決方案1
11 已采納 2017-11-01 20:26:51

解決方案2
2 2017-10-27 06:55:16

解決方案3
2 2017-10-31 23:24:39