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

```shell
# 升级包索引和软件
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

```shell
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

```shell
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虚拟环境

```shell
# 更新并安装组件
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

```shell
# 启用 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 单元文件

```shell
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 配置为代理请求

```shell
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 安装配置

```shell
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为可记忆的密码方便后续访问。随后重启服务。

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

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



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

```shell
# 安装 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 运行
```