当前位置:网站首页 > 更多 > 站长帮 > 正文

[站长帮] CentOS(宝塔)部署安装发布Scratch3.0

作者:CC下载站 日期:2023-06-30 18:07:02 浏览:36 分类:站长帮

Centos(宝塔)安装部署发布Scratch3.0

0.背景

最近兼职工作需要搭建一个网站,于是买了服务器开始搭建了一个简单网站,后来由于需要搭建一个Scratch在线版的网站,于是有了今天的博客。前后差不多花了两天时间,主要是因为云服务器第一次搭建没有经验,差点把环境毁了。后来在本地搭建成功后才把中间关系整理明白。
配置环境:CentOS 7.5 + 宝塔7.1.1 + 腾讯云

1.Scratch3.0介绍

scratch3.0是一个款积木式儿童编程软件,分为单机版和网页版(功能差不多),scratch3.0整个目录结构如下:
Scratch3.0GitHub:https://github.com/LLK

[站长帮] CentOS(宝塔)部署安装发布Scratch3.0

[站长帮] CentOS(宝塔)部署安装发布Scratch3.0

scratch-gui: 核心库,对于界面有定制化的在这个库下进行
scratch-vm:虚拟机,管理状态并执行业务逻辑。
scratch-blocks:代码积木块
scratch-render:舞台渲染,在舞台区域出现的基于WebGL的处理器。
scratch-audio:声音拓展
scratch-l10n:国际化
scratch-paint:绘图拓展
scratch-storage:作品存储加载

|-- build						#编译后的文件夹,不发布没有此文件夹
|-- dist
|-- docs
|-- node_modules       			#npm安装时产生此文件,默认没有
|-- src
	|-- components              #UI组件,负责页面呈现
	|-- containers				#容器组件,承载容器组件业务逻辑
	|-- css						#全局通用CSS
	|-- examples				#集成测试用例
		|-- extensions          #拓展案例
	|-- lib						#插件及高阶组件
		|--audio	 			#声音插件
		|-- backpack			#背包插件
		|-- default-project     #默认项目
		|-- libraries			#素材库相关	
		|-- video				#视频模块
	|-- playground				#编译后页面的模板
	|-- reducers				#全局状态控制
|-- static						
	|--favicon.ico				#网站图标
|-- test						#测试用例
|-- translations				#翻译库
|-- README.md
|-- package.json
|-- webpack.consig.js    		#配置文件

2.本地搭建

Scatch3.0搭建需要Node.js环境,在宝塔软件商店安装PM2管理器(内置Node.js 和NPM)同时安装SSH终端。

2.1下载

在上文的GitHub链接中下载scratch-gui。(有的博文中说需要下载blocks和vm组件,经过本地实际测试发现gui模块就可以实现功能,目前还没有发现其他问题
然后解压后把scratch-gui上传到服务器上。

2.2修改npm

安装需要使用npm,但是默认npm的地址访问速度太慢,中间卡住了好几次,无奈只有删除了node_modules并修改npm默认地址才得以解决。打开 /root/.npmrc 然后修改成下图所示并保存。

registry=https://registry.npm.taobao.org

[站长帮] CentOS(宝塔)部署安装发布Scratch3.0

2.3开始安装

如果你的英文好的话,在scratch-gui目录下有个README.md,里面有详细的安装部署过程,不过是英文的。如果英文不是很好,不妨试试下面的方法(PS:中间先在虚拟机上搭建成功才放到服务器上的)
使用SSH登录后,切换到scratch-gui目录下。然后输入npm install

[站长帮] CentOS(宝塔)部署安装发布Scratch3.0

然后出现如下界:

[站长帮] CentOS(宝塔)部署安装发布Scratch3.0

PS:如果中间出现了问题,可以删除node_modules重新运行npm install。还有一个问题下载chomedriver时会出错,这时可以手动下载chomedriver并放到服务器中,重新运行npm isntall
然后运行 npm start

[站长帮] CentOS(宝塔)部署安装发布Scratch3.0

[站长帮] CentOS(宝塔)部署安装发布Scratch3.0

最后程序停在:complied successgully 按ctrl+z停止就行。
这时本地热发布构建成功了,可以通过访问http://localhost:8601 访问scratch3.0。
(PS:虽然在本地服务器和远程服务器这一步都成功了,但是远程服务器无法测试localhost环境。本地环境没有桌面环境,即使通过局域网IP:8601的方式也没有成功访问到scratch3.0 环境)

3.部署发布

上一步只是在本地成功构建了,还要把它发布到互联网上,这里宝塔用的环境是Apache2.4。
在scratch-gui 环境中输入 npm run build

[站长帮] CentOS(宝塔)部署安装发布Scratch3.0

然后程序执行到如下界面表示成功

[站长帮] CentOS(宝塔)部署安装发布Scratch3.0

然后scratch-gui目录下会生成一个build文件夹,这个就是网站用的静态文件。把这个build整个文件复制到服务器的网站目录下(www目录即可)。然后使用宝塔的网站搭建功能把网站目录指向build目录。
访问网站的地址即可。

[站长帮] CentOS(宝塔)部署安装发布Scratch3.0

4.后记

1.搭建过程中测试本地服务器和远程服务器, 建议先在本地服务器测试再向远程服务器发布,中间不小心差点毁了远程服务器的环境。
2.scratch3.0 感觉还是有点问题,测试中实际发现同样是发布网站,本地访问的速度比远程服务器的要快的多,远程服务器访问scratch至少10秒以上,应该是JS文件的问题,发布后的一个JS文件有20多M。而且其角色和背景加载非常慢,应该是其背后图片类资源链接的都是外国的网站。

您需要 登录账户 后才能发表评论

取消回复欢迎 发表评论:

关灯