Les raisons et le processus de migration de Babylon.js vers Azure

Vous travaillez Pour une start-up. Soudain, cette année de codage en dur a porté ses fruits : le succès À mesure que la taille et la demande des applications Web continuent de croître.

Dans ce tutoriel, je voudrais humblement utiliser l'une de nos récentes "success stories" Autour de notre framework de jeu open source WebGL Babylon.js et de son site internet. Nous sommes heureux de voir autant de réseaux Les développeurs de jeux essaient. Mais pour répondre à la demande, nous savions qu'il nous fallait un nouveau Solutions d'hébergement Web.

Bien que ce didacticiel se concentre sur Microsoft Azure, de nombreux Ces concepts s’appliquent à une variété de solutions qui pourraient vous intéresser. Nous examinerons également diverses optimisations que nous avons effectuées pour limiter autant que possible Il peut s'agir de la bande passante de sortie de nos serveurs vers votre navigateur.

Présentation

Babylon.js est un Nous travaillons sur un projet personnel depuis plus d'un an maintenant. Puisqu'il s'agit d'un projet personnel (c.-à-d. notre temps et notre argent), nous hébergeons le site web, les textures et les scènes 3D sur Solution d'hébergement relativement bon marché utilisant une petite machine Windows/IIS dédiée. Le projet a débuté en France mais a rapidement attiré un certain nombre d'acteurs 3D et Des experts en réseaux du monde entier ainsi que certains studios de jeux. nous sommes très heureux Retours de la communauté, mais le trafic est contrôlable !

Par exemple, entre Entre février 2014 et avril 2014, nous avons eu en moyenne plus de 7 000 utilisateurs par mois, soit une moyenne Plus de 16 000 pages vues par mois. Certains des événements dont nous avons parlé Généré quelques pics intéressants :

Mais L'expérience sur le site Web est encore assez bonne. Le chargement de la scène n'est pas encore terminé C'est incroyablement rapide, mais les utilisateurs ne se plaignent pas beaucoup.

Mais, Récemment, un gars sympa a décidé de partager notre travail sur Hacker News. Nous sommes vraiment heureux d'entendre de telles nouvelles ! Mais regardez ce qui est arrivé à la connexion du site :

Game overNotre petit serveur ! ça lentement J'ai arrêté de fonctionner et notre expérience utilisateur a été terrible. Serveur IIS Temps passé à traiter des ressources et des images statiques volumineuses et à utiliser le processeur Trop haut. Alors que nous déployons WebGL pour Assassin's Creed : Pirates Découvrez le projet exécuté sur Babylon.js, il est temps de passer à quelque chose de plus évolutif Hébergement professionnel avec solutions cloud.

Mais avant En passant en revue nos options d’hébergement, parlons brièvement de notre situation spécifique Moteur et site internet :

1. Tout sont statiques sur notre site Web. Nous n'avons actuellement aucun code côté serveur en cours d'exécution.
2. Nos scènes (fichiers .babylon JSON) et textures (.png ou .jpeg) Les fichiers peuvent être très volumineux (jusqu'à 100 Mo). Cela signifie que nous Besoin d'activer la compression gzip dans notre scène .babylon document. En effet, dans notre cas, les prix seront largement indexés Bande passante de sortie.
3. Dessiner dans un canevas WebGL nécessite des contrôles de sécurité spéciaux. toi Par exemple, nos scènes et textures ne peuvent pas être chargées depuis un autre serveur sans CORS activé.

Remerciements : Je tiens à remercier tout particulièrement Benjamin Talmard, l'un de nos techniciens Azure français Des évangélistes qui nous ont aidés à migrer vers Azure.

1. Migrez vers les sites Web Azure et Service de mise à l'échelle automatique

Comme nous le souhaitons Afin de passer la plupart de notre temps à écrire du code et des fonctionnalités pour notre moteur, nous Je ne veux pas perdre de temps en plomberie. C'est pourquoi nous avons décidé immédiatement Choisissez une approche PaaS plutôt qu’une approche IaaS.

De plus, nous J'adore l'intégration de Visual Studio avec Azure. je peux faire presque n'importe quoi EDI préféré. Même si Babylon.js est hébergé sur GitHub, nous utilisons Visual Studio 2013, TypeScript et Visual Studio Online pour écrire notre moteur. comme ta note projets, vous pouvez bénéficier d’essais gratuits de Visual Studio Community et d’Azure.

Migrer vers Azure Cela m'a pris environ cinq minutes :

1. J'ai créé un nouveau site web dans la page d'administration : http://manage.windowsazure.com (vous pouvez le faire Cela est également vrai au sein de VS).
2. Je l'ai pris L'ensemble de modifications correct dans notre référentiel de code source correspond à la version précédente Actuellement en ligne.
3. Je fais un clic droit Projet Web dans Visual Studio Solution Explorer.

Ici maintenant Ce qui est bien avec les outils. Lorsque je me connecte à VS à l'aide de Microsoft Le compte est lié à mon abonnement Azure et l'assistant me permet simplement de sélectionner Web Le site Web que je souhaite déployer.

Pas besoin Inquiétez-vous de l'authentification complexe, des chaînes de connexion ou de toute autre chose.

"Ensuite, ensuite, Passez à l'étape suivante et postez ", quelques minutes plus tard, à la fin de l'article Avec tous nos actifs et fichiers téléchargés, le site Web est opérationnel !

À propos En termes de configuration, nous souhaitons bénéficier du service de mise à l'échelle automatique. il Cela sera d’une grande aide pour notre précédent scénario Hacker News.

Tout d'abord, votre L'instance est configurée en mode Standard dans l'onglet Scale.

Ensuite, vous pouvez Sélectionnez le nombre d'instances que vous souhaitez mettre à l'échelle automatiquement, où État du processeur et heure planifiée.

Dans notre cas, nous avons Décidez d'utiliser jusqu'à trois petites instances (1 cœur, 1,75 Go de mémoire) et Si l'utilisation du processeur dépasse 80 %, une nouvelle instance est automatiquement générée. nous allons Si le processeur descend en dessous de 60 %, supprimez une instance. Le mécanisme de mise à l'échelle automatique est Toujours activé dans notre cas - nous n'avons pas encore défini d'heure programmée spécifique.

L'idée est Vraiment ne payez que ce dont vous avez besoin dans un délai précis charger. J'aime cette notion. Avec cela, nous pourrons gérer Avec ce service Azure, vous n’avez rien à faire pour atteindre votre précédent sommet !

Vous pouvez également consulter rapidement l'historique du zoom automatique via le graphique violet. Dans notre exemple, Depuis que nous sommes passés à Azure, nous n’avons jamais vérifié une instance jusqu’à présent. nous sommes Voici comment minimiser le risque de rester bloqué lors de la mise à l'échelle automatique.

Pour résumer Dans la configuration du site Web, nous souhaitons activer la compression gzip automatique Sur nos ressources spécifiques au moteur 3D (.babylon 和 .babylonmeshdata document). C'est crucial pour nous car cela permet d'économiser jusqu'à 3 fois la bande passante et D'où... le prix.

Le site Internet est Fonctionnant sur IIS. Pour configurer IIS, vous devez accéder à web.config document. Nous utilisons la configuration suivante dans cet exemple :

<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>

Cette solution Fonctionne très bien, on a même remarqué que le temps de chargement de la scène a été Il s'agit d'une réduction par rapport à notre précédente console. Je suppose que c'est grâce à Les centres de données Azure utilisent une meilleure infrastructure et un meilleur réseau.

Mais j'ai Je pensais passer à Azure depuis un certain temps. Ma première pensée n'était pas Avoir une instance de site Web au service d'un certain nombre de mes actifs. Dès le début, j'étais plus intéressé par le stockage de mes actifs dans un stockage blob qui était plus adapté au design. Que. Cela nous donnera également un scénario CDN possible.

2. Déplacer les actifs vers Azure Blob Stockage, CORS activé, prise en charge de Gzip et CDN

Raison principale Utiliser le stockage blob dans notre cas, c'est éviter de charger le CPU de notre réseau L'instance de site qui les sert. Si tout est servi via blob En plus de certains fichiers HTML, JavaScript et CSS, notre instance de site Web stockera également Il existe peu de possibilités de mise à l’échelle automatique.

Mais cela a déclenché Deux problèmes doivent être résolus :

1. comme Le contenu sera hébergé sur un autre domaine et nous serons coincés avec Problèmes de sécurité inter-domaines. Pour éviter cela, vous devez Domaine distant (Azure Blob Storage).
2. Azure Le stockage Blob ne prend pas en charge la compression gzip automatique. avec nous Je ne veux pas réduire l'utilisation du processeur sur le site, mais en échange, nous payons trois fois le prix pour une bande passante accrue !

Activer CORS sur le stockage Blob

CORS sur blob Le stockage est pris en charge depuis plusieurs mois. Cet article, « Windows Azure Storage : Introduction à CORS », explique comment utiliser l'API Azure pour Configurez CORS. Dans mon cas, je ne veux pas écrire une petite application pour faire ça. J'ai Trouvez-en un déjà écrit en ligne : Cynapta Azure CORS Helper – Outil gratuit Gérez les règles CORS pour le stockage Blob Windows Azure.

Alors je le ferai Activation de la prise en charge de GET et des en-têtes corrects sur mon conteneur. Vérifiez si Tout fonctionne comme prévu, ouvrez simplement la barre de développement F12 et vérifiez Journal de la console :

Comme vous pouvez le constater, Les lignes de journal vertes signifient que tout fonctionne bien.

En voici un Exemple de cas où cela échouera. Si vous essayez de charger notre scène depuis notre blob Stockez directement depuis localhost (ou tout autre domaine) et vous obtiendrez Ces erreurs dans les logs :

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

在 Blob 存储上启用 Gzip 支持

就像我一样 之前告诉过您，Azure Blob 存储不支持自动 gzip 压缩。竞争对手的解决方案似乎也是如此 S3。您有两种选择来解决这个问题：

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);

}