主頁 > 知識庫 > 詳解如何部署H5游戲到nginx服務(wù)器

詳解如何部署H5游戲到nginx服務(wù)器

在自學游戲開發(fā)的路上，最有成就感的時刻就是將自己的小游戲做出來分享給朋友試玩，原生的游戲開可以打包分享，小游戲上線流程又長，那 H5 小游戲該怎么分享呢？本文就帶大家通過 nginx 將構(gòu)建好的 H5 游戲托管的阿里云上。

內(nèi)容大綱：

下載、配置 nginx
上傳游戲構(gòu)建文件到云服務(wù)器
nginx 通過端口設(shè)置多個虛擬主機

開發(fā)環(huán)境：

阿里云服務(wù)器：Ubuntu 14.04.5 LTS (GNU/Linux 4.4.0-93-generic x86_64)

nginx：nginx/1.4.6 (Ubuntu)

WinSCP：5.15.3

步驟詳解：

1.下載、配置 nginx

開始之前先簡單的說一下什么是 nginx，nginx 是一款輕量級的 Web 服務(wù)器/ 反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器，并在一個BSD-like 協(xié)議下發(fā)行，其特點是占有內(nèi)存少，并發(fā)能力強。

反向代理就是以代理服務(wù)器來接受internet上的連接請求，然后將請求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器，并將從服務(wù)器上得到的結(jié)果返回給 internet 上請求連接的客戶端，此時代理服務(wù)器對外就表現(xiàn)為一個服務(wù)器。

負載均衡其實就是將流量分發(fā)到多個服務(wù)器上執(zhí)行，減輕每臺服務(wù)器的壓力，多臺服務(wù)器共同完成工作任務(wù)，從而提高了數(shù)據(jù)的吞吐量，從而擴展了網(wǎng)絡(luò)設(shè)備和服務(wù)器的帶寬、增加吞吐量、加強網(wǎng)絡(luò)數(shù)據(jù)處理能力、提高網(wǎng)絡(luò)的靈活性和可用性。

使用 nginx 我們可以做到動靜分離，將萬年不動的靜態(tài)資源放到 nginx 中，而動態(tài)資源運行在 TomCat 服務(wù)器中，當訪問靜態(tài)資源時，直接請求 nginx 就可以了，不在需要去請求 TomCat 這樣服務(wù)器的壓力又小了。

目前支持兩種安裝方式，一種是基于 APT 源安裝，一種是通過源碼包編譯安裝，但是如果想要安裝最新版本的就必須下載源碼包編譯安裝。本文采用的是基于 APT 源安裝方式，想了解另外一種安裝方式的小伙伴可自行百度。

1.1 更新軟件源

sudo apt-get update

1.2 安裝 nginx

sudo apt-get install nginx

注：安裝好的文件位置：

/usr/sbin/nginx：主程序

/etc/nginx：存放配置文件

/usr/share/nginx：存放靜態(tài)文件

/var/log/nginx：存放日志

1.3 查看 nginx 是否安裝成功

nginx -v

1.4 啟動 nginx

service nginx start

1.5 啟動后，在瀏覽器輸入服務(wù)器的公網(wǎng) IP，即可看到 nginx 的歡迎頁面，至此nginx安裝成功。

2.上傳游戲構(gòu)建文件到云服務(wù)器

2.1 上傳文件到云服務(wù)器需要用到一個工具：WinSCP，軟件我已經(jīng)上傳到百度云，公眾號后臺回復「WinSCP」即可獲得，無腦操作即可安裝。

2.2 上傳文件之前需要先在云服務(wù)器中創(chuàng)建一個文件夾用來一會放置游戲構(gòu)建文件，因為一會要放置兩個游戲的構(gòu)建文件，所以我又創(chuàng)建了兩個子文件夾，目錄如下（我是創(chuàng)建在了根目錄下，你可以根據(jù)實際情況自行創(chuàng)建。）：

/www/80

/www/81

2.3 創(chuàng)建好文件夾后就可以使用 WinSCP 上傳游戲構(gòu)建文件了，準備兩個構(gòu)建好的游戲，將構(gòu)建文件全選后右擊上傳到上面創(chuàng)建的目錄即可：

3.nginx 通過端口設(shè)置多個虛擬主機

開始之前同樣對 nginx 的配置文件先做簡單的說明：

...       #全局塊

events {     #events塊
  ...
}

http   #http塊
{
  ...  #http全局塊
  server    #server塊
  { 
    ...    #server全局塊
    location [PATTERN]  #location塊
    {
      ...
    }
    location [PATTERN] 
    {
      ...
    }
  }
  server
  {
   ...
  }
  ...   #http全局塊
}

全局塊：配置影響nginx全局的指令。一般有運行nginx服務(wù)器的用戶組，nginx進程pid存放路徑，日志存放路徑，配置文件引入，允許生成worker process數(shù)等。

events塊：配置影響nginx服務(wù)器或與用戶的網(wǎng)絡(luò)連接。有每個進程的最大連接數(shù)，選取哪種事件驅(qū)動模型處理連接請求，是否允許同時接受多個網(wǎng)路連接，開啟多個網(wǎng)絡(luò)連接序列化等。

http塊：可以嵌套多個server，配置代理，緩存，日志定義等絕大多數(shù)功能和第三方模塊的配置。如文件引入，mime-type定義，日志自定義，是否使用sendfile傳輸文件，連接超時時間，單連接請求數(shù)等。

server塊：配置虛擬主機的相關(guān)參數(shù)，一個http中可以有多個server。

location塊：配置請求的路由，以及各種頁面的處理情況。

下面給大家上一個配置文件，作為理解：

########### 每個指令必須有分號結(jié)束。#################
#user administrator administrators; #配置用戶或者組，默認為nobody nobody。
#worker_processes 2; #允許生成的進程數(shù)，默認為1
#pid /nginx/pid/nginx.pid;  #指定nginx進程運行文件存放地址
error_log log/error.log debug; #制定日志路徑，級別。這個設(shè)置可以放入全局塊，http塊，server塊，級別以此為：debug|info|notice|warn|error|crit|alert|emerg
events {
  accept_mutex on;  #設(shè)置網(wǎng)路連接序列化，防止驚群現(xiàn)象發(fā)生，默認為on
  multi_accept on; #設(shè)置一個進程是否同時接受多個網(wǎng)絡(luò)連接，默認為off
  #use epoll;   #事件驅(qū)動模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport
  worker_connections 1024;  #最大連接數(shù)，默認為512
}
http {
  include    mime.types;  #文件擴展名與文件類型映射表
  default_type application/octet-stream; #默認文件類型，默認為text/plain
  #access_log off; #取消服務(wù)日志  
  log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; #自定義格式
  access_log log/access.log myFormat; #combined為日志格式的默認值
  sendfile on;  #允許sendfile方式傳輸文件，默認為off，可以在http塊，server塊，location塊。
  sendfile_max_chunk 100k; #每個進程每次調(diào)用傳輸數(shù)量不能大于設(shè)定的值，默認為0，即不設(shè)上限。
  keepalive_timeout 65; #連接超時時間，默認為75s，可以在http，server，location塊。

  upstream mysvr {  
   server 127.0.0.1:7878;
   server 192.168.10.121:3333 backup; #熱備
  }
  error_page 404 https://www.baidu.com; #錯誤頁
  server {
    keepalive_requests 120; #單連接請求上限次數(shù)。
    listen    4545;  #監(jiān)聽端口
    server_name 127.0.0.1;  #監(jiān)聽地址    
    location ~*^.+$ {    #請求的url過濾，正則匹配，~為區(qū)分大小寫，~*為不區(qū)分大小寫。
      #root path; #根目錄
      #index vv.txt; #設(shè)置默認頁
      proxy_pass http://mysvr; #請求轉(zhuǎn)向mysvr 定義的服務(wù)器列表
      deny 127.0.0.1; #拒絕的ip
      allow 172.18.5.54; #允許的ip      
    } 
  }
}

利用虛擬主機技術(shù)，可以把一臺真正的主機分成許多 ” 虛擬 ” 的主機，每一臺虛擬主機都具有獨立的域名和 IP 地址，具有完整的 Internet 服務(wù)器（ www, FTP,email ）功能。虛擬主機之間完全獨立，在外界看來，每一臺虛擬主機和一臺獨立的主機完全一樣。

虛擬主機共分為三種：基于 IP 的虛擬主機，基于端口的虛擬主機和基于名稱的虛擬主機，本文采用的是基于端口設(shè)置多個虛擬主機，想了解另外兩種設(shè)置方式的小伙伴可自行百度。

3.1 本文放開的是 80 和 81 端口，80 端口是默認的端口，開始之前優(yōu)先要在阿里云服務(wù)器打開 81 端口：

3.2 阿里云服務(wù)器配置好之后，就可以遠程登錄服務(wù)器去看是否開啟端口成功了，如果沒有檢測到端口的話，還需要手動開啟：

查看狀態(tài)：

iptables -L -n

如果沒有 81 端口，則需要打開 81 端口：

打開端口：

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

關(guān)閉端口：

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

3.3 打開端口后，加下來需要配置 nginx.conf 文件了，上面已經(jīng)對 nginx.conf 配置文件進行了簡單的介紹，想要通過端口設(shè)置多個虛擬主機，只需要在添加一個 server 對新打開的端口進行監(jiān)聽即可：

  server {
    listen    80;  // 監(jiān)聽 80 端口
    server_name test80.superyu.com;
    root  /www/80;  // 項目目錄

    location / {
      index index.html index.htm;
    }
    
    error_page  500 502 503 504 /50x.html;
    location = /50x.html {
      root  html;
    }  
  }
  
  server {
    listen    81;  // 監(jiān)聽 81 端口
    server_name test81.superyu.cn;
    root  /www/81;  // 項目目錄
    
    location / {
      index index.html index.htm;
    }
    
    error_page  500 502 503 504 /50x.html;
    location = /50x.html {
      root  html;
    }    
  }

3.4 配置好 nginx.conf 文件后，重啟 nginx 就可以查看效果了：

輸入下面命令即可在不關(guān)閉 nginx 的情況下更新配置文件：

nginx -s reload

3.5 在編輯器輸入 http://公網(wǎng):端口可以看到效果如下：

最后：

到此這篇關(guān)于詳解如何部署H5游戲到nginx服務(wù)器的文章就介紹到這了,更多相關(guān)nginx部署h5內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

標簽：煙臺黃山山南湖北懷化賀州湘潭通遼

巨人網(wǎng)絡(luò)通訊聲明：本文標題《詳解如何部署H5游戲到nginx服務(wù)器》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。