我想第一个请求总是转到我的REST服务器(比方说https://example.com).然后第一个响应将指示浏览器从CDN加载Angular的第一个模块.
所有资源请求(API请求)当然都会转到我的REST服务器(假设是https://example.com/api/XXXX).
现在我的问题是:
代码如何知道从哪里加载下一个Angular模块?
有人可以解释一下这背后的机制吗?
“–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”,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.
=======================
笔记: