如何将Angular 4+(前端)部署到CDN？

Question

如何将Angular 4+(前端)部署到CDN？

gye*_*gye 9 rest cdn aot angular

我想将我的Angular应用程序(使用AOT)部署到CDN,同时使用我自己的REST服务器.

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

所有资源请求(API请求)当然都会转到我的REST服务器(假设是https://example.com/api/XXXX).

现在我的问题是:

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

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

Answer 1

gye*_*gye 11

简答:在执行"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>

Run Code Online (Sandbox Code Playgroud)

使用"--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>

Run Code Online (Sandbox Code Playgroud)

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

部署是什么样的:

例如,

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

Run Code Online (Sandbox Code Playgroud)

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

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

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

笔记:

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

归档时间：	8 年，7 月前
查看次数：	3280 次
最近记录：	8 年，6 月前