
新手上云實踐 | 騰訊云輕量應用服務器部署開源WBO白板工具前言一、WBO介紹二、本次環境規劃2.1 本次實踐簡介2.2 本次環境規劃三、購買輕量應用服務器3.1 騰訊云輕量應用服務器3.2 購買輕量應用服務器3.3 檢查輕量應用服務器狀態四、切換應用模版4.1 本次實踐應用模版介紹4.2 切換Node.js應用模版4.3 登錄輕量應用服務器4.4 檢查云服務器環境五、部署WBO應用5.1 下載WBO項目5.2 查看項目內容5.3 設置npm鏡像源(可選5.4 安裝依賴5.5 啟動WBO服務5.6 設置環境變量5.7 設置service服務5.8 本機測試WBO服務六、安全設置工作6.1 本機防火墻設置工作6.2 云服務器防火墻設置工作七、訪問WBO在線協作白板7.1 訪問WBO首頁7.2 創建私人白板7.3 在線協作八、總結前言在數字化協作需求日益增長的今天騰訊云輕量應用服務器Lighthouse以其出色的性能和易用性成為了部署各類應用的優選方案。特別是在快速搭建如WBO這樣自由開源的在線協作白板時Lighthouse提供的高帶寬流量包和一鍵構建應用功能極大地簡化了部署流程。借助LighthouseWBO能夠為用戶提供穩定流暢的多人實時協作體驗無論是創意設計還是遠程教學都能輕松應對。選擇騰訊云輕量應用服務器開啟高效、便捷的云端協作之旅。一、WBO介紹WBOwhitebophir簡介WBOwhitebophir是一個自由和開源的在線協作白板旨在為用戶提供一個靈活、高效的在線協作空間。它支持多個用戶同時在一個虛擬的大型白板上進行繪畫和創作所有操作均實時同步至所有在線參與者確保了信息的即時共享與交流。無論是在藝術創作、娛樂互動、設計討論還是教育輔導等領域WBO都能提供強大的支持滿足多樣化的協作需求。WBO 白板特點實時協作繪圖與他人實時協作繪制圖形變得異常簡單只需分享白板的URL即可邀請對方加入。公共白板任何人都可以使用公共白板方便臨時團隊或公開項目使用。私有白板用戶可以創建帶有隨機名稱的私有白板確保只有通過特定鏈接才能訪問保護隱私安全。自定義URL支持創建可命名的私有白板并允許自定義其URL便于記憶和分享同時也保證了訪問的私密性。二、本次環境規劃2.1 本次實踐簡介1.本次實踐為個人測試學習環境旨在新手快速上云和部署應用生產環境請謹慎2.本次實踐在騰訊云輕量應用服務器上部署了開源WBO白板工具。2.2 本次環境規劃本次實踐的環境規劃如下云廠商云產品應用模板應用模板版本操作系統版本部 署項目備注騰訊云輕量應用服務器Node.jsnode.js—v16.14.2Centos 7WBOwhitebophir—三、購買輕量應用服務器3.1 騰訊云輕量應用服務器如果您正在尋找一款高性價比的云服務器來部署您的應用騰訊云輕量應用服務器是一個不錯的選擇。它開箱即用非常適合個人開發者和初創團隊。目前騰訊云官方正在舉辦特惠活動云服務器等爆款產品搶先購是上云的好時機。可以點擊下方鏈接立即前往活動頁面了解詳情并參與購買立即前往騰訊云特惠活動【騰訊云】云服務器、云數據庫、COS、CDN、短信等云產品特惠熱賣中立即參與活動? 抓住機會享受更多優惠3.2 購買輕量應用服務器登錄騰訊云賬號在輕量應用服務器產品介紹頁中點擊“立即選購”進入到輕量應用服務器購買頁面。購買流程應用創建方式使用應用模版 應用模版選擇Docker CE也可以根據自身需要選擇不同的應用模版地域默認即可 套餐規格根據需要選擇規格的套餐登錄憑證自定義密碼自行設置密碼其余配置默認確認所有配置項無誤后點擊購買即可。3.3 檢查輕量應用服務器狀態購買成功后在云服務器控制臺看到購買的輕量應用服務器實例當看到狀態為“運行中”時候輕量應用服務器運行正常。如下圖所示這是我提前購買好的兩臺輕量應用服務器本次實踐以Docker-APP實例為操作環境。四、切換應用模版4.1 本次實踐應用模版介紹使用應用模板服務器創建后基于模板自動構建應用實現開箱即用簡單便捷。適合快速構建應用的用戶尤其是需要迅速啟動項目的開發者和團隊。一鍵使用Node.js應用模板大幅節省開發環境部署時間避免繁瑣的配置過程提升開發效率。4.2 切換Node.js應用模版在購買騰訊云輕量應用服務器后如果我們要切換系統可以選擇云服務器的“重裝系統”功能。如下圖所示點擊“重裝系統選項”進入系統重置配置頁面。在系統重置配置頁面我們選擇使用應用模版——Node.js設置登錄密碼確認即可。等待實例狀態正常運行后我們看此時輕量應用服務器的鏡像為Node.js應用信息為預裝Node.js和Nginx。4.3 登錄輕量應用服務器我們可以使用Cloud Shell登錄輕量應用服務器點擊“登錄”選項。騰訊云輕量應用服務器的cloud shell遠程登錄功能默認開啟一鍵免密登錄到服務器 可以直接連接到云服務器也可以手動關閉。使用Xshell方式連接本地打開Xshell工具輸入彈性公網IP地址登錄賬號和密碼即可連接騰訊CVM云服務器。4.4 檢查云服務器環境檢查操作系統版本當前操作系統版本為CentOS 7。[rootVM-8-13-centos ~]# cat /etc/os-releaseNAMECentOS LinuxVERSION7 (Core)IDcentosID_LIKErhel fedoraVERSION_ID7PRETTY_NAMECentOS Linux 7 (Core)ANSI_COLOR0;31CPE_NAMEcpe:/o:centos:centos:7HOME_URLhttps://www.centos.org/BUG_REPORT_URLhttps://bugs.centos.org/CENTOS_MANTISBT_PROJECTCentOS-7CENTOS_MANTISBT_PROJECT_VERSION7REDHAT_SUPPORT_PRODUCTcentosREDHAT_SUPPORT_PRODUCT_VERSION7檢查內核版本當前內核版本為3.10.0-1160.108.1.el7.x86_64。[rootVM-8-13-centos ~]# uname -r3.10.0-1160.62.1.el7.x86_64檢查Node版本當前默認安裝的版本為v16.14.2。[rootVM-8-13-centos ~]# node -vv16.14.2[rootVM-8-13-centos ~]# npm -v8.5.0五、部署WBO應用5.1 下載WBO項目執行以下命令在Github下載whitebophir源碼包。gitclone https://github.com/lovasoa/whitebophir.git5.2 查看項目內容進入whitebophir項目目錄[rootVM-8-13-centos ~]# cd whitebophir/[rootVM-8-13-centos whitebophir]#查看whitebophir項目內容[rootVM-8-13-centos whitebophir]# tree -L 2 ././ ├── AUTHORS ├── CHECKS ├── client-data │ ├── apple-touch-icon.png │ ├── apple-touch-icon-precomposed.png │ ├── background.png │ ├── board.css │ ├── board.html │ ├── crossdomain.xml │ ├── error.html │ ├── favicon.ico │ ├── favicon.svg │ ├── frontpage-illustration.svg │ ├── github.svg │ ├── icon-size.svg │ ├── index.css │ ├── index.html │ ├── instagram.svg │ ├── js │ ├── label.svg │ ├── manifest.json │ └── tools ├── docker-compose.yml ├── Dockerfile ├── LICENSE ├── nightwatch.conf.js ├── package.json ├── package-lock.json ├── README.md ├── server │ ├── boardData.js │ ├── check_output_directory.js │ ├── client_configuration.js │ ├── configuration.js │ ├── createSVG.js │ ├── fs_promises.js │ ├── jwtauth.js │ ├── jwtBoardnameAuth.js │ ├── log.js │ ├── server.js │ ├── sockets.js │ ├── templating.js │ └── translations.json ├── server-data └── tests └── integration.js6directories,40files5.3 設置npm鏡像源(可選如果云服務器區域在國內地區為了加速下載速度可以將npm設置為國內淘寶最新的鏡像源。npmconfigsetregistry https://registry.npmmirror.com5.4 安裝依賴執行以下命令安裝whitebophir項目的相關依賴。npminstall--production5.5 啟動WBO服務執行以下命令啟動whitebophir服務。直接啟動WBO服務PORT5001HOST0.0.0.0npmstart后臺啟動WBO服務PORT5001HOST0.0.0.0nohupnpmstartwbo.log215.6 設置環境變量鏈接二進制文件ln-s/usr/local/lighthouse/softwares/nodejs/node/bin/node /usr/local/bin/nodeln-s/usr/local/lighthouse/softwares/nodejs/node/bin/npm /usr/local/bin/npm配置環境變量:在/etc/profile文件中新增以下兩行。vim/etc/profileexportNODE_HOME/usr/local/lighthouse/softwares/nodejs/node/bin/exportPATH$PATH:$NODE_HOME:/usr/local/bin/使變量生效source/etc/profile5.7 設置service服務為了確保 WBO 白板服務能夠在系統啟動時自動運行并且可以通過 systemctl 進行方便的管理可以將其配置為一個系統服務。vim/etc/systemd/system/wbo.service[Unit]DescriptionWBO Online Collaboration WhiteboardAfternetwork.target[Service]TypesimpleEnvironmentPORT5001HOST0.0.0.0NODE_ENVproductionExecStart/usr/local/bin/npm startExecReload/usr/local/bin/npm restartExecStop/usr/local/bin/npm stopWorkingDirectory/root/whitebophir/RestartalwaysUserrootGrouprootStandardOutputappend:/root/whitebophir/wbo.logStandardErrorappend:/root/whitebophir/wbo.log[Install]WantedBymulti-user.target執行以下命令啟動wbo服務。systemctl daemon-reload systemctl start wbosystemctlenablewbo重啟服務器后查看wbo服務狀態。[rootVM-8-13-centos ~]# systemctl status wbo● wbo.service - WBO Online Collaboration Whiteboard Loaded: loaded(/etc/systemd/system/wbo.service;enabled;vendor preset: disabled)Active: active(running)since Sat2024-11-1618:04:44 CST;12min ago Main PID:1034(npm start)CGroup: /system.slice/wbo.service ├─1034npmstart └─1464node./server/server.js Nov1618:04:44 VM-8-13-centos systemd[1]: Started WBO Online Collaboration Whiteboard. Nov1618:04:45 VM-8-13-centos npm[1034]:whitebophir1.21.2 start Nov1618:04:45 VM-8-13-centos npm[1034]:node./server/server.js Nov1618:04:46 VM-8-13-centos npm[1034]: server started{port:5001}5.8 本機測試WBO服務在云服務器本機上訪問在http://127.0.0.1:5001有wbo網頁內容返回則部署成功。[rootVM-8-13-centos ~]# curl http://127.0.0.1:5001 |head% Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed1007239100723900350k0--:--:-- --:--:-- --:--:-- 353k!DOCTYPE htmlhtmllangenheadmetacharsetutf-8/titleWBO — Collaborative whiteboard/titlelinkrelstylesheethrefindex.css/metanamedescriptioncontentA free and open-source online collaborative drawing tool. Sketch new ideas together on WBO!/metanamekeywordscontentwhiteboard,collaborative,online,draw,paint,shared,realtime,wbo,whitebophir,open-source,GPL,javascript六、安全設置工作6.1 本機防火墻設置工作輕量應用服務器的Docker CE應用模版中默認已經將系統的防火墻和selinux都關閉了。如果沒有關閉可參考以下命令關閉本地防火墻可執行以下命令。systemctl disable firewalldsystemctl stop firewalld關閉selinux可執行以下命令。sed-ris#(SELINUX).*#\1disabled#/etc/selinux/config setenforce06.2 云服務器防火墻設置工作在騰訊云輕量應用服務器中需要配置防火墻防火墻所提供的安全防護作用等同于云服務器中的安全組不支持為輕量應用服務器配置安全組。我們選擇添加規則放行5001端口。七、訪問WBO在線協作白板7.1 訪問WBO首頁訪問地址http://彈性公網IP地址:5001將IP地址替換為自己服務器的彈性公網IP地址。我們可以正常訪問到WBO在線協作白板的首頁如下所示7.2 創建私人白板創建可命名的私人白板自定義填寫白板名稱點擊“Go”進入個人白板頁面。7.3 在線協作進入公共白板進行繪圖操作。切換到其余電腦的瀏覽器打開公共白板我們可以繼續編輯該白板內容。八、總結通過在騰訊云輕量應用服務器上部署開源WBO白板工具我們充分體驗到了其卓越的性能和簡便的操作。Lighthouse提供的高帶寬流量包和一鍵構建應用功能使得整個部署過程變得異常快捷和順暢。WBO白板的實時協作功能在騰訊云的支持下表現得非常穩定極大地提升了團隊協作的效率。無論是藝術創作、設計討論還是遠程教學騰訊云輕量應用服務器都展現出了強大的適應性和可靠性。選擇騰訊云輕量應用服務器無疑是邁向高效云端協作的最佳選擇。