阿里云服务器linux宝塔环境搭建scratch-scratch

在Linux系统的宝塔面板环境中搭建Scratch在线编程系统，需要结合宝塔的图形化管理优势，配置前端环境和后端服务。以下是详细步骤： ### **一、准备工作** 1. **服务器要求**： - 至少2GB内存（推荐4GB以上） - 已安装宝塔面板（Linux版） - 域名（可选，用于正式部署） 2. **需要安装的软件**： - Nginx（Web服务器） - PHP 7.4+（后端API） - MySQL 5.7+（数据库，存储用户和项目数据） - Node.js 14.x+（运行Scratch前端项目） ### **二、通过宝塔面板安装基础环境** 1. 登录宝塔面板 → 进入「软件商店」： - 安装 **Nginx**（推荐最新稳定版） - 安装 **PHP 7.4** 及以上版本（勾选必要扩展：fileinfo、mysqli、openssl） - 安装 **MySQL 5.7** 或 **MariaDB 10.5** - 安装 **Node.js**（通过「软件商店」→「运行环境」找到Node.js，选择14.x版本） ### **三、部署Scratch前端（scratch-www + scratch-gui）** #### 1. 创建网站目录 - 宝塔面板 → 「文件」→ 进入`/www/wwwroot/` → 创建`scratch`目录 - 进入`scratch`目录，再创建`frontend`（前端）和`backend`（后端）子目录 #### 2. 安装scratch-www和scratch-gui - 宝塔面板 → 「终端」→ 执行以下命令：

```bash
# 进入前端目录
cd /www/wwwroot/scratch/frontend

# 克隆代码
git clone https://github.com/scratchfoundation/scratch-www.git
git clone https://github.com/scratchfoundation/scratch-gui.git

# 安装scratch-gui依赖并启动
cd scratch-gui
npm install
npm run build  # 构建生产版本
npm link  # 链接到全局

# 安装scratch-www依赖并关联scratch-gui
cd ../scratch-www
npm install
npm link scratch-gui  # 关联本地scratch-gui

# 创建环境配置文件
cat > .env << EOF
API_URL=http://你的服务器IP或域名/backend/api
PORT=8080
NODE_ENV=production
SCRATCH_GUI_URL=/scratch-gui/build
EOF

# 构建scratch-www
npm run build
```

### **四、配置PHP后端（基础示例）** 1. 在`/www/wwwroot/scratch/backend`目录下创建`api`文件夹，用于存放PHP接口文件。 2. 创建数据库： - 宝塔面板 → 「数据库」→ 「添加数据库」 - 数据库名：`scratch_db`，用户名：`scratch_user`，设置密码并记录 3. 创建基础用户认证接口示例（`/www/wwwroot/scratch/backend/api/user.php`）：

```php
<?php
// 数据库连接
$servername = "localhost";
$username = "scratch_user";
$password = "你的数据库密码";
$dbname = "scratch_db";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 设置跨域
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");

// 简单的用户登录示例
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = json_decode(file_get_contents('php://input'), true);
    $username = $data['username'];
    $password = $data['password'];
    
    // 实际应用中需添加密码加密验证
    $sql = "SELECT * FROM users WHERE username='$username'";
    $result = $conn->query($sql);
    
    if ($result->num_rows > 0) {
        echo json_encode(["status" => "success", "message" => "登录成功"]);
    } else {
        echo json_encode(["status" => "error", "message" => "用户不存在"]);
    }
}
$conn->close();
?>
```

### **五、配置Nginx反向代理** 1. 宝塔面板 → 「网站」→ 「添加站点」： - 域名：输入你的域名（若无域名，可填服务器IP） - 根目录：`/www/wwwroot/scratch/frontend/scratch-www/build` - PHP版本：选择已安装的PHP版本 2. 配置Nginx： - 进入站点设置 → 「配置文件」→ 在`server`块中添加：

 ```nginx
   # 代理API请求到PHP后端
   location /backend/ {
       root /www/wwwroot/scratch/;
       try_files $uri $uri/ /index.php?$query_string;
       fastcgi_pass unix:/tmp/php-cgi-74.sock;  # 注意对应你的PHP版本
       fastcgi_index index.php;
       include fastcgi.conf;
   }
   
   # 代理scratch-gui
   location /scratch-gui/ {
       alias /www/wwwroot/scratch/frontend/scratch-gui/build/;
   }
   
   # 解决单页应用刷新404问题
   location / {
       try_files $uri $uri/ /index.html;
   }
   ```

### **六、设置启动服务** 为了让Scratch服务在服务器重启后自动运行，需要配置进程管理： 1. 宝塔面板 → 「软件商店」→ 安装「PM2管理器」 2. 进入PM2管理器 → 「添加项目」：

- 项目名称：`scratch-www`
   - 启动文件：`/www/wwwroot/scratch/frontend/scratch-www/server.js`
   - 项目路径：`/www/wwwroot/scratch/frontend/scratch-www`
   - 点击「添加」，启动服务

### **七、访问与测试** 1. 打开浏览器，访问你的域名或服务器IP 2. 若一切正常，会显示Scratch的在线界面 3. 测试核心功能： - 创建新项目 - 拖拽积木块 - 运行项目 - 保存项目（需要后端接口支持） ### **常见问题解决** 1. **页面白屏**： - 检查Nginx配置是否正确 - 查看浏览器控制台（F12）的报错信息 - 确保scratch-www和scratch-gui已成功构建 2. **接口调用失败**： - 检查PHP后端是否正常运行 - 确认跨域设置是否正确 - 查看宝塔面板的「日志」→「错误日志」排查问题 3. **内存不足**： - 若服务器内存较小，可关闭不必要的进程 - 调整Node.js的内存限制：`export NODE_OPTIONS=--max-old-space-size=1024` 通过以上步骤，你可以在宝塔环境中搭建一个基础的Scratch在线编程系统。实际生产环境中，还需要完善用户系统、项目存储、权限管理等功能，并做好安全加固（如HTTPS配置、防SQL注入等）。

文章导航