Showing
1 changed file
with
13 additions
and
23 deletions
| 1 | <p align="center"> | 1 | <p align="center"> |
| 2 | - <img src="http://khuhub.khu.ac.kr/2020105578/nodejs-game/raw/bf7f855fc1ed481ebf6e70f86b27ddb3a015c4ed/web/public/logo.png" alt="project logo"> | 2 | + <img src="http://khuhub.khu.ac.kr/2020105578/nodejs-game/raw/bf7f855fc1ed481ebf6e70f86b27ddb3a015c4ed/web/public/logo.png" alt="project logo"/> |
| 3 | </p> | 3 | </p> |
| 4 | <h1 align="center"> | 4 | <h1 align="center"> |
| 5 | 스케치퀴즈 | 5 | 스케치퀴즈 |
| ... | @@ -9,25 +9,17 @@ | ... | @@ -9,25 +9,17 @@ |
| 9 | <a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game/commits/develop"><img alt="coverage report" src="http://khuhub.khu.ac.kr/2020105578/nodejs-game/badges/develop/coverage.svg" /></a> | 9 | <a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game/commits/develop"><img alt="coverage report" src="http://khuhub.khu.ac.kr/2020105578/nodejs-game/badges/develop/coverage.svg" /></a> |
| 10 | </p> | 10 | </p> |
| 11 | 11 | ||
| 12 | - | 12 | +Typescript로 작성된 오픈소스 그림퀴즈 웹 어플리케이션입니다. 캐치마인드와 skribbl.io로 대표되는 인기 게임 장르이나, 완성도가 높은 웹 버전 오픈소스가 없어 제작하게 되었습니다. |
| 13 | - | ||
| 14 | -Typescript로 작성된 오픈소스 그림퀴즈 웹 어플리케이션입니다. | ||
| 15 | - | ||
| 16 | -캐치마인드와 skribbl.io로 대표되는 인기 게임 장르이나, | ||
| 17 | - | ||
| 18 | -완성도가 높은 웹 버전 오픈소스가 없어 제작했습니다. | ||
| 19 | 13 | ||
| 20 | [백엔드](./server)와 [프론트엔드](./web)를 모두 포함합니다. | 14 | [백엔드](./server)와 [프론트엔드](./web)를 모두 포함합니다. |
| 21 | 15 | ||
| 16 | +## 개발 환경 구축 | ||
| 22 | 17 | ||
| 18 | +### 백엔드 (./server) | ||
| 23 | 19 | ||
| 24 | -## 백엔드 (./server) | 20 | +Express와 socket.io를 기반으로 한 node.js 서버입니다. 소켓 통신 규약은 [PROTOCOL.md](http://khuhub.khu.ac.kr/2020105578/nodejs-game/blob/develop/PROTOCOL.md)에 정의되어 있습니다. |
| 25 | - | ||
| 26 | -Express와 socket.io를 기반으로 한 node.js 서버입니다. | ||
| 27 | 21 | ||
| 28 | -소켓 통신 규약은 [PROTOCOL.md](http://khuhub.khu.ac.kr/2020105578/nodejs-game/blob/develop/PROTOCOL.md)에 정의되어 있습니다. | 22 | +#### Usage |
| 29 | - | ||
| 30 | -### Usage | ||
| 31 | 23 | ||
| 32 | `$ yarn`으로 의존성을 설치합니다. | 24 | `$ yarn`으로 의존성을 설치합니다. |
| 33 | 25 | ||
| ... | @@ -37,31 +29,29 @@ Express와 socket.io를 기반으로 한 node.js 서버입니다. | ... | @@ -37,31 +29,29 @@ Express와 socket.io를 기반으로 한 node.js 서버입니다. |
| 37 | 29 | ||
| 38 | `$ yarn build`로 서버를 빌드합니다. | 30 | `$ yarn build`로 서버를 빌드합니다. |
| 39 | 31 | ||
| 40 | - | 32 | +### 프론트엔드 (./web) |
| 41 | - | ||
| 42 | -## 프론트엔드 (./web) | ||
| 43 | 33 | ||
| 44 | React.js와 tailwindcss를 기반으로 한 클라이언트입니다. | 34 | React.js와 tailwindcss를 기반으로 한 클라이언트입니다. |
| 45 | 35 | ||
| 46 | -### Usage | 36 | +#### Usage |
| 47 | 37 | ||
| 48 | `$ npm i`로 의존성을 설치합니다. | 38 | `$ npm i`로 의존성을 설치합니다. |
| 49 | 39 | ||
| 50 | -본인의 백엔드 서버 URI를 [SocketContext.ts](http://khuhub.khu.ac.kr/2020105578/nodejs-game/blob/develop/web/src/contexts/SocketContext.ts)에 입력합니다. | 40 | +만약 외부에서 동작하는 백엔드 서버를 사용해야 한다면 백엔드 서버 URI를 [SocketContext.ts](http://khuhub.khu.ac.kr/2020105578/nodejs-game/blob/develop/web/src/contexts/SocketContext.ts)에 입력합니다. |
| 51 | 41 | ||
| 52 | `$ npm start`로 디버그용 개발 서버를 엽니다. | 42 | `$ npm start`로 디버그용 개발 서버를 엽니다. |
| 53 | 43 | ||
| 54 | `$ npm run-script build`로 프로덕션 빌드를 할 수 있습니다. | 44 | `$ npm run-script build`로 프로덕션 빌드를 할 수 있습니다. |
| 55 | 45 | ||
| 56 | - | ||
| 57 | - | ||
| 58 | ## 배포 | 46 | ## 배포 |
| 59 | 47 | ||
| 60 | -Docker Compose를 통해 서버를 구성할 수 있습니다. 프론트엔드 페이지는 빌드되어 nginx로 서빙됩니다. 리포지토리 최상단 디렉토리에서 `$ docker-compose up`를 입력하세요. | 48 | +Docker와 Docker Compose를 준비하고 리포지토리 최상단 폴더로 이동해주세요. |
| 61 | 49 | ||
| 50 | +`$ HOST=<도메인> SSL_CERT=<cert 경로> SSL_KEY=<key 경로> SSL_CA=<cacert 경로> docker-compose build --no-cache`를 입력하여 빌드할 수 있습니다. | ||
| 62 | 51 | ||
| 52 | +`$ HOST=<도메인> SSL_CERT=<cert 경로> SSL_KEY=<key 경로> SSL_CA=<cacert 경로> docker-compose up`를 입력하면 서비스가 배포됩니다. 빌드된 프론트엔드는 nginx로 서빙됩니다. | ||
| 63 | 53 | ||
| 64 | -## 브랜치 | 54 | +### 브랜치 |
| 65 | 55 | ||
| 66 | - `develop`: 현재 개발중인 버전입니다. | 56 | - `develop`: 현재 개발중인 버전입니다. |
| 67 | - `master`: 릴리즈된 버전입니다. | 57 | - `master`: 릴리즈된 버전입니다. | ... | ... |
-
Please register or login to post a comment