new-vsc/README.md

vscode-oj

部署

一、基础配置

Ubuntu 20.04

由于前端中安装了自己编写的VScode插件，其中的后端服务器IP是直接写在插件的代码中的，所以如果后端IP地址发生了变化的话需要重新编译打包插件，因此对于前端和后端可以单独验证。

从前端镜像创建好云主机后可以从浏览器打开 http://<ip>:8080 访问code-server和使用我们开发的插件，此时插件访问的还是我们自己配置的后端。

对于后端的话，根据后端镜像创建好云主机后需要修改 /etc/nginx/sites-available/be 中的 server_name 为后端云主机的IP地址，然后可以在浏览器中输入 http://<IP>/get-problem-items/ 或者 http://<IP>/get-problem-description/<题目id: 1~400>/ 进行测试，只有这两个是GET请求，其他的接口是 POST 请求。

POST请求接口

1.http://<ip>/case_test/

变量	值
pid	1到400的数字字符串
code	string

2.http://<ip>/check-logic-error/

变量	值
pid	1到400的数字字符串
code	string

3.http://<ip>/submit/

变量	值
pid	1到400的数字字符串
code	string

二、数据库配置

创建 Mysql 云数据库，执行 be/SQL/problem.sql 中的sql语句，并修改 be/app.py 中的配置为相应的数据库信息。

三、服务端配置

2.1 安装Python3.7

# 升级包索引和软件
sudo apt update
sudo apt upgrade -y

# 安装编译所需包
sudo apt install -y build-essential zlib1g-dev libbz2-dev libncurses5-dev libgdbm-dev libnss3-dev libssl-dev libreadline-dev libffi-dev wget

# 官网下载 Python3.7
wget https://www.python.org/ftp/python/3.7.4/Python-3.7.4.tgz

# 解压
tar -xzvf Python-3.7.4.tgz

# 编译安装
cd Python-3.7.4
./configure --prefix=/usr/lib/python3.7  # 配置安装位置
sudo make
sudo make install

# 建立软链接
sudo ln -s /usr/lib/python3.7/bin/python3.7 /usr/bin/python3.7
sudo ln -s /usr/lib/python3.7/bin/pip3.7 /usr/bin/pip3.7

2.2 安装JDK-11

sudo apt update
# 安装 JDK-11
sudo apt install -y openjdk-11-jdk

# 查看是否安装成功
java -version

# 配置环境变量
sudo nano /etc/environment

# 写入：
JAVA_HOME="/usr/lib/jvm/java-11-openjdk-amd64"

# 更新
source /etc/environment

# 查看
echo $JAVA_HOME

2.3 安装Nginx

sudo apt-get install -y nginx

# 启动
sudo /etc/init.d/nginx start

# 使用以下命令重启、停止、查看Nginx状态
sudo systemctl restart nginx
sudo systemctl start nginx
sudo systemctl stop nginx
sudo systemctl status nginx

2.4 创建Python虚拟环境

# 更新并安装组件
sudo apt update
sudo apt install -y python3-pip python3-dev build-essential libssl-dev libffi-dev python3-setuptools

# 安装 python3-venv 软件包
sudo apt install -y python3-venv

# 创建虚拟环境
cd ~
python3.7 -m venv be

# 将 be 文件夹中的文件上传至云主机 ~/be 下

# 激活虚拟环境
source ~/be/bin/activate

# 安装依赖(注意使用pip而不是pip3)
cd ~/be
pip install -r requirements.txt

# 安装 uWSGI
pip install uwsgi

2.5 配置 uWSGI

# 启用 UFW 防火墙，允许访问端口5000
sudo ufw allow 5000

# 测试 uWSGI 服务（若本地开启了代理请关闭）
uwsgi --socket 0.0.0.0:5000 --protocol=http -w wsgi:app

# 从本地浏览器输入 http://<ip address>:5000/get-problem-items/ 能够返回数据即表示成功

# 现在可以关闭虚拟环境
deactivate

# 创建 uWSGI 配置文件
nano ~be/be.ini

# 写入如下内容
[uwsgi]
module = wsgi:app

master = true
processes = 5

socket = be.sock
chmod-socket = 660
vacuum = true

die-on-term = true
# 保存并关闭

2.6 创建 systemd 单元文件

sudo nano /etc/systemd/system/be.service

# 写入如下内容
[Unit]
Description=uWSGI instance to serve be
After=network.target

[Service]
User=ubuntu
Group=www-data
WorkingDirectory=/home/ubuntu/be
Environment="PATH=/home/ubuntu/be/bin"
ExecStart=/home/ubuntu/be/bin/uwsgi --ini be.ini

[Install]
WantedBy=multi-user.target
# 保存并关闭

# 现在可以启动创建的 uWSGI 服务并启用，以便在启动时启动
sudo systemctl start be
sudo systemctl enable be

# 查看状态
sudo systemctl status be

2.7 将 Nginx 配置为代理请求

sudo nano /etc/nginx/sites-available/be

# 写入
server {
	listen 80;
	server_name <公网IP，服务端外网IP或者负载均衡外网IP>;
	
	location / {
		include uwsgi_params;
		uwsgi_pass unix:/home/ubuntu/be/be.sock;
	}
}
# 保存并关闭

# 若要启用该配置，需将文件链接至 sites-enabled 目录
sudo ln -s /etc/nginx/sites-available/be /etc/nginx/sites-enabled

# 通过如下命令测试语法错误
sudo nginx -t

# 返回成功则重启 Nginx 进程以读取新配置
sudo systemctl restart nginx

# 再次调整防火墙，不再需要通过5000端口访问，可以删除该规则，最后可以允许访问Nginx服务器
sudo ufw delete allow 5000
sudo ufw allow 'Nginx Full'

# 现在可以直接通过 IP 地址访问
# 尝试 http://<ip address>/get-problem-items/

# 遇到错误使用如下方式检查
sudo less /var/log/nginx/error.log # 检查Nginx错误日志
sudo less /var/log/nginx/access.log # 检查Nginx访问日志
sudo journalctl -u nginx # 检查Nginx进程日志
sudo journalctl -u be # 检查你的Flask应用程序的uWSGI日志

四、前端配置

新建一台云主机

4.1 code-server 安装配置

curl -fOL https://github.com/cdr/code-server/releases/download/v3.8.0/code-server_3.8.0_amd64.deb
sudo dpkg -i code-server_3.8.0_amd64.deb

# 启动服务
sudo systemctl enable --now code-server@$USER

打开~/.config/code-server/config.yaml

修改bind-addr: 0.0.0.0:8080，以便在浏览器中访问云主机的8080端口来访问code-server。也可以指定其他的端口。同时修改password为可记忆的密码方便后续访问。随后重启服务。

sudo systemctl restart --now code-server@$USER

浏览器访问云主机ip：8080，并输入密码，即可使用在线VSCode编辑器。

4.2 插件的编译安装(可在本地安装编译并上传到云主机)

# 安装 node.js、npm
sudo apt update
sudo apt install nodejs npm

# 查看是否成功
nodejs --version
npm --version

# 安装 typescript
npm install -g typescript

# 查看是否成功
tsc -v

# 安装脚手架
npm install -g yo generator-code

# 进入 ShuiShan 目录
cd ShuiShan

# 修改 ShuiShan/src/service.ts 第七行 domain 变量为后端服务器地址****

# 安装依赖
npm install

# 打包
vsce package

# 上传到前端服务器,将生成的 .vsix 文件上传至前端服务器
# 在 code-server 中安装该插件包
# 如果不想上传至云端可在本地使用 VScode 打开 ShuiShan 目录然后按 F5 运行