手把手教你實戰(zhàn)開發(fā)黑白棋實時對戰(zhàn)游戲軟件開發(fā)（黑白棋對戰(zhàn)平臺）
摘要：本次實踐可以體驗到全程在云上創(chuàng)建彈性云服務(wù)器ECS，配置云服務(wù)器環(huán)境，在DevCloud平臺上一站式進行項目管理、代碼托管、代碼檢查、流水線、編譯、構(gòu)建、部署、測試、發(fā)布的流程。
本文分享自華為云社區(qū)《基于DevCloud進行黑白棋實時對戰(zhàn)游戲開發(fā)實踐【華為云至簡致遠】-云社區(qū)-華為云》，作者：gentle_zhou 。
本文基于DevCloud進行黑白棋實時對戰(zhàn)游戲開發(fā)，沙箱實驗鏈接：https://lab.huaweicloud.com/testdetail_411?ticket=ST-268164-dDRCJMPvZkgrnaXgZyUvLCn7-sso
本次實驗實踐的目標與基本要求：
- 學(xué)會使用軟件開發(fā)服務(wù)DevCloud實現(xiàn)代碼倉庫管理
- 學(xué)會使用軟件開發(fā)服務(wù)DevCloud實現(xiàn)編譯、構(gòu)建、部署
本文會分為：
1.創(chuàng)建彈性云服務(wù)器ECS
2.云服務(wù)器環(huán)境配置
3.創(chuàng)建項目及構(gòu)建部署
1.創(chuàng)建彈性云服務(wù)器ECS
在沙箱實驗桌面，點擊chrome瀏覽器，首次會自動登錄并進入華為云控制臺頁面。
1.1 創(chuàng)建安全組、VPC
在華為云控制臺頁面左側(cè)，點擊“服務(wù)列表”->“網(wǎng)絡(luò)”->“虛擬私有云VPC”進入網(wǎng)絡(luò)控制臺：
在網(wǎng)絡(luò)控制臺左側(cè)菜單欄中點擊“訪問控制”->“安全組”->“創(chuàng)建安全組”，填寫安全組名稱與模板信息：
創(chuàng)建完成如下圖展示：
點擊新建的自定義安全組名稱，進入該安全組的設(shè)置頁面，點擊“入方向規(guī)則”，點擊下面的“添加規(guī)則”，添加一條規(guī)則：
設(shè)置安全組規(guī)則完成，返回安全組列表，在網(wǎng)絡(luò)控制臺左側(cè)菜單欄中點擊“虛擬私有云”-“我的VPC”，點擊“創(chuàng)建虛擬私有云”進入創(chuàng)建界面（具體參數(shù)如當(dāng)前區(qū)域、網(wǎng)段等，實驗里都有提供具體信息）：
創(chuàng)建完之后的頁面：
1.2 創(chuàng)建彈性云服務(wù)器ECS
在云桌面瀏覽器頁面中的左側(cè)菜單欄，點擊“服務(wù)列表”->“計算”->“彈性云服務(wù)器ECS”進入網(wǎng)云服務(wù)器控制臺：
點擊“購買彈性云服務(wù)器”并設(shè)置云服務(wù)器參數(shù)（計費模式、CPU架構(gòu)、規(guī)格、鏡像、系統(tǒng)盤、網(wǎng)絡(luò)配置、用戶名密碼等高級配置）：
勾選同意《華為鏡像免責(zé)聲明》，點擊“立即購買”，就開始創(chuàng)建ECS了：
新建的ECS顯示正在運行中了：
2.云服務(wù)器環(huán)境配置
2.1.安裝IIS服務(wù)
找到1.2步驟創(chuàng)建的彈性云服務(wù)器ECS“ecs-deploy”，單擊右側(cè)的“遠程登錄”，在新彈出的登錄頁面，點擊“立即登錄”：
等待開機后，單擊頁面上方“Ctrl Alt Del”進行解鎖：
輸入創(chuàng)建彈性云服務(wù)器ECS時設(shè)置的密碼（默認密碼是7fbAt97#vg）進行登錄；進入桌面之后，單擊開始欄，單擊“服務(wù)器管理器”（這里有個坑，需要我們點擊頁面上方的進入全屏模式，否則頁面上顯示不出開始欄）
在“服務(wù)器管理器”，單擊“添加角色和功能”：
在左側(cè)導(dǎo)航欄，選擇“安裝類型”，單擊“基于角色或基于功能的安裝”，并單擊“下一步”；單擊“從服務(wù)器池中選擇服務(wù)器”，并在“服務(wù)器池”中選中本服務(wù)器的計算機名，單擊“下一步”；在角色列表內(nèi)找到“Web服務(wù)器(IIS)”并勾選，在彈窗“添加角色和功能向?qū)А敝?，單擊“添加功能”，單擊“下一步”；勾選“.Net Framework 3.5功能”，單擊“下一步”；單擊“下一步”到最后一頁，單擊“安裝”：
等待IIS服務(wù)在彈性云服務(wù)器ECS上安裝成功。
2.2 安裝node.js
在云服務(wù)器中打開瀏覽器，在地址欄手動輸入Node.js下載網(wǎng)址：http://nodejs.cn/download/，進入Node.js下載網(wǎng)站，單擊Windows安裝包“64位”，單擊“運行”，運行Windows安裝包：
進入Node.js安裝向?qū)В惭bnodejs，查看安裝成功，單擊“Finish”：
2.3 安裝Express、Socket.io、Forever
簡單介紹下
Express是目前最流行的基于Node.js的Web開發(fā)框架。
http://Socket.io是一個面向?qū)崟rweb應(yīng)用的JavaScript庫。
Forever是一個簡單的命令式的node.js的守護進程。
言歸正傳，我們繼續(xù)安裝步驟。
單擊開始欄，單擊“Windows PowerShell”：
在PowerShell中依次運行如下三條命令（等待命令執(zhí)行成功進行下一條執(zhí)行）：
npm install -g expressnpm install -g socket.ionpm install forever -g
執(zhí)行成功如下圖所示：
2.4.配置主機的授信
在云服務(wù)器中打開瀏覽器，在地址欄輸入以下網(wǎng)址：https://sandbox-experiment-resource-north-4.obs.cn-north-4.myhuaweicloud.com/reversi-play-online/windows2016.zip點擊“保存”：
進入windows2016.zip所在目錄，鼠標選中文件，點擊右鍵選擇“全部解壓縮…”解壓“windows2016.zip”，得到“windows2016.ps1”腳本，如下圖所示：
在PowerShel中輸入cd .Downloadswindows2016，切換到“windows2016.ps1”腳本所在目錄，命令行繼續(xù)輸入set-executionpolicy unrestricted，回車執(zhí)行后，再輸入“Y”執(zhí)行：
命令行繼續(xù)輸入.windows2016.ps1，回車執(zhí)行后再輸入“R”執(zhí)行；命令行輸入winrm e winrm/config/listener，若出現(xiàn)HTTPS表示監(jiān)聽成功，即windows2016部署環(huán)境自動化配置成功：
2.5 關(guān)閉彈性云服務(wù)器ECS防火墻
點擊開始按鈕，直接輸入搜索“防火墻”打開防火墻設(shè)置：
關(guān)閉防火墻，如下圖所示：
2.6.開放服務(wù)器端口
打開windows開始標志，點擊“Windos管理工具”， 雙擊“高級安全Windows防火墻”如下圖所示：
打開后，點擊“入站規(guī)則”->“新建規(guī)則”如下圖所示：
選擇“端口”點擊“下一步”，輸入端口“12001”點擊“下一步”，點擊“下一步”->“下一步”，參數(shù)默認；輸入名稱“heibaiqiWeb”點擊“完成”如下圖所示：
3.創(chuàng)建項目及構(gòu)建部署
3.1.創(chuàng)建項目
簡單介紹
什么是DevCloud？華為云軟件開發(fā)服務(wù)（DevCloud）是一站式云端DevOps平臺，面向開發(fā)者提供的云服務(wù)，即開即用，隨時隨地在云端進行項目管理、代碼托管、代碼檢查、流水線、編譯、構(gòu)建、部署、測試、發(fā)布等，讓開發(fā)者快速而又輕松地開啟云端開發(fā)之旅。
實驗桌面中的瀏覽器切換回華為云頁面，鼠標移動到云桌面瀏覽器頁面中左側(cè)菜單欄，點擊“服務(wù)列表”->“軟件開發(fā)平臺DevCloud”；進入平臺頁面后，選擇“項目管理”進入項目列表頁面，點擊“立即使用”，進入項目創(chuàng)建頁面，如下圖所示：
點擊“新建項目”，選擇“看板”，在新建項目彈窗中，設(shè)置項目名稱為“Cocos_ReversiOnline”，輸入項目信息，點擊“確定”，如下圖所示：
創(chuàng)建完成即跳轉(zhuǎn)如下圖頁面：
3.2 下載源碼及創(chuàng)建代碼倉庫
切換到實驗桌面，打開“Xfce 終端”，復(fù)制以下代碼到終端回車執(zhí)行，下載客戶端和服務(wù)端的源碼文件：
wget https://sandbox-experiment-resource-north-4.obs.cn-north-4.myhuaweicloud.com/reversi-play-online/ReversiOnline_Client.zip
wget https://sandbox-experiment-resource-north-4.obs.cn-north-4.myhuaweicloud.com/reversi-play-online/ReversiOnline_Server.zip
下載完之后，輸入命令ls查看下載文件：
執(zhí)行以下代碼配置用戶名和郵箱：
Git config --global user.name "您的用戶名"git config --global user.email "您的郵箱"
執(zhí)行以下代碼SSH-keygen -t rsa -C "您的郵箱"，生成ssh密鑰（一直回車至下圖出現(xiàn)），執(zhí)行成功如下圖所示：
執(zhí)行以下代碼cat .ssh/id_rsa.pub，查看并【復(fù)制】密鑰：
切換至瀏覽器，在3.1步驟創(chuàng)建好的項目中，單擊上方菜單“代碼”->“代碼托管”進入代碼托管界面，點擊“設(shè)置我的SSH密鑰”，如下圖所示：
進入密鑰設(shè)置頁面，點擊“添加SSH密鑰”填寫復(fù)制的密鑰。
① 標題：輸入秘鑰后自動生成
② 密鑰：粘貼已復(fù)制密鑰
返回上一級“代碼托管”管理頁面，點擊“普通新建”，新建倉庫：
① 代碼倉庫名稱：ReversiOnline_Client
② 歸屬項目：3.1步驟創(chuàng)建的項目名稱，如：Cocos_ReversiOnline
參照上述步驟，創(chuàng)建倉庫名稱為【“ReversiOnline_Server”】代碼倉庫。
3.3.推送代碼到代碼倉庫
點擊倉庫名稱【“ReversiOnline_Client”】，進入代碼倉，點擊“克隆/下載” ，查看SSH克隆地址：
切換到“Xfec 終端”，執(zhí)行以下代碼git clone gitaddr下載?！緩?fù)制】SSH克隆地址，將下方代碼中的“gitaddr”替換為復(fù)制的克隆地址，執(zhí)行時選擇接收密鑰輸入“yes”：
【參照上述步驟】，點擊名為【“ReversiOnline_Server”】代碼倉，克隆下載代碼倉庫。第二次執(zhí)行不需要接收密鑰：
執(zhí)行以下代碼設(shè)置Git：git config –global user.email "dev@cloud.com" && git config –global user.name "devcloud"
執(zhí)行以下命令，解壓源碼“ReversiOnline_Client. Zip”到 “ReversiOnline_Client” 倉庫。解壓過程中可能遇到同名文件覆蓋提示，根據(jù)提示輸入“A”，回車全部覆蓋即可：
執(zhí)行以下命令unzip ReversiOnline_Server.zip -d ReversiOnline_Server/，解壓源碼“ReversiOnline_Server. zip”到 “ReversiOnline_Server” 倉庫：
執(zhí)行以下命令cd ReversiOnline_Client/，切換到ReversiOnline_Client代碼倉庫；執(zhí)行以下命令git add .添加源碼到倉庫；執(zhí)行以下命令git commit -m "init"提交源碼；執(zhí)行以下命令git push推送源碼到遠程倉庫。執(zhí)行成功如下圖所示：
執(zhí)行以下命令cd ../ReversiOnline_Server/切換到“ReversiOnline_Server”倉庫；執(zhí)行以下命令git add .添加源碼到倉庫；執(zhí)行以下命令git commit -m "init"添加源碼到倉庫；執(zhí)行以下命令git push推送源碼到遠程倉庫。執(zhí)行成功如下圖所示：
3.4 修改源碼配置文件
源碼上傳完成，切換至瀏覽器，點擊 “ReversiOnline_Client”倉庫，進入倉庫對“ServerIP”配置進行修改。
3.5.構(gòu)建應(yīng)用
完成服務(wù)器端和客戶端源碼的編譯構(gòu)建，生成可用于應(yīng)用部署的構(gòu)建包。
客戶端：
服務(wù)端：
3.6.執(zhí)行構(gòu)建任務(wù)
單擊“構(gòu)建&發(fā)布”- > “編譯構(gòu)建”重新進入構(gòu)建編譯列表。依次單擊執(zhí)行“開始構(gòu)建”，進行代碼包的編譯構(gòu)建，等待編譯構(gòu)建成功：
之后點擊“發(fā)布”，查看到兩個構(gòu)建包，說明構(gòu)建包發(fā)布成功。
3.7 獲取并上傳playbook
playbook可以幫助我們把項目部署到windows主機上，通常的playbook都是啟動IIS服務(wù)，用來運行web網(wǎng)站。
切換至“Xfce 終端”，執(zhí)行以下命令cd /home/user/Desktop && wget https://sandbox-experiment-resource-north-4.obs.cn-north-4.myhuaweicloud.com/reversi-play-online/nodejs_playbook.zip，下載nodejs_playbook.
執(zhí)行以下命令wget https://sandbox-experiment-resource-north-4.obs.cn-north-4.myhuaweicloud.com/reversi-play-online/iis_playbook.zip下載iis_playbook.
切換至瀏覽器，在發(fā)布頁面，點擊“上傳”，選中剛剛下載的文件，點擊“open”進行上傳。
上傳完成后最終發(fā)布頁面如下圖所示：
3.8.配置主機組
點擊“更多”->“設(shè)置”->“通用設(shè)置”進入頁面后，點擊左側(cè)欄“主機組管理”。進入主機組管理頁面后，點擊“新建主機組”，點擊“添加主機”：
3.9.服務(wù)器端部署
點擊“構(gòu)建&發(fā)布”->”部署”進入部署頁面，單擊“新建任務(wù)”。
部署過程可能需要較長時間，點擊“部署”回到任務(wù)列表，可查看到任務(wù)的部署狀態(tài)，如下圖所示：
3.10.客戶端部署
仿照3.9步驟，新建一個客戶端的部署任務(wù)“ReversiOnline_Web_Deploy”，并依次添加四個部署步驟。配置“選擇部署來源”。
3.11.結(jié)果驗證
在實驗桌面的瀏覽器里新打開一個瀏覽器窗口，在地址欄輸入“EIP:12001”，如：49.4.26.181:12001，訪問成功如下圖所示。注 – EIP替換為1.2步驟彈性云服務(wù)器ECS的彈性IP：
實踐總結(jié)
本次實踐讓我體驗到了全程在云上創(chuàng)建彈性云服務(wù)器ECS，配置云服務(wù)器環(huán)境，在DevCloud平臺上一站式進行項目管理、代碼托管、代碼檢查、流水線、編譯、構(gòu)建、部署、測試、發(fā)布的流程。基本做到了面向開發(fā)者提供云服務(wù)，即開即用，隨時隨地。當(dāng)然還有如下幾點是本次實踐個人覺得還值得改進的：
1.彈性云服務(wù)器ECS時設(shè)置的密碼（默認密碼是7fbAt97#vg）盡量設(shè)置簡單點，默認密碼還是有點復(fù)雜；在登錄云服務(wù)器環(huán)境的時候密碼不能復(fù)制，需要自己手動輸入
2.云服務(wù)器環(huán)境右邊的運行概覽這一欄不能隱藏掉，說實在有點影響使用體驗，很占位置：
3.進入云服務(wù)器環(huán)境之后，估計因為頁面大小緣故，是看不到開始菜單欄的；需要我們點擊進入全屏模式之后，才可以看到左下角的開始菜單欄（這里其實如果有個提示，也會讓用戶覺得更友好點）
4.云服務(wù)器環(huán)境還是不流暢的，鼠標能明顯感覺到遲滯；在“服務(wù)器管理器”單擊“添加角色和功能”這個步驟就會導(dǎo)致系統(tǒng)卡?。?/span>
5.整個實驗給的時間還是偏短了點，要是可以再多個半小時到1小時，就可以體驗的更舒服了
點擊下方，第一時間了解華為云新鮮技術(shù)~
