Scratch Lite 编程平台开发环境部署

System Dec 31, 2022

本指南所架设的编程平台为 scratch-cn.lite 在线编程平台。相对于 Scratch 官方的 Scratch-WWW 项目以及国内的其它项目而言，可以说本套系统在部署方面是非常简单的，而且对于服务器的要求及所需的支持软件也可以说是最少的。

开发环境为：Windows 11 + WSL2 + Ubuntu 22.04 + MySQL + NodeJS + NPM + VSCode
服务环境为：Ubuntu 20.04 + MySQL + NodeJS + NPM + Caddy

开发环境搭建：

  • Windows 11（略）
  • WSL2（略）
  • Ubuntu 22.04（略）

安装支持应用

apt update
apt install mysql-client mysql-server nodejs npm

部署开发平台

首先需要获取平台的源代码，在您要放置站点文件的位置执行：

git clone --depth=1 https://gitee.com/scratch-cn/lite.git

接下来进入源代码目录，找到数据库的 sql 备份文件，记下其名称用于导入数据库。
获取完毕后需要做少许的设置才可以满足要求。
由于 MySQL 8 以后使用的账户验证机制照比之前有所区别，我们需要修改一下账户验证的方式。并且因为我们很有可能已经运行了 MySQL 的服务，导致数据库的初始化已经运行过了。这个时候如果修改数据库的配置文件来实现这个功能，看似麻烦了一些。所以我使用的是直接在数据库中执行语句的方式来进行设置。

首先登录刚刚安装完毕的 MySQL。默认密码为空。

mysql -u root -p

进入数据库以后，首先设置验证方式和 root 密码。

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '新密码';
FLUSH PRIVILEGES;

进入数据库，创建数据库：

create database 数据库名称;

选中相应数据库：

use 数据库名称;

导入数据库文件：

source 数据库 sql 文件的路径;

接下来退出数据库，并且编辑平台的数据库配置文件，路径为：

.../server/lib/database.js

将其中数据库连接相关的信息修改正确，包括：地址、数据库名称、用户名、密码等信息。
完成以上配置以后，在源代码目录中执行一下命令：

npm run start

可以看到显示服务正常启动以及本地访问地址的连接，端口默认为 8080。我们可以使用 WSL2 的内网动态 IP 加上端口来访问架设起来的平台。

至于 VSCode 如何连接到 WSL2 下面，应该不用多讲了，直接在 VSCode 里面安装上远程访问插件就可以了，在这就不废话了。

以上为开发环境的配置工作。我们可以使用自己喜欢的方式将修改后的源代码目录同步到生产环境的服务器当中去。比如我使用的是将修改过的文件提交到自己架设的 Git 服务中，然后在对外服务器上检出文件就可以了。提交的是偶注意要忽略掉用户上传文件的目录，否则测试服务器中的数据也会同步过去，对于有文件洁癖的货（比如我），肯定是无法忍受的。

服务环境搭建：

  • VPS 租用（略）
  • 系统调试（略）

安装支持应用

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy mysql-client mysql-server nodejs npm

以上将安装 Caddy、MySQL、NodeJS、NPM 等所需的组件。

部署服务平台

接下来很多步骤和本地开发环境的配置方式都差不多一样，包括源代码的获取和软件的各种配置，可以参考上文中提及的方法去做。这里只特殊交代一下 Caddy 的用途及配置方法。

由于该平台默认的服务地址为 http://localhost:8080。不需要再设置外网访问权限等设置，而使用 Caddy 也正好可以把本地 http 访问给做成 https 的形式，而且 Caddy 还可以自动申请 ssl 证书。配置文件如下：

domain.ltd {
    reverse_proxy http://localhost:8080 {
        header_up Host {upstream_hostport}
        header_up X-Forwarded-Host {host}
    }
}

这样，我们就可以使用 https://domain.ltd/ 这样的形势来访问该平台了。

开发环境与服务环境同步

由于我个人的需求是数据库相对独立，而且对数据库的结构本身没有做修改，所以本地数据是不需要同步到服务环境中的。只有页面文件和功能才需要同步。而在本地测试过程中产生的用户数据也不想同步。所以我执行架设了 Git 服务器，将修改后的源代码通过 Git 服务和生产环境的服务器进行同步。大家也可以使用其它方式与自己的服务器进行同步，只需要记得涉及到系统服务启动等相关修改时，需要重新启动 npm 服务即可。

服务环境中站点开机自启动

首先创建一个启动的 sh 脚本：

nano start.sh

文件内容：

#!/bin/bash
cd /源代码根目录
npm run start

然后创建系统服务的配置文件：

nano /etc/systemd/system/服务名称.service

文件内容：

[Unit]
Description=Scratch Service
After=network.target network-online.target syslog.target
Wants=network.target network-online.target

[Service]
Type=simple

#启动服务的命令（命令必须写绝对路径）
ExecStart=bash /“start.sh”文件的绝对路径

[Install]
WantedBy=multi-user.target

编辑完毕后，设置为开机自启动并开启服务。

systemctl enable 服务名称
# 启动
systemctl start 服务名称
# 停止
systemctl stop 服务名称
# 重启
systemctl restart 服务名称
# 查看状态
systemctl status 服务名称

以上为开发和服务环境的搭建配置过程，尽量捞干货给大家写出来，也算是给自己留一个记录。开发过程中还涉及到了 MySQL 的一些基础操作以及为了解决部分问题而对源代码进行的一些修改，有时间整理后在发上来。

妥，先这样了······

Tags

Jacky Liu

Recommended for you