企业官网建设流程全解析

前言

在数字化协作需求日益增长的今天，腾讯云轻量应用服务器（Lighthouse）以其出色的性能和易用性，成为了部署各类应用的优选方案。特别是在快速搭建如WBO这样自由开源的在线协作白板时，Lighthouse提供的高带宽流量包和一键构建应用功能，极大地简化了部署流程。借助Lighthouse，WBO能够为用户提供稳定流畅的多人实时协作体验，无论是创意设计还是远程教学，都能轻松应对。选择腾讯云轻量应用服务器，开启高效、便捷的云端协作之旅。

一、WBO介绍

• WBO（whitebophir）简介

WBO（whitebophir）是一个自由和开源的在线协作白板，旨在为用户提供一个灵活、高效的在线协作空间。它支持多个用户同时在一个虚拟的大型白板上进行绘画和创作，所有操作均实时同步至所有在线参与者，确保了信息的即时共享与交流。无论是在艺术创作、娱乐互动、设计讨论还是教育辅导等领域，WBO都能提供强大的支持，满足多样化的协作需求。

• WBO 白板特点

• 实时协作绘图：与他人实时协作绘制图形变得异常简单，只需分享白板的URL即可邀请对方加入。
• 公共白板：任何人都可以使用公共白板，方便临时团队或公开项目使用。
• 私有白板：用户可以创建带有随机名称的私有白板，确保只有通过特定链接才能访问，保护隐私安全。
• 自定义URL：支持创建可命名的私有白板，并允许自定义其URL，便于记忆和分享，同时也保证了访问的私密性。

二、本次环境规划

2.1 本次实践简介

1.本次实践为个人测试学习环境，旨在新手快速上云和部署应用，生产环境请谨慎；
2.本次实践在腾讯云轻量应用服务器上部署了开源WBO白板工具。

2.2 本次环境规划

• 本次实践的环境规划如下：

三、购买轻量应用服务器

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。

[root@VM-8-13-centos ~]# cat /etc/os-releaseNAME="CentOS Linux"VERSION="7 (Core)"ID="centos"ID_LIKE="rhel fedora"VERSION_ID="7"PRETTY_NAME="CentOS Linux 7 (Core)"ANSI_COLOR="0;31"CPE_NAME="cpe:/o:centos:centos:7"HOME_URL="https://www.centos.org/"BUG_REPORT_URL="https://bugs.centos.org/"CENTOS_MANTISBT_PROJECT="CentOS-7"CENTOS_MANTISBT_PROJECT_VERSION="7"REDHAT_SUPPORT_PRODUCT="centos"REDHAT_SUPPORT_PRODUCT_VERSION="7"

• 检查内核版本，当前内核版本为3.10.0-1160.108.1.el7.x86_64。

[root@VM-8-13-centos ~]# uname -r3.10.0-1160.62.1.el7.x86_64

• 检查Node版本，当前默认安装的版本为v16.14.2。

[root@VM-8-13-centos ~]# node -vv16.14.2[root@VM-8-13-centos ~]# npm -v8.5.0

五、部署WBO应用

5.1 下载WBO项目

执行以下命令，在Github下载whitebophir源码包。

gitclone https://github.com/lovasoa/whitebophir.git

5.2 查看项目内容

• 进入whitebophir项目目录

[root@VM-8-13-centos ~]# cd whitebophir/[root@VM-8-13-centos whitebophir]#

• 查看whitebophir项目内容

[root@VM-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,40files

5.3 设置npm镜像源(可选）

如果云服务器区域在国内地区，为了加速下载速度，可以将npm设置为国内淘宝最新的镜像源。

npmconfigsetregistry https://registry.npmmirror.com

5.4 安装依赖

执行以下命令，安装whitebophir项目的相关依赖。

npminstall--production

5.5 启动WBO服务

执行以下命令，启动whitebophir服务。

• 直接启动WBO服务

PORT=5001HOST=0.0.0.0npmstart

• 后台启动WBO服务

PORT=5001HOST=0.0.0.0nohupnpmstart>wbo.log2>&1&

5.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/profile

exportNODE_HOME=/usr/local/lighthouse/softwares/nodejs/node/bin/exportPATH=$PATH:$NODE_HOME:/usr/local/bin/

• 使变量生效

source/etc/profile

5.7 设置service服务

为了确保 WBO 白板服务能够在系统启动时自动运行，并且可以通过 systemctl 进行方便的管理，可以将其配置为一个系统服务。

vim/etc/systemd/system/wbo.service

[Unit]Description=WBO Online Collaboration WhiteboardAfter=network.target[Service]Type=simpleEnvironment="PORT=5001""HOST=0.0.0.0""NODE_ENV=production"ExecStart=/usr/local/bin/npm startExecReload=/usr/local/bin/npm restartExecStop=/usr/local/bin/npm stopWorkingDirectory=/root/whitebophir/Restart=alwaysUser=rootGroup=rootStandardOutput=append:/root/whitebophir/wbo.logStandardError=append:/root/whitebophir/wbo.log[Install]WantedBy=multi-user.target

• 执行以下命令，启动wbo服务。

systemctl daemon-reload systemctl start wbo&&systemctlenablewbo

• 重启服务器后，查看wbo服务状态。

[root@VM-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]:>whitebophir@1.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网页内容返回则部署成功。

[root@VM-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 html><htmllang="en"><head><metacharset="utf-8"/><title>WBO — Collaborative whiteboard</title><linkrel="stylesheet"href="index.css"/><metaname="description"content="A free and open-source online collaborative drawing tool. Sketch new ideas together on WBO!"/><metaname="keywords"content="whiteboard,collaborative,online,draw,paint,shared,realtime,wbo,whitebophir,open-source,GPL,javascript"

六、安全设置工作

6.1 本机防火墙设置工作

轻量应用服务器的Docker CE应用模版中，默认已经将系统的防火墙和selinux都关闭了。如果没有关闭，可参考以下命令：

• 关闭本地防火墙，可执行以下命令。

systemctl disable firewalld&&systemctl stop firewalld

• 关闭selinux，可执行以下命令。

sed-ri's#(SELINUX=).*#\1disabled#'/etc/selinux/config setenforce0

6.2 云服务器防火墙设置工作

在腾讯云轻量应用服务器中需要配置防火墙，防火墙所提供的安全防护作用等同于云服务器中的安全组，不支持为轻量应用服务器配置安全组。我们选择添加规则，放行5001端口。

七、访问WBO在线协作白板

7.1 访问WBO首页

访问地址http://弹性公网IP地址:5001，将IP地址替换为自己服务器的弹性公网IP地址。我们可以正常访问到WBO在线协作白板的首页，如下所示：

7.2 创建私人白板

创建可命名的私人白板，自定义填写白板名称，点击“Go”，进入个人白板页面。

7.3 在线协作

进入公共白板，进行绘图操作。

切换到其余电脑的浏览器打开公共白板，我们可以继续编辑该白板内容。

八、总结

通过在腾讯云轻量应用服务器上部署开源WBO白板工具，我们充分体验到了其卓越的性能和简便的操作。Lighthouse提供的高带宽流量包和一键构建应用功能，使得整个部署过程变得异常快捷和顺畅。WBO白板的实时协作功能在腾讯云的支持下表现得非常稳定，极大地提升了团队协作的效率。无论是艺术创作、设计讨论还是远程教学，腾讯云轻量应用服务器都展现出了强大的适应性和可靠性。选择腾讯云轻量应用服务器，无疑是迈向高效云端协作的最佳选择。