本文給大家介紹H5游戲如何部署到nginx服務(wù)器，希望對(duì)需要的朋友有所幫助！

在自學(xué)游戲開(kāi)發(fā)的路上，最有成就感的時(shí)刻就是將自己的小游戲做出來(lái)分享給朋友試玩，原生的游戲開(kāi)可以打包分享，小游戲上線流程又長(zhǎng)，那 H5 小游戲該怎么分享呢？

內(nèi)容大綱：

1. 下載、配置 nginx

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

3. nginx 通過(guò)端口設(shè)置多個(gè)虛擬主機(jī)

開(kāi)發(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

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

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

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

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

目前支持兩種安裝方式，一種是基于 APT 源安裝，一種是通過(guò)源碼包編譯安裝，但是如果想要安裝最新版本的就必須下載源碼包編譯安裝。本文采用的是基于 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 啟動(dòng) nginx

service nginx start

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

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

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

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

/www/80

/www/81

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

3.nginx 通過(guò)端口設(shè)置多個(gè)虛擬主機(jī)

開(kāi)始之前同樣對(duì) nginx 的配置文件先做簡(jiǎn)單的說(shuō)明：

...       #全局塊

events {     #events塊
  ...
}

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

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

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

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

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

location塊：配置請(qǐng)求的路由，以及各種頁(yè)面的處理情況。

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

########### 每個(gè)指令必須有分號(hào)結(jié)束。#################
#user administrator administrators; #配置用戶或者組，默認(rèn)為nobody nobody。
#worker_processes 2; #允許生成的進(jìn)程數(shù)，默認(rèn)為1
#pid /nginx/pid/nginx.pid;  #指定nginx進(jìn)程運(yùn)行文件存放地址
error_log log/error.log debug; #制定日志路徑，級(jí)別。這個(gè)設(shè)置可以放入全局塊，http塊，server塊，級(jí)別以此為：debug|info|notice|warn|error|crit|alert|emerg
events {
  accept_mutex on;  #設(shè)置網(wǎng)路連接序列化，防止驚群現(xiàn)象發(fā)生，默認(rèn)為on
  multi_accept on; #設(shè)置一個(gè)進(jìn)程是否同時(shí)接受多個(gè)網(wǎng)絡(luò)連接，默認(rèn)為off
  #use epoll;   #事件驅(qū)動(dòng)模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport
  worker_connections 1024;  #最大連接數(shù)，默認(rèn)為512
}
http {
  include    mime.types;  #文件擴(kuò)展名與文件類型映射表
  default_type application/octet-stream; #默認(rèn)文件類型，默認(rèn)為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為日志格式的默認(rèn)值
  sendfile on;  #允許sendfile方式傳輸文件，默認(rèn)為off，可以在http塊，server塊，location塊。
  sendfile_max_chunk 100k; #每個(gè)進(jìn)程每次調(diào)用傳輸數(shù)量不能大于設(shè)定的值，默認(rèn)為0，即不設(shè)上限。
  keepalive_timeout 65; #連接超時(shí)時(shí)間，默認(rèn)為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; #錯(cuò)誤頁(yè)
  server {
    keepalive_requests 120; #單連接請(qǐng)求上限次數(shù)。
    listen    4545;  #監(jiān)聽(tīng)端口
    server_name 127.0.0.1;  #監(jiān)聽(tīng)地址    
    location ~*^.+$ {    #請(qǐng)求的url過(guò)濾，正則匹配，~為區(qū)分大小寫(xiě)，~*為不區(qū)分大小寫(xiě)。
      #root path; #根目錄
      #index vv.txt; #設(shè)置默認(rèn)頁(yè)
      proxy_pass http://mysvr; #請(qǐng)求轉(zhuǎn)向mysvr 定義的服務(wù)器列表
      deny 127.0.0.1; #拒絕的ip
      allow 172.18.5.54; #允許的ip      
    } 
  }
}

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

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

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

3.2 阿里云服務(wù)器配置好之后，就可以遠(yuǎn)程登錄服務(wù)器去看是否開(kāi)啟端口成功了，如果沒(méi)有檢測(cè)到端口的話，還需要手動(dòng)開(kāi)啟：

查看狀態(tài)：

iptables -L -n

如果沒(méi)有 81 端口，則需要打開(kāi) 81 端口：

打開(kāi)端口：

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

關(guān)閉端口：

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

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

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

    location / {
      index index.html index.htm;
    }
    
    error_page  500 502 503 504 /50x.html;
    location = /50x.html {
      root  html;
    }  
  }
  
  server {
    listen    81;  // 監(jiān)聽(tīng) 81 端口
    server_name test81.superyu.cn;
    root  /www/81;  // 項(xiàng)目目錄
    
    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):端口 可以看到效果如下：