그간 사정으로 인해서 미뤄왔던 일을 오늘 해치울 것이다!
오늘의 목표는 크게 3가지가 있다
1. NCP(Naver Cloud Platform)에 API Server(백엔드 서버) 올리기
2. NCP(Naver Cloud Platform)에 클라이언트 올리기
3. 배포한 웹에 도메인을 연결하고 SSL인증서 받기

여기서 사용하는 서버는 NCP의 VPC Server이다
다만 서버를 따로 둘 돈이 없기 때문에 백엔드서버와 클라이언트는 같은 서버에 올라갈 것이다 (ㅠㅠ 원래는 이렇게 하면 안되지만 어쩔 수 없다)
따라서 구조는 아래의 그림과 같은 형태이다

1. API Server 배포하기

API Server를 배포하기 위해서는 먼저 프로젝트 코드를 NCP의 Server에 올려야 한다 Server에 원격으로 접속해서 git으로 내려받아도 되지만 나는 그것보다 항상 하던 방법인 SCP가 편해서 SCP를 사용하여 코드를 Server로 전송시켰다
(참고로 SCP는 리눅스 기반 운영체제에서 사용하는 파일 전송 프로토콜이다)

위와 같은 명령어로 Server에 API Server 코드를 업로드하였다
이때 node_modules는 빼고 업로드하였다 (너무 용량이 크다...)
그래서 Server내에서 따로 npm install을 실행하여 node_modules를 생성하였다

NCP의 Server에 API Server 코드를 올려두었다면 배포의 절반은 한 것이다
이제 우리가 할 일은 코드를 PM2를 사용해서 실행하는 것이다

npm install -g pm2

위의 명령어를 통해서 pm2를 전역으로 설치한 다음, pm2.keymetrics.io/ 를 통해서 ecosystem.config.js 파일을 설정한다 ecosystem.config.js 파일은 프로젝트 루트에 만들어서 사용하는 것으로 pm2의 설정 파일이라고 생각하면 된다

그 후 ecosystem.config.js 파일 설정이 완료 되었으면

pm2 start [프로젝트 실행 파일]

위의 명령어를 통해서 프로젝트를 실행시키면 된다
그러면 API Server의 배포는 완료이다

2. Client 배포

Client를 배포하기 위해서는 먼저 Client 코드를 빌드해야한다

npm run build

위의 명령어를 사용하여 코드를 빌드한다
그리고 빌드의 결과물을 Server로 전송한다

이제 NCP Server의 공인 IP로 접속하였을 시 Client 페이지가 나오게 하기 위해서 nginx를 수정해야 한다

cd /etc/nginx/sites-enabled
vi default

위의 명령어를 통해 default 파일을 연다
그리고 파일을 아래와 같이 수정한다

server {
   listen 80;
   location / {
      root /프로젝트폴더의 위치/build;
      index index.html; //실행파일
      try_files $uri $uri/ /index.html;
   }
}

listen은 포트를 설정하는 것이다 (나같은 경우에는 그냥 80으로 했다)
root는 build된 파일의 경로를 적어주면 된다
index는 기본으로 시작할 인덱스 페이지를 설정해주는 것이고
try_files는 적힌 순서대로 파일을 찾겠다는 설정이다

그리고 nginx를 실행한다

시작 명령어

sudo service nginx start
sudo systemctl start nginx
sudo /etc/init.d/nginx start

재시작 명령어

sudo service nginx restart
sudo systemctl restart nginx
sudo /etc/init.d/nginx restart

중지 명령어

sudo service nginx stop
sudo systemctl stop nginx
sudo /etc/init.d/nginx stop

상태 확인 명령어

sudo service nginx status
sudo systemctl status nginx

설정 reload 명령어

sudo service nginx reload
sudo systemctl reload nginx
sudo nginx -s reload

설정 파일 문법 체크 명령어

sudo nginx -t

그러면 하단과 같이 배포된 Client를 확인할 수 있다!

아직은 도메인도 연결되지 않았고 SSL도 연결시켜두지 않아 공인 IP가 그대로 뜨는 상태에다가 옆에 주의요함 표시도 뜨는 상태이다

이제 다음 포스팅에서는 도메인을 연결하고 SSL을 설정할 것이다

여기까지 봐주신 분들 정말 감사합니다!
그리고 잘못된 부분에 대한 피드백은 항상 달게 받습니다

참고한 페이지들
웹 배포 : https://sihus.tistory.com/31
nginx 명령어 : https://harrydony.tistory.com/830