如何部署 H5 遊戲到雲服務器？
- 2019 年 10 月 3 日
- 筆記
在自學遊戲開發的路上，最有成就感的時刻就是將自己的小遊戲做出來分享給朋友試玩，原生的遊戲開可以打包分享，小遊戲上線流程又長，那 H5 小遊戲該怎麼分享呢？本文就帶大家通過 nginx 將構建好的 H5 遊戲託管的阿里雲上。
內容大綱：
-
下載、配置 nginx
-
上傳遊戲構建文件到雲服務器
-
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：閱讀原文有彩蛋哦！
推薦閱讀：
我是「Super於」，立志做一個每天都有正反饋的人！
