Detaillierte Erklärung zum Bereitstellen von H5-Spielen auf einem Nginx-Server

Detaillierte Erklärung zum Bereitstellen von H5-Spielen auf einem Nginx-Server

Auf dem Weg zur selbstlernenden Spieleentwicklung ist der erfüllendste Moment, ein eigenes Minispiel zu erstellen und es zum Testen mit Freunden zu teilen. Native Spiele können verpackt und geteilt werden, und der Prozess zum Starten von Minispielen ist langwierig. Wie sollten also H5-Minispiele geteilt werden? Dieser Artikel zeigt Ihnen, wie Sie das erstellte H5-Spiel über nginx in der Alibaba Cloud hosten.

Inhalt:

  1. Herunterladen und Konfigurieren von nginx
  2. Laden Sie Spiele-Build-Dateien auf den Cloud-Server hoch
  3. nginx richtet mehrere virtuelle Hosts nach Port ein

Entwicklungsumgebung:

Alibaba Cloud Server: Ubuntu 14.04.5 LTS (GNU/Linux 4.4.0-93-generic x86_64)

nginx: nginx/1.4.6 (Ubuntu)

WinSCP: 5.15.3

Schritte im Detail:

1. Laden Sie nginx herunter und konfigurieren Sie es

Bevor wir beginnen, wollen wir kurz darüber sprechen, was nginx ist. Nginx ist ein leichter Webserver/Reverse-Proxy-Server und E-Mail-Proxy-Server (IMAP/POP3) und wird unter einem BSD-ähnlichen Protokoll veröffentlicht. Seine Merkmale sind, dass er weniger Speicher belegt und über starke Parallelitätsfähigkeiten verfügt.

Ein Reverse-Proxy ist ein Proxy-Server, der Verbindungsanfragen im Internet entgegennimmt, diese Anfragen dann an einen Server im internen Netzwerk weiterleitet und die vom Server erhaltenen Ergebnisse an den Client zurückgibt, der eine Verbindung im Internet anfordert. Zu diesem Zeitpunkt erscheint der Proxy-Server der Außenwelt als Server.

Beim Lastenausgleich wird der Datenverkehr tatsächlich zur Ausführung auf mehrere Server verteilt, wodurch der Druck auf jeden einzelnen Server verringert wird. Mehrere Server arbeiten zusammen, um Aufgaben zu erledigen, wodurch der Datendurchsatz verbessert wird, wodurch die Bandbreite von Netzwerkgeräten und -servern erweitert wird, der Durchsatz erhöht wird, die Datenverarbeitungsfunktionen des Netzwerks gestärkt und die Netzwerkflexibilität und -verfügbarkeit verbessert wird.

Durch die Verwendung von nginx können wir statische und dynamische Ressourcen trennen. Statische Ressourcen, die sich nie ändern, werden in nginx abgelegt, während dynamische Ressourcen auf dem TomCat-Server ausgeführt werden. Beim Zugriff auf statische Ressourcen können wir nginx direkt anfordern, ohne TomCat anzufordern, was den Druck auf den Server verringert.

Derzeit werden zwei Installationsmethoden unterstützt: eine Installation basierend auf APT-Quellen und die andere Installation durch Kompilierung des Quellcodepakets. Wenn Sie jedoch die neueste Version installieren möchten, müssen Sie das Quellcodepaket herunterladen, kompilieren und installieren. In diesem Artikel wird die APT-Quellinstallationsmethode verwendet. Wenn Sie eine andere Installationsmethode kennenlernen möchten, können Sie auf Baidu suchen.

1.1 Softwarequellen aktualisieren

sudo apt-get update

1.2 Installieren Sie nginx

sudo apt-get installiere nginx

Hinweis: Der Speicherort der installierten Datei:

/usr/sbin/nginx: Hauptprogramm

/etc/nginx: speichert Konfigurationsdateien

/usr/share/nginx: speichert statische Dateien

/var/log/nginx: speichert Protokolle

1.3 Überprüfen Sie, ob nginx erfolgreich installiert wurde

nginx -v

1.4 Starten Sie nginx

Dienst Nginx starten

1.5 Geben Sie nach dem Start die öffentliche IP des Servers in den Browser ein und Sie sehen die Willkommensseite von nginx. Dies bedeutet, dass nginx erfolgreich installiert wurde.

2. Laden Sie die Spiel-Build-Datei auf den Cloud-Server hoch

2.1 Um Dateien auf den Cloud-Server hochzuladen, benötigen Sie ein Tool: WinSCP. Ich habe die Software auf Baidu Cloud hochgeladen. Sie können sie erhalten, indem Sie im Hintergrund des öffentlichen Kontos mit „WinSCP“ antworten. Sie kann ohne viel Aufwand installiert werden.

2.2 Bevor Sie Dateien hochladen, müssen Sie auf dem Cloud-Server einen Ordner erstellen, in dem Sie die Build-Dateien des Spiels speichern können. Da ich die Build-Dateien von zwei Spielen speichern werde, habe ich zwei Unterordner erstellt. Die Verzeichnisse sind wie folgt (ich habe sie im Stammverzeichnis erstellt, Sie können sie je nach tatsächlicher Situation erstellen):

/www/80

/www/81

2.3 Nachdem Sie den Ordner erstellt haben, können Sie WinSCP verwenden, um die Build-Dateien des Spiels hochzuladen. Bereiten Sie zwei erstellte Spiele vor, wählen Sie alle Build-Dateien aus, klicken Sie mit der rechten Maustaste und laden Sie sie in das oben erstellte Verzeichnis hoch:

3. nginx richtet mehrere virtuelle Hosts nach Port ein

Bevor wir beginnen, erklären wir kurz die nginx-Konfigurationsdatei:

... #globale Blockereignisse { #Ereignisblock...
}

http #http-Block {
  ... #http globaler Blockserver #Serverblock { 
    ... #Server globaler Blockstandort [MUSTER] #Standortblock {
      ...
    }
    Standort [MUSTER] 
    {
      ...
    }
  }
  Server
  {
   ...
  }
  ... #http globaler Block }

Globaler Block: Konfiguriert Anweisungen, die sich global auf Nginx auswirken. Im Allgemeinen gibt es Benutzergruppen, die Nginx-Server ausführen, einen PID-Speicherpfad für Nginx-Prozesse, einen Protokollspeicherpfad, eine Einführung in die Konfigurationsdatei, die Anzahl der zulässigen Arbeitsprozesse usw.

Ereignisse blockieren: Die Konfiguration wirkt sich auf den Nginx-Server oder Netzwerkverbindungen mit Benutzern aus. Dabei gibt es für jeden Prozess die maximale Anzahl an Verbindungen, welches ereignisgesteuerte Modell zur Verarbeitung von Verbindungsanforderungen gewählt werden soll, ob die gleichzeitige Annahme mehrerer Netzwerkverbindungen zugelassen werden soll und ob die Serialisierung mehrerer Netzwerkverbindungen aktiviert werden soll.

http-Block: Sie können mehrere Server verschachteln, Proxys, Caches, Protokolldefinitionen und die meisten anderen Funktionen und Konfigurationen von Modulen von Drittanbietern konfigurieren. Wie etwa Dateiimport, MIME-Typ-Definition, Protokollanpassung, ob Sendfile zum Übertragen von Dateien verwendet werden soll, Verbindungstimeout, Anzahl einzelner Verbindungsanforderungen usw.

Serverblock: konfiguriert die relevanten Parameter des virtuellen Hosts. Es können mehrere Server in einem HTTP vorhanden sein.

Standortblock: konfiguriert die Anforderungsweiterleitung und die Verarbeitung verschiedener Seiten.

Hier ist eine Konfigurationsdatei zu Ihrem Verständnis:

############# Jede Anweisung muss mit einem Semikolon enden. #################
#Benutzeradministrator Administratoren; #Konfigurieren Sie den Benutzer oder die Gruppe, die Standardeinstellung ist „niemand, niemand“.
#worker_processes 2; #Die Anzahl der Prozesse, die generiert werden dürfen, der Standardwert ist 1
#pid /nginx/pid/nginx.pid; #Geben Sie die Speicheradresse des laufenden Nginx-Prozesses an. Datei error_log log/error.log debug; #Geben Sie den Protokollpfad und die Protokollebene an. Diese Einstellung kann in den globalen Block, den HTTP-Block und den Serverblock eingefügt werden. Die Ebenen sind: Debug|Info|Notice|Warn|Error|Crit|Alert|Emerg.
Ereignisse {
  accept_mutex on; #Setzen Sie die Netzwerkverbindungsserialisierung, um Herdenpanik zu verhindern. Die Standardeinstellung ist „on“
  multi_accept on; #Legen Sie fest, ob ein Prozess mehrere Netzwerkverbindungen gleichzeitig akzeptiert. Die Standardeinstellung ist deaktiviert.
  #epoll verwenden; #Ereignisgesteuertes Modell, select|poll|kqueue|epoll|resig|/dev/poll|eventport
  worker_connections 1024; #Maximale Anzahl an Verbindungen, Standard ist 512
}
http {
  include mime.types; #Zuordnungstabelle für Dateierweiterung und Dateityp default_type application/octet-stream; #Standarddateityp, Standard ist text/plain
  #access_log off; #Dienstlog abbrechenlog_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; #Benutzerdefiniertes Formataccess_log log/access.log myFormat; #kombiniert ist der Standardwert des Protokollformatsendfile on; #Sendfile das Übertragen von Dateien erlauben, die Standardeinstellung ist „Aus“, kann im HTTP-Block, Serverblock, Standortblock sein.
  sendfile_max_chunk 100k; #Die Anzahl der Chunks, die von jedem Prozess pro Aufruf übertragen werden können, kann nicht größer als der eingestellte Wert sein. Der Standardwert ist 0, was bedeutet, dass es keine Obergrenze gibt.
  keepalive_timeout 65; #Verbindungs-Timeout, Standard ist 75 s, kann in HTTP-, Server-, Standortblöcken sein.

  Upstream mysvr {  
   Server 127.0.0.1:7878;
   Server 192.168.10.121:3333 Backup; #Hot Backup}
  error_page 404 https://www.baidu.com; #Fehlerseite Server {
    keepalive_requests 120; #Die Obergrenze einzelner Verbindungsanforderungen.
    listen 4545; #Abhörport Servername 127.0.0.1; #Abhöradressenstandort ~*^.+$ { #Angeforderte URL-Filterung, reguläre Übereinstimmung, ~ unterscheidet zwischen Groß- und Kleinschreibung, ~* unterscheidet nicht zwischen Groß- und Kleinschreibung.
      #Stammpfad; #Stammverzeichnis#Index vv.txt; #Standardseite festlegen Proxy-Passwort http://mysvr; #Umleitung zur durch mysvr definierten Serverliste anfordern deny 127.0.0.1; #verweigerte IP
      allow 172.18.5.54; #Erlaubte IP      
    } 
  }
}

Mithilfe der Virtual-Host-Technologie kann ein realer Host in mehrere „virtuelle“ Hosts aufgeteilt werden. Jeder virtuelle Host hat einen unabhängigen Domänennamen und eine IP-Adresse und verfügt über vollständige Internet-Serverfunktionen (www, FTP, E-Mail). Die virtuellen Hosts sind völlig unabhängig voneinander. Für die Außenwelt ist jeder virtuelle Host genau dasselbe wie ein unabhängiger Host.

Es gibt drei Arten von virtuellen Hosts: IP-basierte virtuelle Hosts, portbasierte virtuelle Hosts und namensbasierte virtuelle Hosts. Dieser Artikel verwendet portbasierte Einstellungen für mehrere virtuelle Hosts. Wenn Sie die anderen beiden Einstellungen wissen möchten, können Sie auf Baidu suchen.

3.1 Dieser Artikel öffnet die Ports 80 und 81. Port 80 ist der Standardport. Bevor Sie beginnen, müssen Sie Port 81 auf dem Alibaba Cloud-Server öffnen:

3.2 Nachdem der Alibaba Cloud-Server konfiguriert wurde, können Sie sich remote beim Server anmelden, um zu prüfen, ob der Port erfolgreich geöffnet wurde. Wenn der Port nicht erkannt wird, müssen Sie ihn manuell öffnen:

Überprüfen Sie den Status:

iptables -L -n 

Wenn Port 81 nicht verfügbar ist, müssen Sie Port 81 öffnen:

Offene Ports:

iptables -I INPUT -p tcp --dport 81 -j AKZEPTIEREN

So schließen Sie einen Port:

iptables -D INPUT -p tcp --dport 81 -j AKZEPTIEREN

3.3 Nach dem Öffnen des Ports müssen Sie die Datei nginx.conf konfigurieren. Die Konfigurationsdatei nginx.conf wurde oben kurz vorgestellt. Wenn Sie mehrere virtuelle Hosts über Ports einrichten möchten, müssen Sie nur einen Server hinzufügen, der auf den neu geöffneten Port lauscht:

  Server {
    listen 80; // Auf Port 80 lauschen Servername test80.superyu.com;
    root /www/80; // Speicherort des Projektverzeichnisses / {
      Index Index.html Index.htm;
    }
    
    Fehlerseite 500 502 503 504 /50x.html;
    Standort = /50x.html {
      Stamm-HTML;
    }  
  }
  
  Server {
    listen 81; // Auf Port 81 lauschen Servername test81.superyu.cn;
    root /www/81; // Speicherort des Projektverzeichnisses / {
      Index Index.html Index.htm;
    }
    
    Fehlerseite 500 502 503 504 /50x.html;
    Standort = /50x.html {
      Stamm-HTML;
    }    
  }

3.4 Starten Sie nginx nach der Konfiguration der Datei nginx.conf neu, um die Auswirkungen anzuzeigen:

Geben Sie den folgenden Befehl ein, um die Konfigurationsdatei zu aktualisieren, ohne nginx herunterzufahren:

nginx -s neu laden

3.5 Geben Sie http://public network:port in den Editor ein und Sie können den folgenden Effekt sehen:

endlich:

Dies ist das Ende dieses Artikels zum Bereitstellen von H5-Spielen auf dem Nginx-Server. Weitere relevante Inhalte zum Bereitstellen von H5 auf Nginx finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • So stellen Sie ein Vue-Projekt auf Nginx bereit (Verlaufsmodus)
  • Tutorial zum Bereitstellen eines ThinkPHP-Projekts auf Nginx
  • So stellen Sie mit Nginx mehrere Vue-Projekte unter demselben Domänennamen bereit und verwenden einen Reverse-Proxy
  • Lösen Sie das Problem der leeren Aktualisierung beim Bereitstellen des Vue-Projekts nginx in einem Nicht-Root-Verzeichnis
  • Lösung für das Problem, dass beim Bereitstellen eines Vue-Projekts mit Nginx keine JS-CSS-Dateien gefunden werden
  • Implementierung der Bereitstellung eines Vue-Projekts auf einem Nginx/Tomcat-Server
  • So stellen Sie ein Vue-Projekt unter Nginx bereit
  • Beispielmethode zum Bereitstellen eines React-Projekts auf Nginx
  • So stellen Sie Nginx bereit, um auf von Vue-CLI erstellte Projekte zuzugreifen
  • Beispiel für die Bereitstellung eines Flask-Projekts mit uWSGI und Nginx
  • Die Fallstricke bei der Bereitstellung von Angular-Projekten in Nginx

<<:  Detaillierte Erklärung zur Verwendung von Vue zum Laden von Wetterkomponenten

>>:  Tutorial zur Neuinstallation von MySQL unter Windows 64-Bit (Zip-Version, dekomprimierte Version der MySQL-Installation)

Artikel empfehlen

Lösung für Nginx-Installationsfehler

1. Entpacken Sie nginx-1.8.1.tar.gz 2. Entpacken ...

JS Cross-Domain-XML – mit AS URLLoader

Kürzlich erhielt ich eine Anforderung für eine Fun...

Lösung für das Problem, dass der Docker-Container nicht gestoppt werden kann

Die Lösung lautet wie folgt: 1. Container löschen...

Eine kurze Erläuterung der Rolle des Parameters docker --privileged=true

Mit etwa Version 0.6 wurde Privileged in Docker e...

Verwenden Sie zum Senden des Formulars ein Bild statt einer Schaltfläche.

Code kopieren Der Code lautet wie folgt: <form...

Detaillierte Erklärung der Box-Größe in CSS3 (Content-Box und Border-Box)

Box-Größe in CSS3 (Inhaltsbox und Rahmenbox) Mit ...

Unterscheiden Sie zwischen Nullwert und leerem Zeichen ('') in MySQL

Bei der täglichen Entwicklung geht es im Allgemei...