Sebab dan proses untuk memindahkan Babylon.js ke Azure

Anda sedang bekerja Untuk syarikat permulaan. Tiba-tiba, tahun pengekodan keras itu membuahkan hasil - kejayaan Apabila aplikasi web terus berkembang dari segi saiz dan permintaan.

Dalam ini tutorial, saya dengan rendah hati ingin menggunakan salah satu "kisah kejayaan" terbaru kami Sekitar rangka kerja permainan sumber terbuka WebGL kami Babylon.js dan tapak webnya. Kami gembira melihat begitu banyak rangkaian Pembangun permainan mencubanya. Tetapi untuk memenuhi permintaan, kami tahu kami memerlukan yang baharu Penyelesaian Pengehosan Web.

Walaupun tutorial ini memfokuskan pada Microsoft Azure, kebanyakannya Konsep ini digunakan untuk pelbagai penyelesaian yang anda mungkin suka. Kami juga akan melihat pelbagai pengoptimuman yang kami lakukan untuk mengehadkan sebanyak mungkin Ia mungkin jalur lebar keluaran daripada pelayan kami ke penyemak imbas anda.

Pengenalan

Babylon.js ialah a Kami telah mengusahakan projek peribadi selama lebih setahun sekarang. Memandangkan ini adalah projek peribadi (iaitu. masa dan wang kami), kami mengehoskan tapak web, tekstur dan adegan 3D Penyelesaian pengehosan yang agak murah menggunakan mesin Windows/IIS khusus yang kecil. Projek ini bermula di Perancis tetapi dengan cepat menarik sejumlah 3D dan Pakar rangkaian di seluruh dunia serta beberapa studio permainan. kami sangat gembira Maklum balas daripada komuniti, tetapi trafik boleh dikawal!

Sebagai contoh, antara Antara Februari 2014 dan April 2014, kami mempunyai purata lebih 7,000 pengguna sebulan, secara purata Lebih 16K halaman dilihat setiap bulan. Beberapa peristiwa yang telah kami bincangkan Menghasilkan beberapa puncak menarik:

Tetapi Pengalaman di laman web masih cukup baik. Pemuatan adegan belum selesai lagi Ia sangat pantas, tetapi pengguna tidak banyak merungut.

Tetapi, Baru-baru ini, seorang lelaki hebat memutuskan untuk berkongsi kerja kami di Berita Hacker. Kami sangat gembira mendengar berita sebegitu! Tetapi lihat apa yang berlaku kepada sambungan tapak web:

Game tamatPelayan kecil kami! ia perlahan-lahan Berhenti bekerja dan pengalaman pengguna kami amat teruk. pelayan IIS Masa yang dihabiskan untuk memproses aset dan imej statik yang besar, serta penggunaan CPU Terlalu tinggi. Semasa kami melancarkan WebGL untuk Assassin's Creed: Pirates Alami projek yang dijalankan di Babylon.js, sudah tiba masanya untuk beralih kepada sesuatu yang lebih berskala Pengehosan profesional dengan penyelesaian awan.

Tetapi sebelum ini Mengkaji pilihan pengehosan kami, mari bercakap secara ringkas tentang situasi khusus kami Enjin dan laman web:

1. Semuanya adalah statik di laman web kami. Pada masa ini kami tidak mempunyai sebarang kod sisi pelayan berlari.
2. Adegan kami (fail .babylon JSON) dan tekstur (.png atau .jpeg) Fail boleh menjadi sangat besar (sehingga 100 MB). Ini bermakna kita secara mutlak Perlu mengaktifkan pemampatan gzip dalam adegan .babylon kami dokumen. Malah, dalam kes kami, harga akan diindeks ke tahap yang besar Jalur lebar keluaran.
3. Melukis ke dalam kanvas WebGL memerlukan pemeriksaan keselamatan khas. awak Sebagai contoh, adegan dan tekstur kami tidak boleh dimuatkan dari pelayan lain tanpa CORS didayakan.

Penghargaan: Saya ingin mengucapkan terima kasih khas kepada Benjamin Talmard, salah seorang juruteknik Azure Perancis kami Penginjil yang membantu kami berpindah ke Azure.

1. Berhijrah ke Laman Web Azure dan Perkhidmatan penskalaan automatik

Seperti yang kita mahu Untuk menghabiskan sebahagian besar masa kami menulis kod dan fungsi untuk enjin kami, kami Tidak mahu membuang masa untuk memasang paip. Itulah sebabnya kami membuat keputusan segera Pilih pendekatan PaaS berbanding pendekatan IaaS.

Selain itu, kami Sukakan integrasi Visual Studio dengan Azure. saya boleh melakukan hampir apa sahaja IDE kegemaran. Walaupun Babylon.js dihoskan pada GitHub, kami menggunakan Visual Studio 2013, TypeScript dan Visual Studio Online untuk menulis enjin kami. sebagai nota anda projek, anda boleh mendapatkan percubaan percuma Komuniti Visual Studio dan Azure.

Berhijrah ke Azure Saya mengambil masa kira-kira lima minit:

1. Saya mencipta tapak web baharu dalam halaman pentadbir: http://manage.windowsazure.com (anda boleh melakukan ini Ini juga benar dalam VS).
2. Saya ambil Set perubahan yang betul dalam repositori kod sumber kami sepadan dengan versi sebelumnya Pada masa ini dalam talian.
3. Saya klik kanan Projek web dalam Visual Studio Solution Explorer.

Di sini sekarang Perkara yang hebat tentang alat. Apabila saya log masuk ke VS menggunakan Microsoft Akaun itu terikat dengan langganan Azure saya dan wizard membenarkan saya memilih Web sahaja Laman web yang saya ingin gunakan.

Tidak perlu Bimbang tentang pengesahan rumit, rentetan sambungan atau apa-apa lagi.

"Seterusnya, seterusnya, Ambil langkah seterusnya dan siarkan ”, beberapa minit kemudian, di penghujung artikel Dengan semua aset dan fail kami dimuat naik, tapak web ini telah tersedia dan berjalan!

Mengenai Dari segi konfigurasi, kami ingin mendapat manfaat daripada perkhidmatan penskalaan automatik yang hebat. ia Ia akan sangat membantu senario Berita Hacker kami sebelum ini.

Pertama, anda Contoh dikonfigurasikan dalam mod Standard dalam tab Skala.

Kalau begitu, boleh Pilih bilangan tika yang ingin anda skalakan secara automatik, di mana Status CPU dan masa yang dijadualkan.

Dalam kes kami, kami ada Tentukan untuk menggunakan sehingga tiga kejadian kecil (1 teras, memori 1.75 GB) dan Jika penggunaan CPU melebihi 80%, kejadian baharu akan muncul secara automatik. kita akan Jika CPU turun di bawah 60%, alih keluar contoh. Mekanisme autoscaling ialah Sentiasa hidup dalam kes kami - kami belum menetapkan masa yang dijadualkan khusus lagi.

Ideanya ialah Sesungguhnya hanya bayar untuk apa yang anda perlukan dalam jangka masa tertentu memuatkan. Saya suka konsep ini. Dengan ini, kita akan dapat menangani Dengan perkhidmatan Azure ini, anda tidak perlu melakukan apa-apa untuk mencapai kemuncak sebelumnya!

Anda juga boleh melihat sejarah autozoom dengan cepat melalui carta ungu. Dalam contoh kita, Sejak kami berpindah ke Azure, kami tidak pernah menyemak contoh setakat ini. kami Berikut ialah cara untuk meminimumkan risiko tersekat pada autoscaling.

Untuk meringkaskan Dalam konfigurasi tapak web kami ingin mendayakan pemampatan gzip automatik Mengenai sumber enjin 3D khusus kami (.babylon 和 .babylonmeshdata dokumen). Ini penting bagi kami kerana ia menjimatkan sehingga 3x lebar jalur dan Oleh itu...harganya.

Laman webnya ialah Berjalan pada IIS. Untuk mengkonfigurasi IIS anda perlu pergi ke web.config dokumen. Kami menggunakan konfigurasi berikut dalam contoh ini:

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

Penyelesaian ini Berfungsi dengan baik, kami juga menyedari bahawa masa untuk memuatkan adegan itu telah tiba Ini adalah pengurangan daripada konsol kami sebelum ini. Saya rasa ia adalah terima kasih kepada Pusat data Azure menggunakan infrastruktur dan rangkaian yang lebih baik.

Tetapi, saya ada Sudah lama berfikir tentang berpindah ke Azure. Fikiran pertama saya tidak Minta contoh tapak web menyediakan sekumpulan aset saya. Dari awal, saya lebih berminat untuk menyimpan aset saya dalam simpanan blob yang lebih sesuai untuk reka bentuk Itu. Ia juga akan memberi kita kemungkinan senario CDN.

2. Alihkan aset ke Azure Blob Storan, CORS didayakan, sokongan Gzip dan CDN

Sebab utama Menggunakan storan gumpalan dalam kes kami adalah untuk mengelakkan memuatkan CPU rangkaian kami Contoh tapak yang melayani mereka. Jika semuanya dihidangkan melalui blob Selain beberapa fail HTML, JavaScript dan CSS, tika tapak web kami juga akan disimpan Terdapat sedikit peluang untuk penskalaan automatik.

Tetapi ini mencetuskan Dua masalah perlu diselesaikan:

1. sebagai Kandungan akan dihoskan pada domain lain dan kami akan terperangkap dengannya Isu keselamatan merentas domain. Untuk mengelakkan perkara ini, anda perlu Domain jauh (Storan Azure Blob).
2. Azure Storan gumpalan tidak menyokong pemampatan gzip automatik. bersama kami Tidak mahu mengurangkan penggunaan tapak CPU, tetapi sebagai pertukaran kami membayar tiga kali ganda harga untuk jalur lebar yang meningkat!

Dayakan CORS pada storan Blob

CORS pada gumpalan Storan telah disokong selama beberapa bulan. Artikel ini, "Penyimpanan Windows Azure: Pengenalan kepada CORS," menerangkan cara menggunakan API Azure untuk Konfigurasikan CORS. Dalam kes saya, saya tidak mahu menulis aplikasi kecil untuk melakukan ini. saya ada Cari satu yang sudah ditulis dalam talian: Cynapta Azure CORS Helper – Alat Percuma Urus peraturan CORS untuk storan Windows Azure Blob.

Kalau begitu saya akan Mendayakan sokongan untuk GET dan pengepala yang betul pada bekas saya. Semak jika Semuanya berfungsi seperti yang diharapkan, cuma buka bar pembangun F12 dan semak Log konsol:

Seperti yang anda lihat, Garis log hijau bermakna semuanya berjalan lancar.

Ini adalah satu Contoh kes di mana ia akan gagal. Jika anda cuba memuatkan adegan kami dari gumpalan kami Simpan terus dari localhost (atau mana-mana domain lain) dan anda akan dapat Ralat ini dalam log:

总而言之， 如果您发现在“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);

}