[쿠션] Naver Cloud Platform 배포 (React) - ① 서버 생성 및 접속 편

1. 개요

쿠션은 포텐데이 X 클로바 스튜디오 해커톤을 진행하며 만들어진 서비스로, 해커톤 고도화 과정까지 운영되다가 1차 지원금을 모두 사용함과 동시에 과금이 발생하면서 무려 6개월 동안 중단되어 있었다. 😱 기능 볼륨이 엄청 크지는 않다보니 화려하지는 않지만, 정말 잘 만들어진 서비스라고 생각했고 반년이 지난 지금 서비스를 되살리고 싶어서 백엔드 분들께도 재배포를 제안드렸다. 게다가 해커톤 고도화를 위해 받은 크래딧 70만 원이 소중하게 한 푼도 쓰지 않고 남아 있었다.... NCP로 재배포를 하지 않을 이유가 없잖아? 😳

1. 대화 내용

말씀드리자마자 모든 팀원 분들이 회의 가능한 시간 조율에 들어가기 시작했고, 정말 빠르게 회의를 잡았다. 개인적인 욕심이었는데 다들 적극적으로 참여해 주셔서 너무 감사하고 기뻤다. 쿠션 팀 최고...... ㅜㅜ

2. 도메인 잘 살아 있는지 확인

나는 가비아에서 도메인을 구매했었고, 아주 잘 살아 있는 것을 확인할 수 있었다. 만약 구매한 도메인이 없다면 가비아에 상시 할인 중인 도메인이 많고, 본격적인 서비스를 위한 도메인이 아니라면 가장 저렴한 걸로 구매해도 상관은 없다고 생각한다.

2. 배포 시작

1. 서버 생성

1. Global DNS 생성

네이버 클라우드 플랫폼에서 VPC > Global DNS로 이동하면 레코드를 생성할 수 있다. 가비아에서 구매한 도메인 이름을 작성해 주고, 설명은 굳이 적지 않아도 괜찮지만 레코드를 여러 개 생성할 거라면 혼동 방지를 위해 간략하게라도 작성해 두는 게 좋다.

도메인 추가를 완료하면 아래처럼 기본적인 레코드가 생성되는데, 회색 박스로 가려 둔 부분에 적혀 있는 네임 서버를 가비아 도메인 관리 > 네임 서버에 추가해 주면 된다. 참고로, Master NS를 보면 두 네임 서버의 끝에 있는 온점은 빼고 입력해야 한다. 이걸 입력했다가 도메인 등록이 안 돼 삽질을 하루 내내 했던 과거의 기억이 있다....... 😅

그리고 추가적인 사용이 필요한 레코드는 레코드 추가 버튼을 클릭해 아래처럼 추가할 수 있다. 여기에는 가비아에 생성해 둔 레코드를 그대로 가져오면 되고, 공백란에 서버 공인 IP라고 작성해 둔 곳에는 말 그대로 퍼블릭 IP 주소를 할당해 주면 된다. 퍼블릭 IP에 대해서는 서버 생성 목차에서 다룰 예정이다. 🔥

1-1. 도움될 만한 사이트

DNS 연결이 정상적으로 됐는지, 확인하고 싶으면 여기서 확인할 수 있다. 도메인 이름을 입력하면 어느 국가에서 우리 서버가 돌아가는지 확인 가능하다.

2. VPC 생성

나는 classic 서버가 아닌 VPC 서버를 사용했기 때문에 서버를 생성하기 전 VPC 생성이 필수적이었다. NCP에서는 VPC를 아래처럼 설명하고 있다.

VPC는 VPC > VPC Management에서 생성 가능하며, 아래와 같이 필요한 내용을 입력하면 된다. IP 주소 범위는 추후 수정이 불가능하기 때문에 신중하기 작성할 것을 NCP VPC 생성 방법 가이드에서 권장하고 있다. 나는 소규모 네트워크에서 서버를 다룰 거기 때문에 192.168.0.0로 지정해 줬다. 💪🏻

3. ACL 생성

VPC > Network ACL > ACL Rule에서 생성 가능한 우리의 보안을 열심히 관리해 줄 친구다. 배포까지 오게 됐다면 방화벽 인바운드, 아웃바운드 개념에 대해 아주 조금은 알고 있을 텐데 그걸 관리해 주는 친구라고 생각하면 된다. 👍

4. Subnet 생성

VPC > Subnet Management에서 생성할 수 있다. 앞에서 생성한 VPC와 ACL을 추가해 주고 필수 항목을 입력해 주기만 하면 서버 생성 준비는 모두 완료된다. 아직 반절도 안 왔다니...... 🥵

5. Server 생성

가장 익숙한 Ubuntu 22.04-base 서버를 선택해 주었다.

서버 설정 시에는 생성해 뒀던 VPC와 Subnet을 연결해 주면 된다. 서버 스펙은 보유 중인 크래딧이 4월 30일까지 만료되기 때문에 크래딧 소진을 위해 standard를 선택했는데, 처음 NCP를 사용하시는 분들은 micro를 추천한다. 다른 서버들에 비해 느리긴 하지만, 일 년이나 무료로 사용 가능하기 때문! 소규모 프로젝트라면 넉넉하게 사용할 수 있을 듯하다.

스토리지 설정은 기본값으로~

이후에 인증키 설정, 네트워크 접근 설정(ACG)을 완료하면 서버 생성이 완료되는데, 재배포이기 때문에 인증키와 네트워크 접근 설정은 첫 배포 시 생성해 둔 것들을 재사용했다. 👍 이때 필요한 인증키는 소중하게 가지고 있어야 한다. 잃어버리면 진짜진짜 큰일난다.

6. 공인 IP 생성

서버를 생성했다면 사람들이 접근할 수 있는 주소인 공인 IP를 생성해 서버와 연결해 줘야 한다. 서버가 생성되어 있다면 아래와 같이 간단하게 공인 IP를 생성할 수 있다. 다만, 이것도 약 월에 5000원 정도 과금되는 서비스라는 것을 유의해야 한다. 😱

2. 서버 접속

1. 터미널 서버 접속

드디어 서버 생성이 끝났다! 반절 정도 왔다고 생각하면 될 듯하다. 이제 생성된 서버를 ssh로 접근하기 위해 아래와 같이 입력하면 된다. 앞서 서버 생성 시 발급받았던 인증키 파일과 1-6에서 생성한 퍼블릭 IP로 접근하자.

 

서버 접속을 위한 관리자 비밀번호를 요구할 텐데, 이는 Server 옵션에서 관리자 비밀번호 확인을 통해 확인할 수 있다. :> 관리자 비밀번호까지 입력하면 서버 접속 완료!

ssh -i <인증키.pem> root@<공인 IP>

사실, 여기서 가장 큰 삽질을 했던 부분이 과연 퍼블릭 IP로 접근해도 보안상의 위험이 없을까?였다. 그래서 NCP 서버 접속 관련 공식 문서를 샅샅이 찾아보니 아래와 같이 공식적으로 퍼블릭 IP를 통해 접속하라고 안내하고 있어 안심하고 서버 접속을 진행했다.

 

사실 이러면 안 되는 줄 알고 두 번이나 서버를 엎었다...... 삽질 정말 제대로 했다

2. 서버 환경에 필요한 패키지 설치

서버로 접속하면 우리가 처음 개발을 시작했을 때처럼 백지의 상태라고 이해하면 된다. 그렇기 때문에 우리의 프로젝트 빌드에 필요한 패키지들을 모두 설치해 줘야 한다. 나 같은 경우는 리액트 프로젝트를 배포하기 위해 아래와 같은 패키지들을 설치해 줬다. 🔥

# react 프로젝트 배포를 위해 nodejs와 패키지 매니저 npm 설치
> sudo apt install nodejs npm

# 설치된 버전 확인
> node -v
> npm -v

# 해당 프로젝트에서는 패키지 매니저로 yarn을 사용했기 때문에 추가 설치
> npm install --global yarn

# git 사용하기 위해 설치
> sudo apt install git

3. 배포할 repository clone

아래 명령어를 입력하면 서버에 우리 프로젝트를 클론할 수 있게 된다. git clone은 프로젝트 작업을 조금이라도 해 봤다면 되게 낯익을 텐데, 그걸 똑같이 서버에서 해 주는 것이다. 🔨

> git clone <repository URL>

# 실제 예시
> git clone https://github.com/Cushion-Dev/Cushion-FE.git

4. clone이 완료된 repository directory로 이동 후 main branch로 이동

클론이 완료되면 프로젝트 디렉터리가 생성될 텐데, 그 디렉터리로 이동 후 배포 브랜치로 현재 브랜치 위치를 변경하면 된다.

> ls
> cd <directory name>

> git fetch
> git branch -r
> git checkout -t origin/main

5. 환경변수 설정

프로젝트 진행 시 사용했던 환경 변수 파일이 있을 텐데, 그 파일 내용을 그대로 서버에도 가져와 준다. 안 가져오면 서버가 환경 변수를 읽지 못해 프로젝트를 영원히 실행시키지 못하게 된다......

> nano .env

# nano 편집기가 열리면 개발 환경에서 사용하던 환경 변수 파일(.env) 내용을 그대로 옮겨 주면 됨
# 편집 완료되면 control + O (저장) → control + X (닫기)

# 외에도 .gitignore에 추가해 둔 파일이 있다면 추가적으로 작성해 줘야 함
# e.g. nano config.json 

6. 프로젝트 실행

아래와 같이 명령어를 입력하면 프로젝트 실행이 완료된다. 프로젝트에 필요한 패키지들을 설치하고 배포를 위해 빌드한 다음, 프로젝트를 실행하는 것!

> yarn install
> yarn build
> yarn dev

7. 서버 백그라운드에서 실행

근데 사실, 위와 같은 방식으로 진행하게 되면 터미널을 매일 켜 놓고 있어야 하는 불편함이 생긴다. 자칫 실수로 터미널을 끄기라도 하면 클라이언트 서버가 그대로 꺼지면서 사용자들이 서비스에 접근할 수 없게 되는 대참사가 발생할 수 있다. 😱 이를 방지하기 위해 나는 pm2라는 프로세스 매니저를 사용했다!

# pm2 설치
> npm install pm2 -g

# pm2로 프로젝트 실행
> pm2 start yarn --name "project-name" -- dev

# 프로젝트 package.json 파일의 name 부분을 작성
> pm2 start yarn --name "cushion-front" -- dev

여기까지 완료했다면 공인 IP로 서비스에 접근 가능할 테지만, 앞서 도메인을 구매했고 DNS까지 모두 설정한 상태이기 때문에 도메인 적용을 안 할 수가 없지 않은가...... 🥵 게다가 서비스 재배포가 목표였기 때문에 포트포워딩을 진행해 보기로 했다. nginx로 진행할 텐데 글이 너무 길어져서 다른 글로 작성해 보려고 한다.

 

오랜만에 진행해 본 NCP 배포인데 거의 반년 만에 기록해 둔 자료 없이 하느라 정말 많이 헤맸다. 제일 중요한 건 기록..... 명심 또 명심하자! 📝