배포 시작부터 완료까지 모두 기록하기

그동안 미뤄왔던? 아니 겁나서 시도도 못했던 배포를 이참에 해버렸따!!!

이런 저런 이유로 이제는 배포를 해야 했고 이전부터 여러 이유로 네이버 클라우드를 사용하기로 했었기 때문에 망설임 없이 네이버 클라우드로 들어갔다. micro 서비스 (1년 무료)를 제공하고 있었던 것을 알고 있었기 때문에 초반에 내가 제공하는 서비스가 얼마나 많은? 사용자가 있을지 알수도 없기 때문에 무료로 써보려고 mirco로 서버를 개설했는데 와... 사양이 사양이... 램이  1GB인데 이게 이정도 인줄은 몰랐다. 

다른 블로그 글에서도 쓰기 힘들거다라는 정도의 글을 보긴 했었지만 다 설정 마치고 git 연동해서 clone 하고 필요한 것들 npm install 하는데 자꾸 killed 라는 메시지가 찍히는것. 알고 봤더니 계속 감당이 안돼서 프로세스가 죽으면 killed 메시지가 뜬다고 하더라... 결국 처음에는 부분부분 나눠서 install 하는데 아무리 작은 라이브러리들을 쪼개서 install 해도 다 죽음... 도저히 안돼서 적당한 사양으로 유료로 시작함... 

그렇게 서버 개설하고 이전에는 포트 포워드 해주고 다 설정해줬어야 하나본데 지금은 다 네이버 클라우드 쪽에서 알아서 해주나보다 따로 건들여줄 부분이 없다.

 

그렇게 첫번째 고비가 온다... nginx 붙이고 프론트 단 그러니까 정적 페이지는 문제 없이 띄웠다 금방. 

근데 백엔드 쪽 띄우는데 이제 그쪽부터 포트 달라지니까 CORS 에러 발생하고 

 

일단은 어차피 nginx 쪽의 CORS 설정이 먹혀야 하기 때문에 nginx의 conf.d 내 default.conf 파일에서 CORS 설정을 해줘야 한다. 처음에 헷갈렸던거는 nginx.conf 파일은 nginx 설정파일이다. 첨에 뭣도 모르고 이쪽에 CORS 설정을 해줌.... 

 

server {
    listen 80;
    server_name 223.130.130.53;

    root /project/build;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;  # 정적 페이지 띄우도록 하는 부분
    }

    location /api/ {
        proxy_pass http://localhost:8002;  # 8002 포트로 연계
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /socket.io/ {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://localhost:8002;  # 8002 포트로 연계
    }

    location /static {
        alias /meorla/build/static;
        add_header 'Access-Control-Allow-Origin' '*' always;  # CORS 설정
    }

    error_log /var/log/nginx/error.log warn;
    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;

    location = /404.html {
        internal;
    }

    location = /50x.html {
        internal;
    }
}

설정 파일은 이런식으로 해주면 되고 

 

설정하고 난 뒤에는 꼭 

sudo nginx -t   # 테스트
sudo systemctl restart nginx  # nginx 재시작

명령어를 실행해 줘야 한다. 

 

그리고 프로젝트 경로 내에 pm2를 설치해 놓으면 

pm2 start server/index.js --name [하고 싶은 name]

으로 설정해 놓으면 후에 pm2 start name이나 pm2 restart name 으로 간편하게 시작시켜줄수 있다. 

 

내가 좀 부족하게 알았던 부분 중에 이때 알았던 부분 중 하나가 수정을 하고 배포에 반영할때 npm run build를 항상 해줬었는데 꼭 build는 시간을 많이 잡아 먹어서 이게 꼭 항상 필요한 부분인가 싶어 찾아보니 

프론트엔드 쪽 코드가 바꼈다면 npm run build를 해줘야 하고 서버쪽 로직이 수정됐다면 pm2로 시작이나 재시작만 해줘도 되고 

혹시 package 정보가 변경됐다면 npm run build를 해줘야 한다는 것을 알게 됐다. 

 

추가적으로 계속 수정을 하면서 pm2 logs로 포트가 변경되는걸 확인하면서 수정하고 있었는데 분명 수정을 해서 포트가 바꼈는데 바뀌기 전의 포트가 계속 찍혀 있길래 반영이 안된줄 알고 뻘짓을 엄청 했는데 알고 보니 이전 로그가 계속 남아 있던 거였다...

pm2 flush

명령어는 이전 로그 clear 해주는 명령어이니 혹이 이전 기록들이 남아있는것 같다 싶으면 한번 클리어 해주고 하면 될듯

 

오류 수정하기 급급해서 일단 배포만 성공시키자 하다 보니 로컬과 배포에 구분이 없었다. 배포 다 성공 시키고 나서 로컬과 구분시키기 위해 찾아 보니 .env로 많이들 구분하는거 같더라. 

여러타입으로 많이 하는거 같은데 나는 간단히 기본 .env 는 내 로컬 설정 파일로 쓰고 .env.production 파일은 배포 설정파일로 사용하였고 각 파일에 맞는 프로퍼티값들 넣고 각 로직에 매핑해놓고 스크립트에 설정해 놓으면 배포할때 알아서 매핑해준다

정말 고통스럽기도 했지만 그 어느때보다 많이 성장한 것 같기도 하다!!