天天看點

阿裡雲伺服器上如何部署 H5 遊戲?user administrator administrators; #配置使用者或者組,預設為nobody nobody。worker_processes 2; #允許生成的程序數,預設為1pid /nginx/pid/nginx.pid; #指定nginx程序運作檔案存放位址

在自學遊戲開發的路上,最有成就感的時刻就是将自己的小遊戲做出來分享給朋友試玩,原生的遊戲開可以打包分享,小遊戲上線流程又長,那 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安裝成功。

阿裡雲伺服器上如何部署 H5 遊戲?user administrator administrators; #配置使用者或者組,預設為nobody nobody。worker_processes 2; #允許生成的程式數,預設為1pid /nginx/pid/nginx.pid; #指定nginx程式運作檔案存放位址
阿裡雲伺服器上如何部署 H5 遊戲?user administrator administrators; #配置使用者或者組,預設為nobody nobody。worker_processes 2; #允許生成的程式數,預設為1pid /nginx/pid/nginx.pid; #指定nginx程式運作檔案存放位址
2.上傳遊戲建構檔案到雲伺服器

2.1 上傳檔案到雲伺服器需要用到一個工具:WinSCP,軟體我已經上傳到百度雲,公衆号背景回複「WinSCP」即可獲得,無腦操作即可安裝。

2.2 上傳檔案之前需要先在雲伺服器中建立一個檔案夾用來一會放置遊戲建構檔案,因為一會要放置兩個遊戲的建構檔案,是以我又建立了兩個子檔案夾,目錄如下(我是建立在了根目錄下,你可以根據實際情況自行建立。):

/www/80

/www/81

2.3 建立好檔案夾後就可以使用 WinSCP 上傳遊戲建構檔案了,準備兩個建構好的遊戲,将建構檔案全選後右擊上傳到上面建立的目錄即可:

3.nginx 通過端口設定多個虛拟主機

開始之前同樣對 nginx 的配置檔案先做簡單的說明:

...              #全局塊           

events { #events塊 ... }

http #http塊 {

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

}

全局塊

配置影響nginx全局的指令。一般有運作nginx伺服器的使用者組,nginx程序pid存放路徑,日志存放路徑,配置檔案引入,允許生成worker process數等。

events塊

配置影響nginx伺服器或與使用者的網絡連接配接。有每個程序的最大連接配接數,選取哪種事件驅動模型處理連接配接請求,是否允許同時接受多個網路連接配接,開啟多個網絡連接配接序列化等。

http塊

可以嵌套多個server,配置代理,緩存,日志定義等絕大多數功能和第三方子產品的配置。如檔案引入,mime-type定義,日志自定義,是否使用sendfile傳輸檔案,連接配接逾時時間,單連接配接請求數等。

server塊

配置虛拟主機的相關參數,一個http中可以有多個server。

location塊

配置請求的路由,以及各種頁面的處理情況。

下面給大家上一個配置檔案,作為了解:

########### 每個指令必須有分号結束。#################           

user administrator administrators; #配置使用者或者組,預設為nobody nobody。

worker_processes 2; #允許生成的程序數,預設為1

pid /nginx/pid/nginx.pid; #指定nginx程序運作檔案存放位址

error_log log/error.log debug; #制定日志路徑,級别。這個設定可以放入全局塊,http塊,server塊,級别以此為:debug|info|notice|warn|error|crit|alert|emerg events {

accept_mutex on;   #設定網路連接配接序列化,防止驚群現象發生,預設為on
multi_accept on;  #設定一個程序是否同時接受多個網絡連接配接,預設為off
#use epoll;      #事件驅動模型,select|poll|kqueue|epoll|resig|/dev/poll|eventport
worker_connections  1024;    #最大連接配接數,預設為512                

} http {

include       mime.types;   #檔案擴充名與檔案類型映射表
default_type  application/octet-stream; #預設檔案類型,預設為text/plain
#access_log off; #取消服務日志    
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;  #每個程序每次調用傳輸數量不能大于設定的值,預設為0,即不設上限。
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; #單連接配接請求上限次數。
    listen       4545;   #監聽端口
    server_name  127.0.0.1;   #監聽位址       
    location  ~*^.+$ {       #請求的url過濾,正則比對,~為區分大小寫,~*為不區分大小寫。
       #root path;  #根目錄
       #index vv.txt;  #設定預設頁
       proxy_pass  http://mysvr;  #請求轉向mysvr 定義的伺服器清單
       deny 127.0.0.1;  #拒絕的ip
       allow 172.18.5.54; #允許的ip           
    } 
}                

}

利用虛拟主機技術,可以把一台真正的主機分成許多 ” 虛拟 ” 的主機,每一台虛拟主機都具有獨立的域名和 IP 位址,具有完整的 Internet 伺服器( www, FTP,email )功能。虛拟主機之間完全獨立,在外界看來,每一台虛拟主機和一台獨立的主機完全一樣。

虛拟主機共分為三種:基于 IP 的虛拟主機,基于端口的虛拟主機和基于名稱的虛拟主機,本文采用的是基于端口設定多個虛拟主機,想了解另外兩種設定方式的小夥伴可自行百度。

3.1 本文放開的是 80 和 81 端口,80 端口是預設的端口,開始之前優先要在阿裡雲伺服器打開 81 端口:

阿裡雲伺服器上如何部署 H5 遊戲?user administrator administrators; #配置使用者或者組,預設為nobody nobody。worker_processes 2; #允許生成的程式數,預設為1pid /nginx/pid/nginx.pid; #指定nginx程式運作檔案存放位址
阿裡雲伺服器上如何部署 H5 遊戲?user administrator administrators; #配置使用者或者組,預設為nobody nobody。worker_processes 2; #允許生成的程式數,預設為1pid /nginx/pid/nginx.pid; #指定nginx程式運作檔案存放位址
阿裡雲伺服器上如何部署 H5 遊戲?user administrator administrators; #配置使用者或者組,預設為nobody nobody。worker_processes 2; #允許生成的程式數,預設為1pid /nginx/pid/nginx.pid; #指定nginx程式運作檔案存放位址

3.2 阿裡雲伺服器配置好之後,就可以遠端登入伺服器去看是否開啟端口成功了,如果沒有檢測到端口的話,還需要手動開啟

檢視狀态:

iptables -L -n           
阿裡雲伺服器上如何部署 H5 遊戲?user administrator administrators; #配置使用者或者組,預設為nobody nobody。worker_processes 2; #允許生成的程式數,預設為1pid /nginx/pid/nginx.pid; #指定nginx程式運作檔案存放位址

如果沒有 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 對新打開的端口進行監聽即可:

server {           
listen       80;    // 監聽 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;    // 監聽 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;
    }        
}</code></pre>                 

3.4 配置好 nginx.conf 檔案後,重新開機 nginx 就可以檢視效果了:

輸入下面指令即可在不關閉 nginx 的情況下更新配置檔案:

nginx -s reload                

3.5 在編輯器輸入

http://

公網:端口 可以看到效果如下:

阿裡雲伺服器上如何部署 H5 遊戲?user administrator administrators; #配置使用者或者組,預設為nobody nobody。worker_processes 2; #允許生成的程式數,預設為1pid /nginx/pid/nginx.pid; #指定nginx程式運作檔案存放位址
阿裡雲伺服器上如何部署 H5 遊戲?user administrator administrators; #配置使用者或者組,預設為nobody nobody。worker_processes 2; #允許生成的程式數,預設為1pid /nginx/pid/nginx.pid; #指定nginx程式運作檔案存放位址

最後:

至此将 H5 遊戲部署到雲伺服器的全部步驟都介紹完了,快點将自己的遊戲分享給朋友試玩吧!

雲伺服器ECS位址:阿裡雲·雲小站