您好,欢迎访问一九零五行业门户网

Babylon.js 迁移到 Azure 的原因和流程

你正在工作对于一家初创公司来说。突然间,那一年辛苦的编码工作得到了回报——成功了随着网络应用程序规模的不断增长和需求的增加。
在这个教程,我想谦虚地使用我们最近的“成功案例”之一围绕我们的 webgl 开源游戏框架 babylon.js 及其网站。我们很高兴看到这么多网络游戏开发者尝试一下。但为了满足需求,我们知道我们需要一个新的网络托管解决方案。
虽然本教程重点介绍 microsoft azure,但其中的许多内容这些概念适用于您可能喜欢的各种解决方案。我们还将看到我们为限制尽可能多的各种优化可能是从我们的服务器到您的浏览器的输出带宽。
简介babylon.js 是一个我们已经进行了一年多的个人项目。因为这是一个个人项目(即我们的时间和金钱),我们将网站、纹理和 3d 场景托管在使用小型专用 windows/iis 机器的相对便宜的托管解决方案。该项目在法国启动,但很快就引起了一些 3d 和全球各地的网络专家以及一些游戏工作室。我们很高兴社区的反馈,但流量是可控的!
例如,之间2014 年 2 月和 2014 年 4 月,我们每月平均有超过 7000 名用户,平均每月查看的页面数量超过 16k。我们一直在谈论的一些活动生成了一些有趣的峰:
但是网站上的体验还是足够好的。场景加载尚未完成以惊人的速度,但用户并没有抱怨那么多。
但是,最近,一位很酷的人决定在 hacker news 上分享我们的工作。听到这样的消息我们真的很高兴!但看看网站的连接发生了什么:
游戏结束我们的小服务器!它慢慢地停止工作,我们的用户体验非常糟糕。 iis 服务器花费时间处理大型静态资产和图像,以及 cpu 使用率太高了。当我们即将推出《刺客信条:海盗》webgl 时体验在 babylon.js 上运行的项目,是时候切换到更具可扩展性的了使用云解决方案进行专业托管。
但是之前回顾我们的托管选择,让我们简要谈谈我们的具体情况引擎和网站:
一切在我们的网站上是静态的。我们目前没有任何服务器端代码跑步。 我们的场景(.babylon json 文件)和纹理(.png 或 .jpeg)文件可能非常大(最多 100 mb)。这意味着我们绝对需要在我们的 .babylon 场景中激活 gzip 压缩文件。事实上,在我们的例子中,定价将在很大程度上被索引输出带宽。 绘制到 webgl 画布中需要特殊的安全检查。你例如,在没有启用 cors 的情况下,无法从另一台服务器加载我们的场景和纹理。 鸣谢:我要特别感谢 benjamin talmard,我们的法国 azure 技术人员之一帮助我们迁移到 azure 的布道者。
1. 迁移到 azure 网站和自动缩放服务如我们所愿为了花费大部分时间为我们的引擎编写代码和功能,我们不想在管道上浪费时间。这就是为什么我们立即决定选择 paas 方法而不是 iaas 方法。
此外,我们喜欢 visual studio 与 azure 的集成。我几乎可以做任何事情最喜欢的 ide。即使 babylon.js 托管在 github 上,我们也使用 visual studio 2013,typescript 和 visual studio online 来编写我们的引擎。作为您的注释项目,您可以免费获得 visual studio community 和 azure 试用版。
迁移到 azure我花了大约五分钟:
我在管理页面中创建了一个新网站:http://manage.windowsazure.com(可以这样做vs 内也是如此)。 我拿了我们的源代码存储库中的正确变更集与之前的版本相匹配目前在线。我右键单击visual studio 解决方案资源管理器中的 web 项目。
现在来了工具的出色之处。当我使用 microsoft 登录到 vs 时帐户绑定到我的 azure 订阅,向导让我只需选择 web我想要部署的网站。
无需担心复杂的身份验证、连接字符串或其他任何问题。
“下一个,下一个,下一步并发布”,几分钟后,在文章的末尾我们所有资产和文件的上传过程,网站已启动并运行!
关于配置方面,我们希望受益于酷炫的自动缩放服务。它对我们之前的黑客新闻场景会有很大帮助。
首先,你的实例已在缩放选项卡中配置为标准模式。
然后,您可以选择您想要自动扩展的实例数量,其中cpu 状况以及计划时间。
在我们的例子中,我们已经决定使用最多三个小型实例(1 核、1.75 gb 内存)并如果 cpu 利用率超过 80%,则自动生成一个新实例。我们将如果 cpu 下降到 60% 以下,请删除一个实例。自动缩放机制是在我们的例子中始终开启 - 我们尚未设置具体的预定时间。
这个想法是真正只为您在特定时间范围内需要的东西付费负载。我喜欢这个概念。有了这个,我们就能够处理借助此 azure 服务,无需执行任何操作即可达到之前的峰值!
您还可以通过紫色图表快速查看自动缩放历史记录。在我们的例子中,自从我们迁移到 azure 以来,到目前为止我们从未检查过一个实例。我们是下面将介绍如何最大程度地降低陷入自动缩放的风险。
总结一下在网站配置中,我们想要启用自动 gzip 压缩在我们的特定 3d 引擎资源上(.babylon 和 .babylonmeshdata文件)。这对我们来说至关重要,因为它可以节省高达 3 倍的带宽 并且因此……价格。
网站是运行在 iis 上。要配置 iis,您需要进入 web.config文件。我们在本例中使用以下配置:
<system.webserver> <staticcontent> <mimemap fileextension=.dds mimetype=application/dds /> <mimemap fileextension=.fx mimetype=application/fx /> <mimemap fileextension=.babylon mimetype=application/babylon /> <mimemap fileextension=.babylonmeshdata mimetype=application/babylonmeshdata /> <mimemap fileextension=.cache mimetype=text/cache-manifest /> <mimemap fileextension=.mp4 mimetype=video/mp4 /> </staticcontent> <httpcompression> <dynamictypes> <clear /> <add enabled=true mimetype=text/*/> <add enabled=true mimetype=message/*/> <add enabled=true mimetype=application/x-javascript/> <add enabled=true mimetype=application/javascript/> <add enabled=true mimetype=application/json/> <add enabled=true mimetype=application/atom+xml/> <add enabled=true mimetype=application/atom+xml;charset=utf-8/> <add enabled=true mimetype=application/babylonmeshdata /> <add enabled=true mimetype=application/babylon/> <add enabled=false mimetype=*/*/> </dynamictypes> <statictypes> <clear /> <add enabled=true mimetype=text/*/> <add enabled=true mimetype=message/*/> <add enabled=true mimetype=application/javascript/> <add enabled=true mimetype=application/atom+xml/> <add enabled=true mimetype=application/xaml+xml/> <add enabled=true mimetype=application/json/> <add enabled=true mimetype=application/babylonmeshdata /> <add enabled=true mimetype=application/babylon/> <add enabled=false mimetype=*/*/> </statictypes> </httpcompression></system.webserver>
这个解决方案工作得很好,我们甚至注意到加载场景的时间已经与我们之前的主机相比有所减少。我猜这要归功于azure 数据中心使用更好的基础设施和网络。
但是, i have一段时间以来一直在考虑迁移到 azure。我的第一个想法不是让网站实例为我的大量资产提供服务。从一开始,我就更感兴趣将我的资产存储在更适合设计的 blob 存储中那。它还将为我们提供一个可能的 cdn 场景。
2. 将资产移至 azure blob存储、启用 cors、gzip 支持和 cdn主要原因在我们的例子中使用 blob 存储是为了避免加载我们网络的 cpu为他们提供服务的站点实例。如果一切都通过 blob 提供除了一些 html、javascript 和 css 文件之外,我们的网站实例还会有存储自动缩放的机会很少。
但这引发了需要解决两个问题:
作为内容将托管在另一个域名上,我们将陷入跨域安全问题。为了避免这种情况,您需要在远程域(azure blob 存储)。azure blob 存储不支持自动 gzip 压缩。和我们不想降低 cpu 网站使用率,但作为交换,我们要因为带宽增加而支付三倍的价格!在 blob 存储上启用 corsblob 上的 cors存储已经支持几个月了。本文“windows azure 存储:cors 简介”介绍了如何使用 azure api 来配置 cors。就我而言,我不想编写一个小应用程序来做到这一点。我有在网上找到一个已经写好的:cynapta azure cors helper – free tool管理 windows azure blob 存储的 cors 规则。
然后我就在我的容器上启用了对 get 和正确标头的支持。检查是否一切都按预期进行,只需打开 f12 开发者栏并检查控制台日志:
如您所见,绿色日志行意味着一切运行良好。
这里有一个它将失败的示例案例。如果您尝试从我们的 blob 加载我们的场景直接从本地主机(或任何其他域)存储,您将得到日志中的这些错误:
总而言之,如果您发现在“access-control-allow-origin”中找不到您的调用域标头后面带有“访问被拒绝”,这是因为您没有正确设置您的 cors 规则。 控制自己的情绪非常重要cors 规则;否则,任何人都可以使用您的资产,从而您的带宽,花钱而不让你知道!
在 blob 存储上启用 gzip 支持就像我一样之前告诉过您,azure blob 存储不支持自动 gzip压缩。竞争对手的解决方案似乎也是如此s3。您有两种选择来解决这个问题:
上传前在客户端上对文件进行 gzip 压缩自己上传,将其上传到 blob 中使用经典工具进行存储并设置 content-encoding 标头到 gzip。此解决方案有效,但仅适用于支持 gzip 的浏览器(是还有一个浏览器不支持 gzip 吗?)。
在客户端上自行对文件进行 gzip 压缩,并在blob 存储:一个使用默认 .extension,另一个使用.extension.gzip,例如。在 iis 端设置一个处理程序来捕获 http 请求从客户端检查 accept-encoding 设置为 gzip 的标头,并根据此支持提供相应的文件。你会发现更多细节有关本文中要实现的代码:从 azure cdn 提供 gzip 压缩内容。就我们而言,我不知道有哪个浏览器支持 webgl 而不是 gzip 压缩。所以如果浏览器不支持 gzip,没有真正的兴趣继续下去,因为这个可能意味着 webgl 也不被支持。
因此我选择了第一个解决方案。因为我们没有很多场景,而且我们也没有每天生产一个新的,我目前正在使用这个手动过程:
使用 7-zip,我正在压缩 .babylon我的机器上的文件使用 gzip 编码并将“压缩级别”设置为“最快”。其他压缩级别似乎在我的测试中产生了问题。 我使用适用于 microsoft azure 的 cloudberry explorer 上传文件云储存。 我使用 cloudberry 手动将 http 标头 content-encoding 设置为 gzip。
我知道什么你在想。我要对我的所有文件执行此操作吗?!?不,你可以工作构建一个可以自动执行此操作的工具或构建后脚本。为了例如,这是我构建的一个小命令行工具:
string accountname = yoda;string containername = wwwbabylonjs;string accountkey = yourmagickey;string scenetextcontent;// first argument must be the directory into the azure blob container targetedstring directory = args[0];try{storagecredentials creds = new storagecredentials(accountname, accountkey);cloudstorageaccount account = new cloudstorageaccount(creds, usehttps: true);cloudblobclient client = account.createcloudblobclient();cloudblobcontainer blobcontainer = client.getcontainerreference(containername);blobcontainer.createifnotexists();var scenedirectory = blobcontainer.getdirectoryreference(directory);string[] filesargs = args.skip(1).toarray();foreach (string filespec in filesargs){ string specdir = path.getdirectoryname(filespec); string specpart = path.getfilename(filespec); if (specdir.length == 0) { specdir = environment.currentdirectory; } foreach (string file in directory.getfiles(specdir, specpart)) { string path = path.combine(specdir, file); string scenename = path.getfilename(path); console.writeline(working on + scenename + ...); cloudblockblob blob = scenedirectory.getblockblobreference(scenename); blob.properties.contentencoding = gzip; blob.properties.contenttype = application/babylon; scenetextcontent = system.io.file.readalltext(path); var bytes = encoding.utf8.getbytes(scenetextcontent); using (memorystream ms = new memorystream()) { using (gzipstream gzip = new gzipstream(ms, compressionmode.compress, true)) { gzip.write(bytes, 0, bytes.length); } ms.position = 0; console.writeline(gzip done.); blob.uploadfromstream(ms); console.writeline(uploading in + accountname + / + containername + / + directory + done.); } }}}catch (exception ex){console.writeline(ex);}
为了使用它,我可以执行以下操作:
uploadandgzipfilestoazureblobstorage 场景/espilitc:\boulot\babylon\scenes\espilit\*.babylon* 推送包含多个的场景文件(我们的增量场景包含多个 .babylonmeshdata 文件)。
或者简单地说:
uploadandgzipfilestoazureblobstorage 场景/espilitc:\boulot\babylon\scenes\espilit\espilit.babylon 推送唯一文件。
检查一下gzip 使用此解决方案按预期工作,我使用的是 fiddler。从客户端加载您的内容机器并检查网络痕迹,返回的内容是否确实已压缩且可以解压缩:
启用cdn一旦你完成前两个步骤后,您只需单击其中的一个按钮即可用于启用 cdn 并将其映射到您的 blob 存储的 azure 管理页面:
就是这样简单的!就我而言,我只需更改以下 url:http://yoda.blob.core.windows.net/wwwbabylonjs/scenes到http://az612410.vo.msecnd.net/wwwbabylonjs/scenes。请注意,您可以自定义此 cdn如果您愿意,可以将域名添加到您自己的域名中。
多亏了这一点,我们能够以非常快速的方式为您提供 3d 资产,因为您将得到服务从此处列出的节点位置之一:azure 内容交付网络 (cdn)节点位置。
我们的网站是目前托管在北欧 azure 数据中心。但如果你来的话从西雅图,您将 ping 该服务器只是为了下载我们的基本 index.html,index.js、index.css 文件和一些屏幕截图。所有 3d 资产将从您附近的西雅图节点提供服务!
注意:我们所有的演示正在使用完全优化的体验(使用 gzip、cdn 和 db 的 blob 存储)缓存)。
3. 使用 html5 indexeddb 避免重新下载资源优化加载时间和控制输出带宽成本不仅仅是服务器端的问题。您还可以构建一些逻辑客户端来优化事物。幸运的是,我们从 babylon.js 引擎 v1.4 开始就做到了这一点。我有详细解释了我如何实现对 indexeddb 的支持在本文中:使用 indexeddb 处理 3d webgl资产:分享 babylon.js 的反馈和技巧。您将找到如何激活它我们的 wiki 上的 babylon.js:在 indexeddb 中缓存资源。
基本上,你只需创建一个与 .babylon 名称匹配的 .babylon.manifest 文件场景,然后设置您想要缓存的内容(纹理和/或 json 场景)。那是它。
例如,检查 hill valley 演示场景的情况。第一次加载时,以下是发送的请求:
153 项和已收到 43.33 mb。但如果您同意让babylonjs.com“使用额外的存储空间在您的计算机上”,这是您第二次加载时会看到的内容同一场景:
1 项和 348字节!我们只是检查清单文件是否已更改。如果没有,我们将加载所有内容来自数据库,我们节省了 43+ mb 的带宽。
例如,这种方法正在《刺客信条海盗》游戏中使用:
让我们考虑一下那:
游戏加载一次后几乎立即启动,因为资源是直接从本地数据库提供服务。您的网络存储压力更小,使用的带宽也更少 -花费更少的钱!现在就可以了让您的用户和老板都满意!
本文是网络开发技术的一部分来自微软的系列。我们很高兴与您分享 microsoft edge 和新的 edgehtml 渲染引擎。免费虚拟机或在 mac、ios、android 或 windows 设备上进行远程测试@ http://dev.modern.ie/。
以上就是babylon.js 迁移到 azure 的原因和流程的详细内容。
其它类似信息

推荐信息