如何部署 H5 遊戲到雲服務器？

在自學遊戲開發的路上，最有成就感的時刻就是將本身的小遊戲作出來分享給朋友試玩，原生的遊戲開能夠打包分享，小遊戲上線流程又長，那 H5 小遊戲該怎麼分享呢？本文就帶你們經過 nginx 將構建好的 H5 遊戲託管的阿里雲上。

 

內容大綱：

1. 下載、配置 nginx

2. 上傳遊戲構建文件到雲服務器

3. nginx 經過端口設置多個虛擬主機

    

開發環境：

阿里雲服務器：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 服務器/ 反向代理服務器及電子郵件（IMAP/POP3）代理服務器，並在一個BSD-like 協議下發行，其特色是佔有內存少， 併發能力強。

 

反向代理就是以代理服務器來接受internet上的鏈接請求，而後將請求轉發給內部網絡上的服務器，並將從服務器上獲得的結果返回給 internet 上請求鏈接的客戶端，此時代理服務器對外就表現爲一個服務器。

 

負載均衡其實就是將流量分發到多個服務器上執行，減輕每臺服務器的壓力，多臺服務器共同完成工做任務，從而提升了數據的吞吐量，從而擴展了網絡設備和服務器的帶寬、增長吞吐量、增強網絡數據處理能力、提升網絡的靈活性和可用性。

 

使用 nginx 咱們能夠作到動靜分離，將萬年不動的靜態資源放到 nginx 中，而動態資源運行在 TomCat 服務器中，當訪問靜態資源時，直接請求 nginx 就能夠了，不在須要去請求 TomCat 這樣服務器的壓力又小了。

 

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

 

1.1 更新軟件源

sudo apt-get update

 

1.2 安裝 nginx

sudo apt-get install nginx

注：安裝好的文件位置：

/usr/sbin/nginx：主程序

/etc/nginx：存放配置文件

/usr/share/nginx：存放靜態文件

/var/log/nginx：存放日誌

 

1.3 查看 nginx 是否安裝成功

nginx -v

 

1.4 啓動 nginx

service nginx start

 

1.5 啓動後，在瀏覽器輸入服務器的公網 IP，便可看到 nginx 的歡迎頁面，至此nginx安裝成功。

 

2.上傳遊戲構建文件到雲服務器

2.1 上傳文件到雲服務器須要用到一個工具：WinSCP，軟件我已經上傳到百度雲，公衆號後臺回覆「WinSCP」便可得到，無腦操做便可安裝。

 

2.2 上傳文件以前須要先在雲服務器中建立一個文件夾用來一會放置遊戲構建文件，由於一會要放置兩個遊戲的構建文件，因此我又建立了兩個子文件夾，目錄以下（我是建立在了根目錄下，你能夠根據實際狀況自行建立。）：

/www/80

/www/81

 

2.3 建立好文件夾後就可使用 WinSCP 上傳遊戲構建文件了，準備兩個構建好的遊戲，將構建文件全選後右擊上傳到上面建立的目錄便可：

 

3.nginx 經過端口設置多個虛擬主機

開始以前一樣對 nginx 的配置文件先作簡單的說明：

 1 ...              #全局塊
 2 
 3 events {         #events塊
 4    ...
 5 }
 6 
 7 http      #http塊
 8 {
 9     ...   #http全局塊
10     server        #server塊
11     { 
12         ...       #server全局塊
13         location [PATTERN]   #location塊
14         {
15             ...
16         }
17         location [PATTERN] 
18         {
19             ...
20         }
21     }
22     server
23     {
24       ...
25     }
26     ...     #http全局塊
27 }

 

全局塊：配置影響nginx全局的指令。通常有運行nginx服務器的用戶組，nginx進程pid存放路徑，日誌存放路徑，配置文件引入，容許生成worker process數等。

 

events塊：配置影響nginx服務器或與用戶的網絡鏈接。有每一個進程的最大鏈接數，選取哪一種事件驅動模型處理鏈接請求，是否容許同時接受多個網路鏈接，開啓多個網絡鏈接序列化等。

 

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

 

server塊：配置虛擬主機的相關參數，一個http中能夠有多個server。

 

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

 

下面給你們上一個配置文件，做爲理解：

 1 ########### 每一個指令必須有分號結束。#################
 2 #user administrator administrators;  #配置用戶或者組，默認爲nobody nobody。
 3 #worker_processes 2;  #容許生成的進程數，默認爲1
 4 #pid /nginx/pid/nginx.pid;   #指定nginx進程運行文件存放地址
 5 error_log log/error.log debug;  #制定日誌路徑，級別。這個設置能夠放入全局塊，http塊，server塊，級別以此爲：debug|info|notice|warn|error|crit|alert|emerg
 6 events {
 7     accept_mutex on;   #設置網路鏈接序列化，防止驚羣現象發生，默認爲on
 8     multi_accept on;  #設置一個進程是否同時接受多個網絡鏈接，默認爲off
 9     #use epoll;      #事件驅動模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport
10     worker_connections  1024;    #最大鏈接數，默認爲512
11 }
12 http {
13     include       mime.types;   #文件擴展名與文件類型映射表
14     default_type  application/octet-stream; #默認文件類型，默認爲text/plain
15     #access_log off; #取消服務日誌    
16     log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; #自定義格式
17     access_log log/access.log myFormat;  #combined爲日誌格式的默認值
18     sendfile on;   #容許sendfile方式傳輸文件，默認爲off，能夠在http塊，server塊，location塊。
19     sendfile_max_chunk 100k;  #每一個進程每次調用傳輸數量不能大於設定的值，默認爲0，即不設上限。
20     keepalive_timeout 65;  #鏈接超時時間，默認爲75s，能夠在http，server，location塊。
21 
22     upstream mysvr {   
23       server 127.0.0.1:7878;
24       server 192.168.10.121:3333 backup;  #熱備
25     }
26     error_page 404 https://www.baidu.com; #錯誤頁
27     server {
28         keepalive_requests 120; #單鏈接請求上限次數。
29         listen       4545;   #監聽端口
30         server_name  127.0.0.1;   #監聽地址       
31         location  ~*^.+$ {       #請求的url過濾，正則匹配，~爲區分大小寫，~*爲不區分大小寫。
32            #root path;  #根目錄
33            #index vv.txt;  #設置默認頁
34            proxy_pass  http://mysvr;  #請求轉向mysvr 定義的服務器列表
35            deny 127.0.0.1;  #拒絕的ip
36            allow 172.18.5.54; #容許的ip           
37         } 
38     }
39 }

 

利用虛擬主機技術，能夠把一臺真正的主機分紅許多 」 虛擬 」 的主機，每一臺虛擬主機都具備獨立的域名和 IP 地址，具備完整的 Internet 服務器（ www, FTP,email ）功能。虛擬主機之間徹底獨立，在外界看來，每一臺虛擬主機和一臺獨立的主機徹底同樣。

 

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

 

3.1 本文放開的是 80 和 81 端口，80 端口是默認的端口，開始以前優先要在阿里雲服務器打開 81 端口：

 

3.2 阿里雲服務器配置好以後，就能夠遠程登陸服務器去看是否開啓端口成功了，若是沒有檢測到端口的話，還須要手動開啓：

 

查看狀態：

iptables -L -n

 

若是沒有 81 端口，則須要打開 81 端口：

 

打開端口：

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

 

關閉端口：

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

 

3.3 打開端口後，加下來須要配置 nginx.conf 文件了，上面已經對 nginx.conf 配置文件進行了簡單的介紹，想要經過端口設置多個虛擬主機，只須要在添加一個 server 對新打開的端口進行監聽便可：

 1     server {
 2         listen       80;    // 監聽 80 端口
 3         server_name  test80.superyu.com;
 4         root   /www/80;    // 項目目錄
 5 
 6         location / {
 7             index index.html index.htm;
 8         }
 9         
10         error_page   500 502 503 504  /50x.html;
11         location = /50x.html {
12             root   html;
13         }   
14     }
15     
16     server {
17         listen       81;    // 監聽 81 端口
18         server_name  test81.superyu.cn;
19         root   /www/81;    // 項目目錄
20         
21         location / {
22             index index.html index.htm;
23         }
24        
25         error_page   500 502 503 504  /50x.html;
26         location = /50x.html {
27             root   html;
28         }        
29     }

 

3.4 配置好 nginx.conf 文件後，重啓 nginx 就能夠查看效果了：

 

輸入下面命令便可在不關閉 nginx 的狀況下更新配置文件：

nginx -s reload

 

3.5 在編輯器輸入 http://公網:端口 能夠看到效果以下：

 

最後：

至此將 H5 遊戲部署到雲服務器的所有步驟都介紹完了，快點將本身的遊戲分享給朋友試玩吧！

 

PS：閱讀原文有彩蛋哦！

 

---

 

推薦閱讀：

一文教你實現「飛機大戰」裏戰機的控制邏輯

自定義虛擬搖桿組件讓你一勞永逸

Cocos Creator 如何進行斷點調試？

 

---

 

我是「Super於」，立志作一個天天都有正反饋的人！

​