Typescript로 작성된 오픈소스 그림퀴즈 웹 어플리케이션입니다. 캐치마인드와 skribbl.io로 대표되는 인기 게임 장르이나, 완성도가 높은 웹 버전 오픈소스가 없어 제작하게 되었습니다.
[백엔드](./server)와 [프론트엔드](./web)를 모두 포함합니다.
## 개발 환경 구축
### 백엔드 (./server)
## 백엔드 (./server)
Express와 socket.io를 기반으로 한 node.js 서버입니다.
Express와 socket.io를 기반으로 한 node.js 서버입니다. 소켓 통신 규약은 [PROTOCOL.md](http://khuhub.khu.ac.kr/2020105578/nodejs-game/blob/develop/PROTOCOL.md)에 정의되어 있습니다.
소켓 통신 규약은 [PROTOCOL.md](http://khuhub.khu.ac.kr/2020105578/nodejs-game/blob/develop/PROTOCOL.md)에 정의되어 있습니다.
### Usage
#### Usage
`$ yarn`으로 의존성을 설치합니다.
...
...
@@ -37,31 +29,29 @@ Express와 socket.io를 기반으로 한 node.js 서버입니다.
`$ yarn build`로 서버를 빌드합니다.
## 프론트엔드 (./web)
### 프론트엔드 (./web)
React.js와 tailwindcss를 기반으로 한 클라이언트입니다.
### Usage
#### Usage
`$ npm i`로 의존성을 설치합니다.
본인의 백엔드 서버 URI를 [SocketContext.ts](http://khuhub.khu.ac.kr/2020105578/nodejs-game/blob/develop/web/src/contexts/SocketContext.ts)에 입력합니다.
만약 외부에서 동작하는 백엔드 서버를 사용해야 한다면 백엔드 서버 URI를 [SocketContext.ts](http://khuhub.khu.ac.kr/2020105578/nodejs-game/blob/develop/web/src/contexts/SocketContext.ts)에 입력합니다.
`$ npm start`로 디버그용 개발 서버를 엽니다.
`$ npm run-script build`로 프로덕션 빌드를 할 수 있습니다.
## 배포
Docker Compose를 통해 서버를 구성할 수 있습니다. 프론트엔드 페이지는 빌드되어 nginx로 서빙됩니다. 리포지토리 최상단 디렉토리에서 `$ docker-compose up`를 입력하세요.
Docker와 Docker Compose를 준비하고 리포지토리 최상단 폴더로 이동해주세요.
`$ HOST=<도메인> SSL_CERT=<cert 경로> SSL_KEY=<key 경로> SSL_CA=<cacert 경로> docker-compose build --no-cache`를 입력하여 빌드할 수 있습니다.
