如何将角4+ (前端)部署到CDN？
我希望在使用自己的REST服务器的同时，将我的角应用程序(使用AOT)部署到CDN上。
我希望第一个请求总是转到我的REST服务器(假设是https://example.com)。然后，第一响应将指示浏览器从CDN加载角的第一个模块。
当然，所有资源请求(API请求)都将转到我的REST服务器(比方说https://example.com/api/XXXX)。
现在我的问题是：
代码如何知道从哪里加载下一个角度模块？
有谁能解释一下背后的机制吗？
回答 3
Stack Overflow用户
发布于 2017-11-01 20:26:51
简单回答:在执行"ng构建“时使用选项"--deploy-url”。
“--deploy”的作用是使用您指定的域强制<script>标记使用一个绝对的URL。这样，浏览器将始终知道在哪里加载静态资产文件(JavaScript、图片等)
=========================
用例：
REST服务器正在我们的数据中心运行。它不仅提供REST，而且还提供初始的index.html (这意味着来自浏览器的第一个请求总是转到这个REST服务器上)。
我们所有的角静态文件(它们只是JavaScript文件)都部署到CDN中(例如AWS、AZURE、谷歌.)
=========================
没有“--deploy”、"ng构建“的将生成一个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”、"ng构建“的将生成一个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。您可以将所有这些角度生成的JS文件放到您想要的任何CDN中，而不必担心CORS。
=======================
备注：
这个解决方案可以从一个高层次的角度来解释事情。在我的情况下，它确实非常有效。如果您有问题，请随时留言。
Stack Overflow用户
发布于 2017-10-31 23:24:39
不确定这是否有帮助，但这是我将前端托管在S3上并在数据中心中使用REST服务器的解决方案:我们让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中的一个端口。
Stack Overflow用户
发布于 2017-10-27 06:55:16
您需要使用Cdnify。试着使用像gulpCDN这样的库。
对于我们的问题，我所做的就是在S3中的prod构建之后上传所有的Dist文件，然后运行
gulp将替换s3桶中主包文件和供应商包文件到链接的所有本地主机链接(您需要在index.html中指定直接指向库的根，以便gulp自动完成此操作)。
文件，该文件将由我的节点服务器提供服务器，然后使用该文件。
我们采用这种方法的原因是Node在使用这种机制服务静态文件sso方面速度缓慢，我们可以获得更快的性能，一旦加载了index.html，您就不必担心其他模块，因为所有供应商和主要js文件都将从在index.html中更改的cdn链接中加载。
作为参考，我使用了这些库Gulp S3和gulp cdinfy
https://stackoverflow.com/questions/46613816
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号