首页 > 其他分享> > 青岛OJ(QingdaoU/OnlineJudge)的开发与使用(2)——整合前端

青岛OJ(QingdaoU/OnlineJudge)的开发与使用(2)——整合前端

2022-01-30 17:01:24 作者：互联网

原文链接：这里

0.前言

上一篇中，我们下载了前端代码并修改了前端代码，并成功运行了修改过的前端代码，这一片中我们将修改过的前端代码更新到服务端。

思路一个有两种，第一种是将前端代码挂载到服务器上。另一种是将前端代码打包成镜像文件写道docker-compose.yml文件中。

1.前端代码挂载到服务器

我们将上一篇修改过的代码打开，切换到相应的目录，然后执行

npm run build

等待一会，会提示成功

这个时候我们前端的文件夹会多一个dist文件夹，这时我们打包后的文件夹。

我们将dist文件夹整个复制到docker一键安装的目录下的一个文件夹

然后我们打开docker-compose.yml ，在volumes下面增加一行：

/www/QDOJ/OnlineJudgeDeploy/data/backend/dist:/app/dist

冒号前面的要改成实际目录。

我这里因为在目录下所以直接从data一级目录写。

然后可以看到我们修改后的中文的版本已经替换掉。(有的需要在docker-compose.yml所在文件夹执行”docker-compose up -d”命令)

2.前端文件打包成镜像

第一种方法比较简单，但是不符合一键安装的思想，如果你的修改的版本确定了可以一键打包，写到docker-compose.yml 文件中。

(1)在此之前：我们需要在阿里云上注册一个docker的镜像仓库。

注册方法及简单使用方法请点这里。

(2)然后我们需要将onlinejudge恢复到最初始的状态，就是你一键安装完毕那个状态。（如果你在上一步更改过docker-compose.yml 文件，记得改回来并重新docker-compose up -d）

(3)然后切换到我们修改过的前端的目录下,先查看下我们前端镜像的ID

docker ps -a

CONTAINER ID        IMAGE                                                        COMMAND                  CREATED             STATUS                   PORTS                                         NAMES
5f9ae32a7349        registry.cn-hangzhou.aliyuncs.com/onlinejudge/oj_backend     "/bin/sh -c /app/dep…"   11 minutes ago      Up 4 minutes (healthy)   0.0.0.0:443->1443/tcp, 0.0.0.0:80->8000/tcp   oj-backend
64a37ad3e582        redis:4.0-alpine                                             "docker-entrypoint.s…"   13 hours ago        Up 6 minutes             6379/tcp                                      oj-redis
582049a81a00        registry.cn-hangzhou.aliyuncs.com/onlinejudge/judge_server   "/bin/sh -c /code/en…"   13 hours ago        Up 6 minutes (healthy)   8080/tcp                                      judge-server
9fc5e96326d4        postgres:10-alpine                                           "docker-entrypoint.s…"   13 hours ago        Up 6 minutes             5432/tcp                                      oj-postgres

(4)先把oj-backend的容器ID拷贝下来，一会要用。

然后我们执行

NODE_ENV=production npm run build:dll

然后

npm run build

(5)打包完成后，我们还是把dist里的内容注入到docker容器中，我们执行

docker cp ./dist  5f9ae32a7349:/app/
#这里 5f9ae32a7349  是我们刚才查看的oj-backend的容器ID，注意容器ID和冒号之间没有空格

(6)然后将注入后的容器打包成本地镜像

docker commit -m "提示信息" -a "作者"   容器ID  镜像名称
docker　images

//其中，容器ID是上面的
5f9ae32a7349,镜像名称可以自己起一个,成功之后会有一个值生成

执行docker images后会有以下界面,我们复制刚才我们创建的镜像ID: 0fe727ff77e7,一会要用.

(7)把打包好的镜像push到阿里云仓库

根据这篇文章中提到的阿里云仓库的注册方法,阿里提供了pull到仓库的方法, 建议打开你自己复制下来以备后用.

sudo docker login --username=你的用户名 registry.cn-qingdao.aliyuncs.com
sudo docker tag [镜像ID] registry.cn-qingdao.aliyuncs.com/你的命名空间/qdoj:[镜像版本号]
sudo docker push registry.cn-qingdao.aliyuncs.com/你的命名空间/qdoj:[镜像版本号]

#注意,提交的时候没有中括号

等待一会就push成功了.