온라인 저지 설치

원본 소스  - https://github.com/QingdaoU/OnlineJudgeDeploy

GitHub - QingdaoU/OnlineJudgeDeploy

 

윈도우 10인 경우

21H1 보다 높은 버전에서 WSL 을 설치 하여 도커 사용 가능

$ wsl --install

wsl 을 설치 한다. 컴퓨터 재부팅

wsl -l -v

으로 wsl 설치 버젼을 확인

 

 

 

https://www.docker.com/products/docker-desktop/ 에서 윈도우용 Docker 를 다운로드 받아서 설치

 

git clone -b 2.0 https://github.com/QingdaoU/OnlineJudgeDeploy.git && cd OnlineJudgeDeploy

 

docker-compose up -d

 

그리고 http://127.0.0.1 로 접속하면 아래와 같이 online judge 화면이 뜬다.

 

 

 

화면 수정하기

git clone https://github.com/QingdaoU/OnlineJudgeFE.git

프론트엔드 를 클론한 다음

npm install    // 사전 requirements 설치
set NODE_ENV=development
npm run build:dll

set TARGET=http://localhost   //만약 백엔드 실행하고 있을시  프론트엔드 디자인만 볼거면 안해도 됨

--set NODE_OPTIONS=--openssl-legacy-provider

npm run dev // 실행

 

npm run build:dll 오류 발생시

D:\docker\OnlineJudgeFE\build\webpack.base.conf.js 에서 다음의 위치를 수정 후 다시 실행

      {
        test: /\.js$/,
        loader: 'babel-loader?cacheDirectory=true',
        exclude: /(node_modules|external)/, <== external 추가
        include: [resolve('src'), resolve('test')]
      },

 

localhost:8080 으로 접속 하면 같은 화면을 볼 수 있다. 

이 화면을 수정해서 온라인 저지 프로그램의 화면에 적용하는 방법을 살펴 보자.

HOME 버튼을 원당컴퓨터학원이라는 글자로 바꿔 보자.

src/pages/oj/components/NavBar.vue 파일에서 다음과 같이 m.Home 라고 써 있는 것을 수정한다.

<template>
  <div id="header">
    <Menu theme="light" mode="horizontal" @on-select="handleRoute" :active-name="activeMenu" class="oj-menu">
      <div class="logo"><span>{{website.website_name}}</span></div>
      <Menu-item name="/">
        <Icon type="home"></Icon>
        {{$t('원당컴퓨터학원')}}
      </Menu-item>

 

다음으로 기존 레포지트리에 적용시키는 방법이다.

수정한 프론트엔드 디렉토리에서 npm run build 커맨드를 입력하여 빌드 한 다음 빌드가 끝나면 dist 디렉토리가 생긴다.

이 dist 디렉토리를 통째로 복사하여 OnlineJudgeDeploy/data/backend/ 에 붙여 넣기 후 docker-compose up 을 실행한다.

 

set NODE_OPTIONS=--openssl-legacy-provider

npm run build

dist 디렉토리 카피 후

docker-compose up

 

 

 

 

 

참고)

 

https://www.lainyzine.com/ko/article/how-to-install-wsl2-and-use-linux-on-windows-10/

[Windows] WSL 설치 및 사용법

https://down-develope.tistory.com/5

나만의 온라인저지 사이트 만들기 - 1