Découvrez comment fonctionne Edgegap

Découvrez comment fonctionne Edgegap

/

Unity WebGL

Unity WebGL

Déployer sur Edgegap

Publié

Publié

Publié

dernière vérification de l'exactitude

dernière vérification de l'exactitude

dernière vérification de l'exactitude

Unity WebGL : Comment héberger des jeux multijoueurs par navigateur sur des serveurs dédiés et ajouter le Matchmaking

Unity WebGL : Comment héberger des jeux multijoueurs par navigateur sur des serveurs dédiés et ajouter le Matchmaking

Ce guide vous montre comment héberger un jeu multijoueur conçu avec Unity pour navigateur (WebGL) sur les serveurs de jeu dédiés d'Edgegap, puis y ajouter du matchmaking afin que les joueurs soient automatiquement regroupés et connectés à un serveur proche d'eux, et enfin le publier sur itch.io.

Une fois votre serveur de jeu conteneurisé, Edgegap le déploie dans le monde entier sur plus de 615 emplacements Edge Cloud (à la demande) à partir d'un simple appel API, avec une facturation basée exclusivement sur l'utilisation : aucun serveur entier à louer, approvisionner ou maintenir actif entre les matchs. Pour les serveurs persistants à capacité réservée, Edgegap propose les Private Fleets. Le Matchmaking d'Edgegap s'appuie sur cette infrastructure et reste optionnel.

Les jeux par navigateur présentent une différence majeure par rapport aux jeux de bureau : les navigateurs ne peuvent pas ouvrir de connexions UDP. Votre jeu communique avec son serveur via WebSockets, et une page servie via https:// ne peut utiliser que des WebSockets sécurisés (wss://). La fonctionnalité TLS Upgrade d'Edgegap attribue à chaque serveur un point de terminaison WebSocket sécurisé, vous évitant ainsi d'acheter ou de renouveler un certificat.

Ce guide couvre :

  1. La préparation d'Unity, de votre netcode, de votre compte Edgegap et d'un outil de conteneurisation

  2. La connexion de votre agent de programmation à Edgegap (optionnel)

  3. La préparation de votre jeu pour le navigateur et les serveurs dédiés

  4. La compilation et la conteneurisation de votre serveur de jeu

  5. Le déploiement d'un serveur de test et la connexion à celui-ci

  6. L'ajout du matchmaking (optionnel)

  7. La compilation du client WebGL et sa publication sur itch.io

  8. Le test de la boucle complète dans deux onglets de navigateur

Vous pouvez procéder de deux manières différentes, ou les combiner :

  • Avec un agent de programmation. Connectez Claude Code, Cursor ou un autre agent au serveur MCP Edgegap et à ses compétences d'agent. L'agent modifie votre projet, compile et conteneurise le serveur, le déploie et rédige le code de matchmaking. Vous vous chargez des actions dans Unity, le tableau de bord Edgegap et itch.io, ainsi que des tests de jeu.

  • Manuellement. Chaque étape ci-dessous fonctionne également sans agent.

Nous utilisons l'exemple Mirror WebGL d'Edgegap, basé sur l'exemple Tanks de Mirror et Unity 6.3 LTS. Tout jeu Unity utilisant un transport WebSocket fonctionne de la même manière.

Aucune carte de crédit requise. L'offre gratuite inclut les ressources nécessaires pour déployer un véritable serveur de jeu.

Aucune carte de crédit requise. L'offre gratuite inclut les ressources nécessaires pour déployer un véritable serveur de jeu.

Guide étape par étape

Étapes d'intégration détaillées

1. Avant de commencer

  • Un compte Edgegap gratuit. Vérifiez votre adresse e-mail. Aucune carte de crédit n'est requise pour tester.

  • Le moteur Unity avec les modules de compilation Linux et Web installés. Edgegap recommande une version LTS.

    • Ajoutez ces modules depuis Unity Hub : Linux Build Support (Mono), Linux Build Support (IL2CPP), Linux Dedicated Server Build Support et Web Build Support. Redémarrez Unity après les avoir ajoutés.

    • L'exemple utilise Unity 6.3 LTS. Sous Windows, Unity 6 peut également demander le package de la chaîne d'outils Linux (com.unity.toolchain.win-x86_64-linux) lors de votre première compilation pour Linux.

  • Un netcode avec un transport WebSocket, fonctionnant sur localhost. Nous recommandons Mirror et son SimpleWebTransport : sa voie WebGL est vérifiée de bout en bout avec le matchmaker d'Edgegap. Pour commencer à partir de notre exemple, téléchargez ou clonez le Mirror WebGL sample.

  • Un outil de conteneurisation en cours d'exécution. Nous recommandons Docker Desktop, installé et en cours d'exécution pendant la compilation.

  • Pour la méthode avec agent : un jeton d'API Edgegap, accessible depuis Tableau de bord → Paramètres utilisateur → Jetons. Il s'applique à l'ensemble de l'organisation, traitez-le donc comme un mot de passe : ne l'insérez jamais dans votre projet, votre client de jeu ou une messagerie.

Git : Unity nécessite un client Git (version 2.14.0 ou plus récente) dans votre variable PATH pour installer des packages à partir d'une URL Git, comme le SDK Edgegap. macOS en intègre généralement déjà un (Outils de ligne de commande Xcode) ; sous Windows, installez Git.

2. Connectez votre agent de codage à Edgegap

Ignorez cette étape si vous faites tout manuellement.

Le serveur MCP Edgegap permet à votre agent de créer des applications et des versions, de déployer des serveurs, de lire des journaux et de générer des configurations de matchmaker sur votre compte. Les compétences de l'agent lui confèrent le flux de travail Unity éprouvé, y compris WebGL, les modèles C#, le Dockerfile et les pièges connus.

Claude Code (exécutez dans votre propre terminal, afin que le jeton ne passe jamais par le chat) :

claude mcp add --transport http edgegap https://mcp.edgegap.dev/mcp -H "Authorization: token YOUR_EDGEGAP_API_TOKEN" --scope user

Installez ensuite les compétences : /plugin marketplace add edgegap/edgegap-agent-skills, puis /plugin install edgegap@edgegap. Redémarrez la session.

Cursor, VS Code et autres clients qui envoient des en-têtes : ajoutez https://mcp.edgegap.dev/mcp avec l'en-tête Authorization: token YOUR_EDGEGAP_API_TOKEN, et installez les compétences avec npx skills add edgegap/edgegap-agent-skills --skill "*".

Claude Desktop : les connecteurs personnalisés ne peuvent pas envoyer l'en-tête, utilisez donc le serveur local à la place (Node 18+) : { "mcpServers": { "edgegap": { "command": "npx", "args": ["-y", "@edgegap/mcp"] } } }. Il demandera le jeton lors de la première utilisation.

Vérifiez que cela fonctionne :

« Liste mes applications Edgegap. »

Une liste vide est normale. Une erreur concernant le jeton signifie généralement que l'en-tête indique token token ....

3. Préparez votre jeu pour le navigateur et les serveurs dédiés

Sur Edgegap, aucun joueur n'héberge le match. Un serveur dédié sans interface graphique (headless) gère la partie, démarre de lui-même, écoute sur un port fixe et s'arrête lorsque le match est terminé. Pour un jeu sur navigateur, ce port communique via WebSockets.

Comment fonctionne la connexion :

  • Le serveur utilise des WebSockets standards (ws) sur un port fixe, 7778 pour le SimpleWebTransport de Mirror. Il n'a besoin d'aucun certificat : laissez le SSL désactivé sur le serveur.

  • La fonctionnalité TLS Upgrade d'Edgegap ajoute la couche sécurisée en amont, avec un certificat pour le nom d'hôte du serveur.

  • Le client se connecte en wss:// au nom d'hôte du déploiement (et non à son adresse IP, sinon la vérification du certificat échouera) et à son port externe.

Avec votre agent :

« Charge la compétence edgegap-unity et transforme ce projet en un jeu WebGL avec serveur dédié : SimpleWebTransport sur le port 7778 avec SSL désactivé sur le serveur et wss sur le client, les builds serveur démarrent en headless sur 0.0.0.0, les joueurs apparaissent lorsque les clients se connectent, et le serveur s'arrête automatiquement à la fin du match. Installe le SDK Edgegap 3.5.5, ajoute les scripts de cycle de vie du serveur et de client de Matchmaking avec l'adaptateur Mirror et link.xml. Ensuite, vérifie que cela fonctionne toujours localement avec un serveur et un client. »

Manuellement, sur Mirror :

  1. Sur votre NetworkManager, remplacez KCP Transport par Simple Web Transport, port 7778. Réglez Headless Start Mode sur Auto Start Server.

  2. Installez le SDK Edgegap : dans Window → Package Manager, sélectionnez +, puis Add package from git URL, et collez https://github.com/edgegap/edgegap-unity-sdk.git#3.5.5. La version 3.5.5 ou supérieure est requise : les versions plus anciennes font échouer la compilation WebGL.

  3. Conservez les classes de données du SDK dans les builds IL2CPP à l'aide d'un fichier link.xml (l'exemple en contient un dans Assets/EdgegapMatchmaking).

  4. Dans les builds serveur, démarrez le serveur, jamais un hôte, et faites apparaître les joueurs lorsque les clients se connectent. Définissez Application.targetFrameRate (30 à 60) sur le serveur, sinon le build headless fera tourner un cœur de processeur à 100 %.

Autres netcodes : le transport Bayou de Fish-Networking fonctionne de la même manière (voir Fish-Networking). Netcode for GameObjects peut utiliser Unity Transport avec WebSockets, mais cette méthode n'est pas encore vérifiée sur Edgegap : testez-la au plus tôt.

Testez d'abord localement : une instance de l'Éditeur comme serveur, une autre comme client. Ne conteneurisez pas un jeu qui ne fonctionne pas sur localhost.

4. Construisez et conteneurisez votre serveur

Edgegap exécute la version de votre serveur Linux dans un conteneur. Utilisez l'une ou l'autre des options, ou les deux.

Option A : Le plugin de l'outil de build automatisé de serveur de jeu d'Edgegap pour Unity.

  1. Dans Window → Package Manager, sélectionnez +, puis Add package from git URL, et collez https://github.com/edgegap/edgegap-unity-plugin.git. Si votre version de Mirror inclut déjà le plugin (Assets/Mirror/Hosting/Edgegap), ignorez cette étape : l'installer deux fois duplique ses scripts.

  2. Ouvrez Tools → Edgegap Server Hosting, connectez-vous, et collez le jeton obtenu sous Connect your Edgegap Account. Sélectionnez Validate Token.

  3. Sélectionnez Build Server, puis, avec Docker en cours d'exécution, Validate et Containerize with Docker.

  4. Sélectionnez Upload Image and Create App Version. Dans le navigateur, configurez le port : 7778, protocole WS, nom gameport, et activez TLS Upgrade. Le plugin pré-remplit 7770/UDP nommé « Game Port » : modifiez ces trois éléments. Soumettez.

Option B : demandez à votre agent.

« Construis le serveur dédié Linux, conteneurise-le avec le Dockerfile edgegap-unity pour linux/amd64, pousse-le vers mon Edgegap Container Registry avec un nouveau tag, puis crée l'application et la version de l'application avec le port 7778, le protocole WS, nommé gameport, avec TLS Upgrade activé. »

L'agent vous demande d'exécuter vous-même docker login registry.edgegap.com, avec le nom d'utilisateur et le jeton provenant de la page Container Registry, afin que ces identifiants restent hors de la discussion. Assurez-vous que la version de l'application a bien les identifiants du registre configurés : sans eux, les déploiements échouent avec l'erreur « Unable to pull image from registry ».

Utilisez un nouveau tag d'image pour chaque build, jamais latest.

5. Déployez un serveur de test et connectez-vous

Démarrez un serveur manuellement pour vérifier que l'image, le port et la mise à niveau TLS (TLS Upgrade) fonctionnent avant d'ajouter le matchmaking. N'importe laquelle de ces méthodes convient :

  • Depuis le plugin : choisissez votre application et votre version, puis sélectionnez Deploy to Cloud.

  • Depuis le tableau de bord : ouvrez la version de votre application dans le tableau de bord Edgegap, sélectionnez Deploy, choisissez un emplacement proche de vous et déployez.

  • Depuis votre agent : « Déploie ma dernière version Edgegap près de chez moi, attends qu'elle soit prête, vérifie que le port WebSocket répond par HTTP 101, affiche les journaux et donne-moi le nom d'hôte ainsi que le port externe. »

Lorsque le déploiement est Ready (Prêt), copiez son Host URL et son External Port. Dans le NetworkManager de votre client, définissez Network Address sur l'Host URL, configurez le client de Simple Web Transport pour utiliser wss sur cet External Port, puis appuyez sur Play et sélectionnez Client. Le port externe change à chaque déploiement, vous devez donc le relever à chaque fois.

Si les journaux du serveur indiquent First bytes from client was not 'GET' for handshake, instead was 16-03-01, la mise à niveau TLS est désactivée sur le port : activez-la dans une nouvelle version de l'application.

Arrêtez le déploiement lorsque vous avez terminé (Stop Last Deployment dans le plugin, ou demandez à votre agent). La formule gratuite n'exécute qu'un seul déploiement à la fois, et un serveur de test oublié bloque le matchmaking.

6. Ajouter le matchmaking

Le matchmaker d'Edgegap est un service hébergé : les joueurs envoient un ticket, il les regroupe selon vos règles (taille du match, équipes, niveau, mode), déploie votre serveur à proximité d'eux et renvoie l'adresse à chaque client.

Deux règles pour les jeux par navigateur :

  • Aucune règle de latence. Les navigateurs ne peuvent pas envoyer les pings de latence utilisés par les jeux de bureau. Le matchmaker positionne le serveur en fonction de l'emplacement des joueurs à la place.

  • Indiquez vos origines. Indiquez chaque adresse web qui dessert votre jeu dans allowed_cors_origins, sinon le navigateur bloque les réponses du matchmaker. Pour les tests locaux et itch.io : http://localhost:8080, https://YOUR-NAME.itch.io et https://html-classic.itch.zone.

Avec votre agent :

« Génère une configuration de matchmaker Edgegap pour la version de mon application WebGL : une équipe de 2 à 4 joueurs, aucune règle de latence, un joueur seul obtient un serveur après 30 secondes, et ces origines autorisées : http://localhost:8080, https://YOUR-NAME.itch.io, https://html-classic.itch.zone. Enregistre-la sous matchmaker-config.json. »

L'exemple comprend également un fichier matchmaker-config.json prêt à être modifié : définissez application.name et application.version selon la version de votre application.

Ensuite, dans le tableau de bord (cette étape ne dispose pas d'API) :

  1. Ouvrez Matchmaker et sélectionnez Create Matchmaker.

  2. Nommez-le, téléversez matchmaker-config.json et sélectionnez Create and Start.

  3. Lorsqu'il est ONLINE, copiez l'API URL et l'Auth Token. L'Auth Token peut être intégré en toute sécurité dans votre client de jeu : il ne donne aucun accès à votre compte Edgegap.

De retour dans Unity : dans l'exemple, activez l'objet EdgegapMatchmaking dans la scène MirrorTanks, puis définissez Base URL et Auth Token sur TanksMatchmakingClient. Ou demandez à votre agent : « Mets l'URL de l'API du matchmaker et l'Auth Token sur le client de matchmaking en désactivant les balises de latence, relie mon bouton Play à FindMatch, puis reconstruis et déploie le serveur et crée une nouvelle version d'application. »

Lorsque vous publiez un nouveau build de serveur, mettez à jour application.version dans la configuration du matchmaker (Stop, Edit, Start), sinon les matchs continueront à déployer l'ancien build.

7. Créez le client WebGL et publiez-le sur itch.io

  1. Dans Player Settings → Publishing Settings, définissez Compression Format sur Gzip et activez Decompression Fallback, afin que le build se charge sur des hébergeurs comme itch.io.

  2. Dans File → Build Profiles, sélectionnez Web, puis Build. Ou demandez à votre agent d'exécuter le build du client WebGL du skill.

  3. Pour tester localement, servez le dossier du build depuis une origine autorisée, par exemple python -m http.server 8080 --bind 127.0.0.1, et ouvrez http://localhost:8080.

  4. Pour publier, compressez le dossier du build en zip. Sur itch.io, sélectionnez Upload new project, définissez Kind of project sur HTML, téléversez le zip et cochez This file will be played in the browser. Enregistrez, puis ouvrez la page.

Les origines de votre page itch.io doivent figurer dans allowed_cors_origins du matchmaker (étape 6).

8. Testez la boucle complète dans deux onglets de votre navigateur

  1. Assurez-vous qu'aucun déploiement de test n'est toujours en cours d'exécution.

  2. Ouvrez votre jeu dans deux onglets ou fenêtres de navigateur, localement ou sur itch.io. Mettez chacun au premier plan avant de cliquer : les onglets en arrière-plan ralentissent Unity WebGL.

  3. Sélectionnez Find Match dans les deux. Le statut passe de la recherche à la partie trouvée, puis à l'hôte assigné, après quoi les deux onglets se connectent au même serveur.

  4. Quittez la partie. Le serveur de l'échantillon arrête son déploiement 30 secondes après le départ du dernier joueur, ou après 2 minutes si personne ne rejoint. Cet arrêt automatique est ce qui maintient votre facture à zéro lorsque personne ne joue.

Sur le forfait gratuit, le système de matchmaking s'arrête 3 heures après chaque démarrage (redémarrez-le depuis le tableau de bord), les déploiements s'arrêtent après 60 minutes, et un seul déploiement s'exécute à la fois.

Étapes suivantes

Étapes suivantes

Vous développez également pour ordinateur de bureau ou mobile ? Consultez Unity Engine et Mirror. Un autre jeu sur navigateur ? Consultez Godot Engine pour l'exportation web de Godot, ou Manus AI pour les jeux conçus avec Manus.

Vous passez en production ? Demandez à votre agent d'exécuter la liste de contrôle de la compétence edgegap-launch : déploiements de versions, politique de redémarrage, durée maximale, contrôle des coûts.

Bloqué ? Demandez à votre agent de charger edgegap-troubleshoot, ou posez vos questions à notre équipe et à d'autres studios sur le Discord d'Edgegap.

Questions Fréquemment Posées

Questions fréquentes sur l'hébergement d'un jeu multijoueur Unity WebGL sur les serveurs dédiés d'Edgegap.

Un jeu Unity WebGL peut-il se connecter à un serveur dédié ?

Oui, via WebSockets. Les navigateurs ne peuvent pas ouvrir de connexions UDP, utilisez donc un transport WebSocket tel que SimpleWebTransport de Mirror. Le serveur s'exécute en tant que build de serveur dédié Linux, et le navigateur s'y connecte avec wss://.

Ai-je besoin d'un certificat SSL pour mon serveur de jeu ?

Non. Activez la mise à niveau TLS sur le port WebSocket du serveur : Edgegap gère le certificat pour le nom d'hôte du serveur. Votre serveur exécute des WebSockets standard, et les clients se connectent avec wss:// au nom d'hôte.

Pourquoi mon jeu WebGL ne parvient-il pas à joindre le système de matchmaking ?

Le navigateur bloque les requêtes provenant d'origines que le matchmaker n'autorise pas. Ajoutez chaque adresse qui héberge votre jeu, telle que http://localhost:8080 et votre page itch.io, à allowed_cors_origins dans la configuration du matchmaker.

Quel netcode fonctionne le mieux pour le multijoueur sur Unity WebGL ?

Mirror avec SimpleWebTransport est la solution vérifiée de bout en bout avec le matchmaker d'Edgegap, et l'exemple d'Edgegap l'utilise. Le transport Bayou de Fish-Networking fonctionne également. Netcode for GameObjects peut utiliser les WebSockets, mais testez-le tôt.

Puis-je héberger un jeu multijoueur sur itch.io ?

itch.io héberge la page web de votre jeu, pas son serveur. Publiez la version WebGL sur itch.io et exécutez le serveur dédié sur Edgegap ; les joueurs se connectent depuis la page avec wss://. Les tests sur Edgegap sont gratuits, sans carte de crédit.

Clients

Découvrez les témoignages de clients qui ont intégré Edgegap

31 études de cas sont disponibles auprès de studios ayant migré d'une autre plateforme vers Edgegap.

Principales raisons pour lesquelles ils ont choisi Edgegap

Découvrez l’impact de l’orchestration automatisée des serveurs de jeu d’Edgegap pour une expérience multijoueur impeccable.

Coût

Prix

Optimisez les coûts et les performances grâce à l'orchestration hybride

Optimisez les coûts et les performances grâce à l'orchestration hybride

Optimisez les coûts et les performances grâce à l'orchestration hybride

Cloud de périphérie

À la demande

0,00115 $

/ vCPU

/ MINUTE

Facturé à la minute, uniquement à l'utilisation

Payez quand les joueurs jouent. 0 serveur actif = 0 $

Déployez des serveurs de jeu dans le monde entier, par instance, dans plus de 615 emplacements edge cloud. Sans engagement.

Ajoutez simplement une carte de crédit.

Cloud de périphérie

À la demande

0,00115 $

/ vCPU

/ MINUTE

Facturé à la minute, uniquement à l'utilisation

Payez quand les joueurs jouent. 0 serveur actif = 0 $

Déployez des serveurs de jeu dans le monde entier, par instance, dans plus de 615 emplacements edge cloud. Sans engagement.

Ajoutez simplement une carte de crédit.

Private Fleet (Bare Metal)

Capacité réservée

0,0282 $

/ vCPU

/ HEURE

Facturé mensuellement, toujours actif

280 $ par hôte/mois (tarif sur 12 mois), ou 350 $ par mois

Optimisez la rentabilité de votre serveur de jeu grâce à l'hébergement sans frais de transfert de données sortantes (egress-free) des flottes privées (Private Fleets).

Permanent, disponible 24h/24 et 7j/7, exclusif à votre studio.

Private Fleet (Bare Metal)

Capacité réservée

0,0282 $

/ vCPU

/ HEURE

Facturé mensuellement, toujours actif

280 $ par hôte/mois (tarif sur 12 mois), ou 350 $ par mois

Optimisez la rentabilité de votre serveur de jeu grâce à l'hébergement sans frais de transfert de données sortantes (egress-free) des flottes privées (Private Fleets).

Permanent, disponible 24h/24 et 7j/7, exclusif à votre studio.

Votre facture varie selon le tarif et l'utilisation, qui peuvent varier en fonction
du type de jeu, du nombre de joueurs et plus encore.

Votre facture varie selon le tarif et l'utilisation, qui peuvent varier en fonction
du type de jeu, du nombre de joueurs et plus encore.

Modélisez votre utilisation avec notre calculateur d'estimation ->

Modélisez votre utilisation avec notre calculateur d'estimation ->

Fonctionnalités et prix d'Eggegap : comparaison détaillée entre Edge Cloud et Private Fleets

Fonctionnalités et prix d'Eggegap : comparaison détaillée entre Edge Cloud et Private Fleets

COMPARER

Essai gratuit

Cloud de périphérie

Flottes privées

FONCTIONNALITÉS

Analyses et surveillance

Alertes de facturation

Cliquer pour agrandir

28 lignes de plus

Déverrouille

Les fonctionnalités sont débloquées lorsqu'une carte de crédit est ajoutée au compte.

COMPARER

Essai gratuit

Cloud de périphérie

Flottes privées

FONCTIONNALITÉS

Analyses et surveillance

Alertes de facturation

Cliquer pour agrandir

28 lignes de plus

Déverrouille

Les fonctionnalités sont débloquées lorsqu'une carte de crédit est ajoutée au compte.

COMPARER

Essai gratuit

Cloud de périphérie

Flottes privées

FONCTIONNALITÉS

Analyses et surveillance

Alertes de facturation

Cliquer pour agrandir

28 lignes de plus

Déverrouille

Les fonctionnalités sont débloquées lorsqu'une carte de crédit est ajoutée au compte.