강동현
Builds for 1 pipeline canceled in 0 seconds

README.md 수정

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`: 릴리즈된 버전입니다.
......