ホームページ > 記事 > ウェブフロントエンド > Babylon.js を Azure に移行する理由とプロセス

Babylon.js を Azure に移行する理由とプロセス

王林オリジナル: 2023-09-03 16:41:06670ブラウズ

＃＃＃あなたが働いているスタートアップ企業向け。突然、その年のハードコーディングが功を奏し、成功しました。 Web アプリケーションのサイズと需要は増大し続けています。

これでチュートリアルでは、私たちの最近の「成功事例」の 1 つを謙虚に使用したいと思います。 WebGL オープンソースゲームフレームワーク Babylon.js とその Web サイトを中心に。たくさんのネットワークが見られてうれしいですゲーム開発者はぜひ試してみてください。しかし、需要に応えるためには、新しいものが必要であることはわかっていました。ウェブホスティングソリューション。

このチュートリアルは Microsoft Azure に焦点を当てていますが、多くのこれらの概念は、好みのさまざまなソリューションに適用されます。可能な限り制限するために行うさまざまな最適化についても説明します。これは、サーバーからブラウザへの出力帯域幅である可能性があります。

＃＃＃＃＃＃導入＃＃＃＃＃＃

Babylon.js は私たちは1年以上個人プロジェクトに取り組んでいます。これは個人的なプロジェクトであるため（つまり、私たちの時間とお金)、私たちは Web サイト、テクスチャ、3D シーンをホストしています。小型の専用 Windows/IIS マシンを使用した比較的安価なホスティングソリューション。このプロジェクトはフランスで始まりましたが、すぐに多くの 3D および世界中のネットワーク専門家と一部のゲームスタジオ。私たちはとても幸せですコミュニティからのフィードバックですが、トラフィックは制御可能です。

たとえば、次の間 2014 年 2 月から 2014 年 4 月までの間、月平均 7,000 人以上のユーザーが利用しました。月間 16,000 ページ以上の閲覧。私たちが話したいくつかのイベントいくつかの興味深いピークが生成されました: ＃＃＃＃＃＃＃＃＃＃＃＃しかしウェブサイトでのエクスペリエンスはまだ十分です。シーンの読み込みがまだ完了していません驚くほど速いですが、ユーザーはそれほど不満を抱いていません。

＃＃＃しかし、最近、クールな男性が私たちの成果を Hacker News で共有することに決めました。このようなニュースを聞いて本当に嬉しいです！しかし、Web サイトの接続に何が起こるかを見てください:

Babylon.js 迁移到 Azure 的原因和流程ゲームオーバー

私たちの小さなサーバーです!それはゆっくりと動作が停止し、ユーザーエクスペリエンスは最悪でした。 IISサーバー大規模な静的アセットや画像の処理に費やした時間、および CPU 使用率高すぎる。 Assassin's Creed:Pirates の WebGL を展開するにあたり Babylon.js で実行されているプロジェクトを体験してください。よりスケーラブルなものに切り替える時が来ました。クラウドソリューションを備えたプロフェッショナルなホスティング。

しかしその前にホスティングオプションを確認して、具体的な状況について簡単に説明しましょうエンジンとウェブサイト:

＃＃＃すべて私たちのウェブサイト上では静的です。現在サーバー側のコードはありませんランニング。

Babylon.js 迁移到 Azure 的原因和流程シーン (.babylon JSON ファイル) とテクスチャ (.png または .jpeg) ファイルは非常に大きくなる可能性があります (最大 100 MB)。これは、私たちが絶対に .babylon シーンで gzip 圧縮を有効にする必要があります書類。実際、私たちの場合、価格設定は大部分がインデックスに基づいて行われます。出力帯域幅。

WebGL キャンバスに描画するには、特別なセキュリティチェックが必要です。あなたたとえば、CORS が有効になっていないと、シーンとテクスチャを別のサーバーからロードすることはできません。

謝辞: フランスの Azure 技術者の 1 人である

に特別な感謝を表したいと思います。 Azure への移行を支援してくれたエバンジェリスト。

Azure Web サイトに移行し、オートスケーリングサービス

私たちが望むようにエンジンのコードと機能の作成にほとんどの時間を費やすため、配管工事に時間を無駄にしたくない。だからこそ、すぐに決めたのです IaaS アプローチではなく PaaS アプローチを選択してください。それに加えて、私たちは Visual Studio と Azure の統合が気に入っています。私はほとんど何でもできますお気に入りのIDE。 Babylon.js は GitHub でホストされていますが、Visual Studio 2013 を使用しています。 TypeScript と Visual Studio Online を使用してエンジンを作成します。あなたのメモとしてプロジェクトでは、Visual Studio Community と Azure の無料試用版を入手できます。 Azure への移行 5 分ほどかかりました:

管理ページに新しい Web サイトを作成しました: http://manage.windowsazure.com (これを行うことができます) これは VS 内にも当てはまります)。＃＃＃私はそれを取りましたソースコードリポジトリ内の正しい変更セットは以前のバージョンと一致します現在オンラインです。

右クリックします Visual Studio ソリューションエクスプローラーの Web プロジェクト。

今すぐ登場道具のすごいところ。 Microsoft を使用して VS にログインする場合アカウントは Azure サブスクリプションに関連付けられており、ウィザードでは [Web] を選択するだけで済みます。導入したいWebサイト。

「次、次、次のステップを実行して、数分後に記事の最後に「」を投稿してください。すべてのアセットとファイルがアップロードされると、Web サイトが稼働します。
＃＃＃について構成に関しては、優れた自動スケーリングサービスのメリットを活用したいと考えています。それこれは、以前の Hacker News シナリオに非常に役立ちます。

まず、あなたのインスタンスは、
Scale タブで Standard モードに設定されています。

そうすれば、次のことができます
自動的にスケーリングするインスタンスの数を選択します。ここで、 CPU ステータスとスケジュールされた時間。
この例では、最大 3 つの小さなインスタンス (1 コア、1.75 GB メモリ) を使用することを決定し、 CPU 使用率が 80% を超えると、新しいインスタンスが自動的に生成されます。私達はします CPU が 60% を下回った場合は、インスタンスを削除します。自動スケーリングのメカニズムは次のとおりです。私たちの場合は常にオンです。具体的なスケジュール時刻はまだ設定していません。

アイデアは次のとおりです。本当に
特定の期間内に必要な分だけお支払いください負荷。このコンセプトが気に入っています。これで対応できるようになりますこの Azure サービスを使用すると、以前のピークに到達するために何もする必要はありません。
紫色のチャートでオートズーム履歴をすぐに確認することもできます。私たちの例では、 Azure に移行して以来、今のところインスタンスを確認したことはありません。私たちは自動スケーリングで行き詰まるリスクを最小限に抑える方法は次のとおりです。
＃＃＃結論は Web サイトの設定では、
自動 gzip 圧縮を有効にします
特定の 3D エンジンリソース (.babylon および .babylonmeshdata) 書類）。これは、最大 3 倍の帯域幅を節約できるため、私たちにとって非常に重要です。したがって...価格です。このウェブサイトは IIS 上で実行されます。 IIS を構成するには、web.config に移動する必要があります。書類。この例では次の構成を使用します:
リーリー
このソリューションうまくいきました。シーンのロードに時間がかかっていることにも気づきました。これは、以前のコンソールからの削減です。のおかげだと思います Azure データセンターでは、より優れたインフラストラクチャとネットワークが使用されています。しかし、私は持っていますしばらくの間、Azure への移行を検討していました。私の最初の考えはそうではありませんでした Web サイトのインスタンスに私のアセットの束を提供させます。当初から、私はデザインにより適した BLOB ストレージにアセットを保存することに興味がありました。それ。また、可能な CDN シナリオも得られます。

2.
アセットを Azure BLOB に移動するストレージ、CORS 対応、Gzip サポート、CDN
＃＃＃主な理由この場合、BLOB ストレージを使用するのは、ネットワークの CPU への負荷を避けるためです。サービスを提供するサイトインスタンス。すべてが BLOB 経由で提供される場合一部の HTML、JavaScript、CSS ファイルに加えて、Web サイトインスタンスには次のファイルも保存されます。自動スケーリングの機会はほとんどありません。
しかし、これがきっかけとなりました 2 つの問題を解決する必要があります:
＃＃＃としてコンテンツは別のドメインでホストされるため、クロスドメインのセキュリティ問題。これを回避するには、
を行う必要があります。リモートドメイン
(Azure Blob Storage)。

Azure
1. 。私達と一緒にサイトの CPU 使用率を下げたくありませんが、その代わりに帯域幅の増加に対して 3 倍の料金を支払っているのです。
2. Blob Storage で CORS を有効にする
それならそうしますコンテナーで GET と正しいヘッダーのサポートを有効にしました。どうかを確認してくださいすべて期待通りに動作します。F12 開発者バーを開いて確認するだけです。コンソールログ: ＃＃＃＃＃＃＃＃＃＃＃＃ご覧のように、緑色のログラインは、すべてが正常に実行されていることを意味します。
これが 1 つです失敗する例。 BLOB からシーンをロードしようとするとローカルホスト (または他のドメイン) から直接保存すると、ログ内の次のエラー:

总而言之，如果您发现在“Access-Control-Allow-Origin”中找不到您的调用域标头后面带有“访问被拒绝”，这是因为您没有正确设置您的 CORS 规则。 控制自己的情绪非常重要 CORS 规则；否则，任何人都可以使用您的资产，从而您的带宽，花钱而不让你知道！

在 Blob 存储上启用 Gzip 支持

就像我一样之前告诉过您，Azure Blob 存储不支持自动 gzip 压缩。竞争对手的解决方案似乎也是如此 S3。您有两种选择来解决这个问题：
1. 上传前在客户端上对文件进行 Gzip 压缩自己上传，将其上传到 Blob 中使用经典工具进行存储并设置 content-encoding 标头到 gzip。此解决方案有效，但仅适用于支持 gzip 的浏览器（是还有一个浏览器不支持 gzip 吗？）。
2. 在客户端上自行对文件进行 Gzip 压缩，并在 blob 存储：一个使用默认 .extension，另一个使用.extension.gzip, 例如。在 IIS 端设置一个处理程序来捕获 HTTP 请求从客户端检查 accept-encoding 设置为 gzip 的标头，并根据此支持提供相应的文件。你会发现更多细节有关本文中要实现的代码：从 Azure CDN 提供 GZip 压缩内容。
就我们而言，我不知道有哪个浏览器支持 WebGL 而不是 gzip 压缩。所以如果浏览器不支持 gzip，没有真正的兴趣继续下去，因为这个可能意味着 WebGL 也不被支持。

因此我选择了第一个解决方案。因为我们没有很多场景，而且我们也没有每天生产一个新的，我目前正在使用这个手动过程：
1. 使用 7-zip，我正在压缩 .babylon 我的机器上的文件使用 gzip 编码并将“压缩级别”设置为“最快”。其他压缩级别似乎在我的测试中产生了问题。
2. 我使用适用于 Microsoft Azure 的 CloudBerry Explorer 上传文件云储存。
3. 我使用 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 targeted

string 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 场景/Espilit C:\Boulot\Babylon\Scenes\Espilit\*.babylon* 推送包含多个的场景文件（我们的增量场景包含多个 .babylonmeshdata 文件）。

或者简单地说：

UploadAndGzipFilesToAzureBlobStorage 场景/Espilit C:\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 に関するフィードバックとヒントを共有します。アクティベートする方法がわかりますウィキの Babylon.js: IndexedDB でのリソースのキャッシュ。
基本的に、あなたは
.babylon の名前と一致する .babylon.manifestファイルを作成するだけです。 [シーン] をクリックし、キャッシュする内容 (テクスチャや JSON シーン) を設定します。あれはそれ。 ＃＃＃例えば、 Hill Valley のデモシーンをご覧ください。初めてロードするとき、次のリクエストが送信されます:

#153 アイテムと 43.33 MB
を受信しました。ただし、babylonjs.com"
が追加のストレージ領域を使用することに同意した場合は、コンピュータ上で が 2 回目に読み込まれるときに表示されます。同じシーン:

#1 アイテムと 348 バイト！私たちはただマニフェストファイルが変更されていないか確認してください。そうでない場合は、すべてをロードしますデータベースから、
43 MB の帯域幅を節約できました。
＃＃＃例えば、この方法は、アサシンクリードパイレーツゲームで使用されています:
考えてみましょうそれ：＃＃＃
＃＃＃ゲーム
一度ロードするとすぐに開始されます
リソースがローカルデータベースから直接提供します。
ネットワークストレージへの負担が減り、使用する帯域幅も減り、支出も減ります。
- これで終わりですユーザーと上司を満足させましょう!
- Microsoft Edge
EdgeHTML レンダリングエンジン

を皆さんと共有できることを嬉しく思います。無料 Mac、iOS、Android、または Windows デバイスでの仮想マシンまたはリモートテスト @http://dev.modern.ie/。