[새싹x코딩온] 웹 개발자 부트캠프 과정 1차 팀프로젝트 회고 #4 | 서버 배포

썸네일은 프로젝트 예시로 가장 많이 쓰인 토끼볼..!!

 

프로젝트를 완성하고 서버 배포를 하면서 겪었던 시행착오를 적어보려고 한다.

 

이번 1차 팀프로젝트에서는 네이버 클라우드 플랫폼을 이용해서 아이피를 할당받고, 서버를 배포했다.

서버를 배포했을 때 사용했던 도구는 네이버 클라우드 플랫폼 외에도 PuTTY와 FileZilla 다.

(집에서 배포를 시도했는데 집에서 사용하는 운영체제가 windows 라서 PuTTY를 사용했다. 맥OS는 PuTTY를 사용하지 않아도 되서 좀 더 편했다.)

 

1) 우선 네이버 클라우드 플랫폼 서비스를 통해 서버를 열고(ubuntu 서버로 열었다), 공인 아이피를 할당 받았다. 그리고 ACG 설정에서 우리 팀이 사용할 포트 번호와 MySQL 데이터 베이스에서 사용할 포트 번호도 열어주었다.(보통 데이터베이스는 3306을 열어준다고 한다)

 

2) PuTTY을 열고 할당받은 공인 IP 을 입력한 후 열어주었다.

 

3) 프로그램이 실행된 후, Apache 를 설치했다.

 

-> 이 과정까지는 이전에 개인 프로젝트를 진행했을 때 해봤기 때문에 순조로웠다.. 그러나 이전의 개인프로젝트는 html 파일이고 우리 팀 프로젝트는 node.js(엄밀히 따지면 express 와 ejs)를 사용했기 때문에 어떻게 해야하는지 헤맸다.

 

4) apache를 설치하면 원래 기본적으로 /var/www/html 경로의 index.html 파일에 접근해서 해당 파일을 열어준다고 한다.

하지만 우리는 ejs이기 때문에 경로를 바꿔줬다(근데 생각해보면 굳이 안바꿔줘도 되었을듯..)

아무튼 아래의 커맨드를 이용해서 접근하는 폴더의 구조를 바꿔주었다.

(/home/ubuntu 로 변경)

변경해주면 root가 저걸로 변경되기 떄문에 아이피 주소를 입력했을 때 저 경로에 있는 파일이 열린다.

FileZilla 로  /home/ubuntu 경로에 우리의 프로젝트를 넣어주었다.

sudo nano /etc/apache2/sites-available/000-default.conf$

5) node.js 를 사용해서 프로젝트를 구축했기 때문에 node.js 환경이어야 한다. 그래서 npm을 설치해줬다.

그리고 pm2 모듈을 이용한 무중단 배포를 위해서 node 버전이 14 이상으로 설치했다. (nvm 이용)

 

6) 데이터베이스를 MySQL 을 사용했기 때문에 MySQL 서버도 설치했다. 

그리고 .env 에 설정된 데이터베이스와 계정을 생성했다.

 

7) 프로젝트를 실행하기 위해 pm2 를 설치하고 pm2를 이용해서 프로젝트를 실행했다.

그런데 아이피 주소를 입력해도 홈페이지가 뜨지 않아서 에러 로그를 확인했다. 

 

8) 원인을 알 수 없어서 chat gpt 에도 물어보고 구글링도 해서 찾아보니 mysql 접근 문제라고 했다.

sudo vim /etc/mysql/my.cnf

그래서 위의 커맨드를 입력했다.

입력하면 아래의 항목들이 나오는데

bind-address = 127.0.0.1

mysqlx-bind-address = 127.0.0.1

 

mysql 서버를 실행할 때 로컬에 있는 곳으로 접근해서 할당받은 아이피로 접근이 안되는 거일수도 있다고 했다.

그래서 위의 두개를 주석처리하고 서버를 재실행했다

 

9) 그래도 안되서 다시 검색하고.. 구글링을 했다. 분명히 acg 설정에서 3306포트를 열어줬는데 안되서 찾아보니

ubuntu 내부에서 3306에 대한 방화벽 설정 변경을 해야하는 경우도 있다고 했다.

처음에는 아래의 커맨드로 시도를 했다. (아 물론 저 --dport 부분 뒤랑 ACCEPT 부분 쪽의 숫자를 바꿔줌)

iptables -I INPUT 1 -p tcp --dport 12345 -j ACCEPT

ㅎㅎ.. 실패했다 

 

10) 다시 찾아보니 ufw 라는 커맨드가 있다고 했다 

ufw allow <port>

저 <port>라고 써져있는 곳에 3306, 그리고 우리 팀이 사용한 포트번호를 입력하고 서버를 재실행했다.

 

 

11) 아래와 같이 테이블들이 만들어졌다는 로그가 나왔다!

그래서 아이피를 입력해봤다!

엥..? 왜 이거가 나오는겨??

이게 떳다. 울뻔했다. 근데 당연했다. 뒤에 포트번호를 안입력해줬다.

 

포트번호를 입력했더니 짜잔⭐ 

웹사이트가 정상적으로 실행됐다!(물론 위의 데이터들은 웹사이트 실행을 확인하고 데이터가 제대로 넣어지는지 확인하기 위해서 넣은 것이다! 데이터도 정상적으로 넣어졌다!!)

 

12) 웹사이트도 정상적으로 작동하고 아무 문제 없는 줄 알았다.

그런데 이게 무슨일이지 발표를 끝내고 깃허브 레포지토리에 리드미 파일을 작성하고 있는데 

갑자기 다른 팀원분이 로그인이 안된다고 하셨다. 확인해봤다..

로그인이 되면 환영합니다! alert 창이 뜨고 로그인 상태로 변경이 안되었다 session을 확인해봤다 session자체가 생성이 안되었다.. 이럴수가!!!!

 

13) 근데 내심 아 발표때 이 문제가 발생하지 않아서 다행이다 싶었다. 하지만 내가 로그인 파트를 맡았는데 로그인이 갑자기 되지 않다니 너무 속상해서 고치고 싶었다. 

 

14) 결론적으로는 고쳤다. 

session이 생성안되는 문제는 내가 session 설정을 잘못해줬기 때문이었다. 

const today = new Date()
const expireDate = new Date()
expireDate.setDate(today.getDate() + 1)

app.use(session({
  secret :process.env.COOKIE_SECRET, 
  resave : false, 
  saveUninitialized : false, 
  cookie : {
    httpOnly :true,
    secure : false,
    expires : expireDate
}
  
}))

원래는 위처럼 세션 설정을 할때 date 객체를 넣어줬다. 문제 없이 잘 되길래 저래도 되는 줄 알았다.

그런데!!! date 객체로 쓰면 저 값이 string 으로 넘어가기 때문에 문제가 발생할 수도 있다고 했다. (ㅎㅎ.. 발생했다 )

그래서 다시 바꿔줬다

app.use(session({
  secret :process.env.COOKIE_SECRET, 
  resave : false, 
  saveUninitialized : false, 
  cookie : {
    httpOnly :true,
    secure : false,
    maxAge : 24 * 60 * 60 * 1000
}
  
}))

다시 밀리초 기준단위의 숫자값을 넣어주고 서버를 재실행했다. 문제가 다행히 고쳐졌다.. 휴..