Detailed explanation on how to deploy H5 games to nginx server

On the road to self-learning game development, the most fulfilling moment is to make your own mini-game and share it with friends for trial play. Native games can be packaged and shared, and the process of launching mini-games is long. So how should H5 mini-games be shared? This article will show you how to host the built H5 game on Alibaba Cloud through nginx.

Contents:

1. Download and configure nginx
2. Upload game build files to the cloud server
3. nginx sets up multiple virtual hosts by port

Development Environment:

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

Steps in detail:

1. Download and configure nginx

Before we begin, let's briefly talk about what nginx is. Nginx is a lightweight web server/reverse proxy server and email (IMAP/POP3) proxy server, and is released under a BSD-like protocol. Its characteristics are that it occupies less memory and has strong concurrency capabilities.

A reverse proxy is a proxy server that accepts connection requests on the Internet, then forwards the requests to a server on the internal network, and returns the results obtained from the server to the client requesting a connection on the Internet. At this time, the proxy server appears to the outside world as a server.

Load balancing actually distributes traffic to multiple servers for execution, reducing the pressure on each server. Multiple servers work together to complete tasks, thereby improving data throughput, thereby expanding the bandwidth of network equipment and servers, increasing throughput, strengthening network data processing capabilities, and improving network flexibility and availability.

By using nginx, we can separate static and dynamic resources. Static resources that never change are placed in nginx, while dynamic resources run in the TomCat server. When accessing static resources, we can directly request nginx without requesting TomCat, which reduces the pressure on the server.

Currently, two installation methods are supported, one is installation based on APT source, and the other is installation through source code package compilation. However, if you want to install the latest version, you must download the source code package and compile and install it. This article uses the APT source installation method. If you want to know another installation method, you can search on Baidu.

1.1 Update software sources

sudo apt-get update

1.2 Install nginx

sudo apt-get install nginx

Note: The installed file location:

/usr/sbin/nginx: main program

/etc/nginx: stores configuration files

/usr/share/nginx: stores static files

/var/log/nginx: stores logs

1.3 Check whether nginx is installed successfully

nginx -v

1.4 Start nginx

service nginx start

1.5 After startup, enter the server's public IP in the browser and you will see the nginx welcome page. This means that nginx has been successfully installed.

2. Upload the game build file to the cloud server

2.1 To upload files to the cloud server, you need a tool: WinSCP. I have uploaded the software to Baidu Cloud. You can get it by replying "WinSCP" in the background of the public account. It can be installed without any brains.

2.2 Before uploading files, you need to create a folder in the cloud server to store the game build files. Because I will store the build files of two games, I created two subfolders. The directories are as follows (I created them in the root directory, you can create them according to the actual situation):

/www/80

/www/81

2.3 After creating the folder, you can use WinSCP to upload the game build files. Prepare two built games, select all the build files, right-click and upload them to the directory created above:

3. nginx sets up multiple virtual hosts by port

Before we begin, let's briefly explain the nginx configuration file:

... #global block events { #events block...
}

http #http block {
  ... #http global block server #server block { 
    ... #server global block location [PATTERN] #location block {
      ...
    }
    location [PATTERN] 
    {
      ...
    }
  }
  server
  {
   ...
  }
  ... #http global block }

Global block: configures directives that affect nginx globally. Generally, there are user groups running nginx servers, nginx process pid storage path, log storage path, configuration file introduction, number of worker processes allowed to be generated, etc.

Events block: Configuration affects the nginx server or network connections with users. There are the maximum number of connections for each process, which event-driven model to choose to handle connection requests, whether to allow multiple network connections to be accepted at the same time, and whether to enable serialization of multiple network connections.

http block: You can nest multiple servers, configure proxies, caches, log definitions, and most other functions and configurations of third-party modules. Such as file import, mime-type definition, log customization, whether to use sendfile to transfer files, connection timeout, number of single connection requests, etc.

Server block: configures the relevant parameters of the virtual host. There can be multiple servers in one http.

Location block: configures the request routing and the processing of various pages.

Here is a configuration file for your understanding:

############ Each directive must end with a semicolon. #################
#user administrator administrators; #Configure the user or group, the default is nobody nobody.
#worker_processes 2; #The number of processes allowed to be generated, the default is 1
#pid /nginx/pid/nginx.pid; #Specify the storage address of the nginx process running file error_log log/error.log debug; #Specify the log path and level. This setting can be put into global block, http block, server block, and the levels are: debug|info|notice|warn|error|crit|alert|emerg
events {
  accept_mutex on; #Set network connection serialization to prevent herd panic. The default is on
  multi_accept on; #Set whether a process accepts multiple network connections at the same time, the default is off
  #use epoll; #Event driven model, select|poll|kqueue|epoll|resig|/dev/poll|eventport
  worker_connections 1024; #Maximum number of connections, default is 512
}
http {
  include mime.types; #File extension and file type mapping table default_type application/octet-stream; #Default file type, default is text/plain
  #access_log off; #Cancel service loglog_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; #Custom formataccess_log log/access.log myFormat; #combined is the default value of the log formatsendfile on; #Allow sendfile to transfer files, the default is off, can be in http block, server block, location block.
  sendfile_max_chunk 100k; #The number of chunks that can be transferred per call by each process cannot be greater than the set value. The default value is 0, which means there is no upper limit.
  keepalive_timeout 65; #Connection timeout, default is 75s, can be in http, server, location blocks.

  upstream mysvr {  
   server 127.0.0.1:7878;
   server 192.168.10.121:3333 backup; #hot backup}
  error_page 404 https://www.baidu.com; #error page server {
    keepalive_requests 120; #The upper limit of single connection requests.
    listen 4545; #Listening port server_name 127.0.0.1; #Listening address location ~*^.+$ { #Requested URL filtering, regular matching, ~ is case-sensitive, ~* is case-insensitive.
      #root path; #root directory#index vv.txt; #set default page proxy_pass http://mysvr; #request redirect to the server list defined by mysvr deny 127.0.0.1; #denied IP
      allow 172.18.5.54; #Allowed IP      
    } 
  }
}

By using virtual host technology, a real host can be divided into many "virtual" hosts. Each virtual host has an independent domain name and IP address and has complete Internet server (www, FTP, email) functions. The virtual hosts are completely independent of each other. To the outside world, each virtual host is exactly the same as an independent host.

There are three types of virtual hosts: IP-based virtual hosts, port-based virtual hosts, and name-based virtual hosts. This article uses port-based settings for multiple virtual hosts. If you want to know the other two settings, you can search on Baidu.

3.1 This article opens ports 80 and 81. Port 80 is the default port. Before starting, you must open port 81 on the Alibaba Cloud server:

3.2 After the Alibaba Cloud server is configured, you can remotely log in to the server to see if the port is successfully opened. If the port is not detected, you need to open it manually:

Check the status:

iptables -L -n 

If port 81 is not available, you need to open port 81:

Open ports:

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

To close a port:

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

3.3 After opening the port, you need to configure the nginx.conf file. The nginx.conf configuration file has been briefly introduced above. If you want to set up multiple virtual hosts through ports, you only need to add a server to listen to the newly opened port:

  server {
    listen 80; // Listen to port 80 server_name test80.superyu.com;
    root /www/80; // project directory location / {
      index index.html index.htm;
    }
    
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
      root html;
    }  
  }
  
  server {
    listen 81; // Listen to port 81 server_name test81.superyu.cn;
    root /www/81; // project directory location / {
      index index.html index.htm;
    }
    
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
      root html;
    }    
  }

3.4 After configuring the nginx.conf file, restart nginx to view the effect:

Enter the following command to update the configuration file without shutting down nginx:

nginx -s reload

3.5 Enter http://public network:port in the editor and you can see the following effect:

at last:

This is the end of this article on how to deploy H5 games to the nginx server. For more relevant nginx deployment h5 content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!