수능 모의고사 웹사이트 서버 구축

https://moigosa.vercel.app

코로나 19가 장기화 되어 대면 수업이 축소화 되면서 모의고사 및 수능 시험 연습이 어려워진 학생들을 위해, 비대면으로 모의고사를 진행하여 갑작스러운 온라인 시험에도 높은 수준의 성적을 얻게 하기 위해서 프로젝트를 진행했..다곤 하지만 토이 프로젝트로 할 간단한 주제를 고민하다가 선택했습니다.

프로젝트 구조

프로젝트는 위 그림과 같이 3개의 서버가 Virtual Box VM 위에서 구동되고, 사용자는 브라우저를 통해 웹 서버에 접속할 수 있는 구조입니다. 각 서버별 상세 정보는 아래 표와 같습니다.

	용도	CPU	메모리	디스크	OS	사설 IP
서버1	웹 서버	2	4GB	50GB	Ubuntu 20.04	192.168.56.104
서버2	API 서버	2	4GB	50GB	Ubuntu 20.04	192.168.56.105
서버3	DB 서버	2	4GB	50GB	Ubuntu 20.04	192.168.56.106
클라이언트	브라우저	4	16GB	256GB	macOS 11.2	localhost

웹 서버

구축 환경

• Virtual Box 6.1
• Ubuntu 20.04 LTS
• Git 2.31
• Node 14 LTS
• Yarn 1.22
• Chrome 89.0, Safari 14.0, Whale 2.9, Firefox 87.0

구축 방법

1. VM 생성

Virtual Box를 이용해 Ubuntu 20.04 OS 기반의 새로운 VM을 만들어 줍니다.

2. 프로그램 설치

웹 서버를 구축하는데 필수적인 프로그램을 설치해줍니다. 설치 순서는 아래와 같이 git, Node.js, Yarn 순으로 설치해야 합니다. 순서가 바뀌면 프로그램 버전이 맞지 않아 오류가 발생할 수 있습니다.

$ sudo apt install git 

GitHub의 웹 서버 소스 코드를 가져올 수 있도록 git을 설치합니다.

$ sudo apt install -y nodejs
$ node --version

브라우저가 아닌 환경에서도 JavaScript를 실행하기 위해 Node.js를 설치합니다. -y는 설치 시 나타나는 모든 프롬프트에 Yes를 입력한다는 의미입니다.

$ sudo apt install curl
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
$ node --version
$ sudo apt install -y nodejs # Node.js 버전이 14가 아닐 때만

(선택) 설치 후 만약 Node.js 버전이 14가 아니라면 아래와 같이 curl을 설치한 후 Node.js 버전을 14로 설정해줍니다. 그리고 Node.js 버전을 확인한 후 14가 아니면 Node.js를 한번 더 설치해줍니다. Node.js 첫 설치 시 버전이 14면 위 명령여 4개는 실행하지 않아도 됩니다.

$ npm install --global yarn
$ yarn --version

JavaScript 패키지 다운로드 등을 관리해주는 Yarn을 설치해줍니다.

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg 
| sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" 
| sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt update && sudo apt install yarn -y

(선택) 만약 yarn 버전이 0.32+git으로 나온다면 잘못된 버전이므로 다음 커맨드들을 차례대로 실행 시켜줍니다.

3. 프로그램 설치 확인

터미널을 실행하여 다음 커맨드를 입력하여 필요한 모든 프로그램이 설치되어 있는지 확인합니다.

$ git --version
$ node --version
$ yarn --version

4. 웹 서버 코드 다운로드

$ git clone http://github.com/rmfpdlxmtidl/moigosa
$ cd moigosa

미리 만들어 둔 GitHub의 웹 서버 소스 코드를 다운로드 받습니다.

5. 환경 변수 설정

$ vi .env.local

위 명령어를 입력해 .env.local 환경 변수 설정 파일을 생성하고 아래 내용을 입력한 후 저장합니다.

NEXT_PUBLIC_BACKEND_URL=   # API 서버 접속 URL

NEXT_PUBLIC_BACKEND_URL은 예를 들면 http://192.168.56.105:4000와 같이 입력합니다.

6. 웹 서버 프로세스 실행

$ yarn
$ yarn build
$ yarn start

yarn 명령어를 통해 웹 서버를 구동하는데 필요한 외부 JavaScript 라이브러리를 설치합니다.

그리고 package.json에 등록된 yarn 스크립트 중 build와 start를 순서대로 실행합니다. yarn build 명령어를 통해 소스 코드 중 필요없는 코드를 제거하고 이름이 긴 변수를 난독화하는 작업 등을 통해 용량이 최적화된 빌드 결과물을 생성합니다. 그리고 yarn start 명령어를 실행하면 웹 서버 프로세스가 3000번 포트에서 실행됩니다.

7. 브라우저로 접속

웹 서버 환경에서 Firefox를 실행하여 http://localhost:3000 에 접속하여 웹 서버가 정상적으로 구축되었는지 확인합니다.

만약 각 서버마다 사설 IP를 설정했다면 위 그림과 같이 타 OS 브라우저에서 http://192.168.56.104:3000 (웹 서버 사설 IP)로 접속해도 웹사이트를 볼 수 있습니다. 그리고 만약 API 서버를 이미 구축했고 접속이 가능하다면 오른쪽 상단에 회원가입과 로그인 페이지로 갈 수 있는 링크가 나타납니다. 하지만 API 서버에 접속할 수 없다면 오류라고 표시됩니다.

API 서버

구축 환경

• Virtual Box 6.1
• Ubuntu 20.04 LTS
• Git 2.31
• Node 14 LTS
• Yarn 1.22

구축 방법

1. VM 생성

Virtual Box를 이용해 Ubuntu 20.04 OS 기반의 새로운 VM을 만들어 줍니다.

2. 프로그램 설치

웹 서버 구축 때와 마찬가지로 Git, Node.js, Yarn 설치가 필요합니다. 웹 서버 구축 방법 - 프로그램 설치에 있는 대로 똑같이 설치해주세요!

3. 프로그램 설치 확인

$ git --version
$ node --version
$ yarn --version

터미널을 실행하여 다음 커맨드를 입력하여 필요한 모든 프로그램이 설치되어 있는지 확인합니다.

4. API 서버 코드 다운로드

$ git clone http://github.com/rmfpdlxmtidl/moigosa-backend
$ cd moigosa-backend

미리 만들어 둔 GitHub의 API 서버 소스 코드를 다운로드 받습니다.

5. 환경 변수 설정

$ vi .env 

위 명령어를 입력해 .env 환경 변수 설정 파일을 생성하고 아래 내용을 입력한 후 저장합니다.

COOKIE_SECRET=        # 랜덤한 아무 값으로

POSTGRES_HOST=        # DB 서버 IP 주소
POSTGRES_DB=          # DB 서버에 생성한 데이터베이스 이름
POSTGRES_USER=        # DB 서버에 생성한 사용자 이름
POSTGRES_PASSWORD=    # DB 서버에 생성한 사용자 비밀번호

JWT_SECRET_KEY=       # 랜덤한 아무 값으로

PORT=4000             # API 서버를 4000번 포트에서 실행하겠다는 의미

6. API 서버 프로세스 실행

$ yarn
$ yarn start

마찬가지로 yarn 명령어를 통해 웹 서버를 구동하는데 필요한 외부 JavaScript 라이브러리를 설치합니다. 그리고 package.json에 등록된 yarn start를 실행해 4000번 포트에 API 서버 프로세스를 실행합니다.

Connected to the PostgreSQL server

이미 DB 서버를 구축했다면 위와 같은 메시지가 출력되고, 그러지 않은 경우 접속 거부 오류가 출력됩니다.

7. IP 허용·차단 설정

$ su -  # root로 접속
$ vi /etc/hosts.allow

# /etc/hosts.allow
sshd : (웹 서버의 사설 IP)

API 서버 OS에 root 계정으로 접속하여 /etc/hosts.allow 파일의 설정을 위 그림과 같이 변경해줍니다. 오픈 API가 아닌 이상 API 서버는 웹 서버만 접속하는 것이 보안상 좋으니까 sshd를 웹 서버의 IP 주소로 설정합니다. 위 설정을 완료하면 이제 이 API 서버에는 해당 IP를 가지는 웹 서버만 접속할 수 있습니다.

$ vi /etc/hosts.deny

그리고 /etc/hosts.deny 파일도 위 그림과 같이 맨 아래에 sshd : ALL을 추가해서, /etc/hosts.allow 파일에서 지정한 IP(웹 서버) 주소를 제외한 모든 IP의 접속이 불가능하도록 만들어 줍니다.

DB 서버

구축 환경

• Virtual Box 6.1
• Ubuntu 20.04 LTS
• PostgreSQL 12

구축 방법

1. VM 생성

Virtual Box를 이용해 Ubuntu 20.04 OS 기반의 새로운 VM을 만들어 줍니다.

2. 프로그램 설치

DB 서버를 구축하는데 필수적인 프로그램을 설치해줍니다

$ sudo apt -y install update
$ sudo apt -y install upgrade

원활한 설치를 위해 Ubuntu 패키지 관리자를 업데이트 합니다.

$ sudo apt update  
$ sudo apt install postgresql postgresql-contib

업데이트 완료 후 최신 버전의 PostgreSQL을 설치합니다.

3. postgres 계정으로 접속

$ sudo -i -u postgres
$ psql

만약 psql로 접속이 되지 않는다면, $ sudo -u postgres psql 명령어로 접속합니다.

4. 사용자 계정 생성

postgres$ alter user 사용자이름 with encrypted password '비밀번호';
postgres$ create database DB이름;
postgres$ grant all privileges on database DB이름 to 사용자이름;

PostgreSQL에서 사용할 사용자 이름과 비밀번호를 입력해 계정을 생성하고, 새로운 데이터베이스를 생성한 후 이 데이터베이스의 모든 권한을 방금 생성한 계정에 부여합니다.

$ psql -h localhost -U 사용자이름 -d DB이름

그리고 ctrl+z로 psql에서 빠져나온 후 다시 psql을 사용해 방금 생성한 계정 및 DB로 접속합니다.

5. 테이블 생성

create table "user"(
   id bigint PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
   creation_date timestamptz NOT NULL DEFAULT NOW(),
   modification_date timestamptz NOT NULL DEFAULT NOW(),
   email VARCHAR(64) UNIQUE NOT NULL,
   password_hash VARCHAR(128) NOT NULL,
   name VARCHAR(32) NOT NULL   
);

create table test_result (
   id bigint PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
   creation_date timestamptz NOT NULL DEFAULT NOW(),
   test_id int NOT NULL,
   user_id bigint NOT NULL REFERENCES "user" ON DELETE CASCADE
);

create table question_answer(
   id bigint PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
   creation_date timestamptz NOT NULL DEFAULT NOW(),
   question_id int NOT NULL,
   answer int NOT NULL,
   is_correct boolean NOT NULL,
   test_result_id bigint NOT NULL REFERENCES "test_result" ON DELETE CASCADE
);

서비스에서 사용할 테이블을 생성합니다.

6. 테이블 ERD

7. IP 허용·차단 설정

$ su -  # root로 접속
$ vi /etc/hosts.allow

sshd : (API 서버의 사설 IP)

DB 서버 OS에 root 계정으로 접속하여 /etc/hosts.allow 파일의 설정을 위 그림과 같이 변경해줍니다. 데이터베이스는 API 서버만 접속하는 것이 보안상 좋으니까 sshd를 API 서버의 IP 주소로 설정합니다. 위 설정을 완료하면 이제 이 DB 서버에는 해당 IP를 가지는 API 서버만 접속할 수 있습니다.

$ vi /etc/hosts.deny

그리고 /etc/hosts.deny 파일도 위 그림과 같이 맨 아래에 sshd : ALL을 추가해서, /etc/hosts.allow 파일에서 지정한 IP(API 서버)를 제외한 모든 IP의 접속이 불가능하도록 만들어 줍니다.