[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 배포 (서버: Koyeb, 프론트: vercel)

진행 중인 프로젝트의 기본적인 기능이 모두 마무리되어 배포를 해보기로 했다.

 

🎍 백엔드 서버 배포

😀 서버 배포 서비스 결정

전에 Heroku를 이용해 서버 배포했다가 과금 맞은 경험이 있었기에(Heroku는 완전히 유료전환되었다고 한다. 전에 그것도 모르고 강의에서 하라는 대로 Heroku에서 배포했더니 일주일 남짓한 기간 동안 배포한 비용을 지불하게 되었다....😂) 찾아보니 Heroku의 대체 배포 서비스로 Koyeb과 fly.io가 유명한 것 같다.

 

fly.io는 도커를 이용해서만 배포가 가능한데 Koyeb은 깃헙 레파지토리를 연결해서 간단히 배포가 가능하다고 한다.

나는 도커를 한 번도 사용해 본 적이 없어 도커를 사용하려면 또 도커를 배워야 하는데... 서버 배포와 도커 사용은 내게 있어 우선순위가 아니었기에 간편한 Koyeb을 사용하기로 했다.

 

그런데 Koyeb을 이용해 배포를 해보니 문제가 하나 생겼다.

나는 레파지토리 안에 백엔드, 프론트엔드 폴더를 같이 두고 작업했는데 Koyeb에 배포하기 위해서는 기존 레파지토리를 프론트엔드/백엔드 레파지토리로 나누어야 했다. 백, 프론트를 함께 넣은 레파지토리를 등록했더니 갖가지 오류가 떴기 때문. 

처음에는 레파지토리 분리 없이 배포 가능한 방법을 찾아보려 했는데 Koyeb이 아직 Heroku처럼 유명한 서비스가 아니다 보니 대처할 문서를 찾는 것도 어렵고 해서 결국 레파지토리를 분리하기로 했다.

 

📁 레파지토리를 백엔드 / 프론트엔드 레파지토리로 분리하기

• https://tinyurl.com/2ysypktw
• https://ashortday.tistory.com/58

위의 두 개 블로그를 참고해서 분리했다.

 

master 브랜치 -> main 브랜치 

분리 도중 main 브랜치가 master로 바뀌는 현상이 발생해서, master 브랜치로 우선 push 한 뒤에 master 브랜치의 커밋 내용을 main 브랜치에 모두 덮어씌웠다. 이런 식으로 main 브랜치에 기존에 등록했던 커밋들을 되살릴 수 있었다.

 

https://velog.io/@lecharl/master-main-%EA%B0%95%EC%A0%9C-%EB%B3%91%ED%95%A9

master -> main 강제 병합?

 

위 블로그의 내용을 참고하여 병합하였고, 최종적으로 이제 더 이상 사용하지 않을 master 브랜치는 아래 명령어를 이용해 삭제해 주었다.

git branch -d master

 

레파지토리 분리 및 master->main 강제병합 전체 코드

$ git subtree split -P backend -b be
$ mkdir ../Web-Social-Account-Book-backend
$ cd ../Web-Social-Account-Book-backend

$ git init
$ git pull ../Web-Social-Account-Book/ be
$ git remote add origin 새로 분리할 깃허브주소.git
$ git push -u origin master

$ git branch main master -f
$ git checkout main
$ git push origin main -f
$ git branch -d master

 

🎉 Koyeb 배포

Koyeb 배포는 아래 블로그를 참고했다.

Node.js(express) koyeb에 배포하기

 

나의 경우 npm start와 같은 옵션 지정은 안 했다.

위의 블로그를 그대로 따라 해서 만들었더니 `heroku 어쩌구` 하는 에러가 뜨면서 자꾸 빌드에 실패해서 결국 Koyeb 배포 기본 app을 모두 지우고 처음부터 전부 다시 만들었다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js",
    "dev": "nodemon app.js"
  },

스크립트에 문제가 있어 배포에 실패할까 봐 위와 같이 스크립트도 수정했다.

그랬더니 빌드에는 성공했다.

이제 인스턴스 실행만 하면 되는데 시간이 굉장히 오래 걸린다. 

환경 변수를 넣는 것도 잊지 말아야 한다.

 

🎡 배포된 백엔드 API 서버

https://accountbook-dongdongss12.koyeb.app/api/

 

 

🎍 프론드엔드 서버 배포

프론트는 vercel을 이용해 배포했다.

배포과정이 서버 배포보다 훨씬 간단했다. 무엇보다 vercel 배포 시에는 관련 레퍼런스가 많아서 참고하기 좋았다.

빌드 및 배포 명령어 설정을 해주는 데 있어 시행착오가 좀 있긴 했지만(기존에 yarn으로 프로젝트를 실행하던 적이 있어서 yarn 관련 코드를 완전히 정리하는 과정을 거쳤다) 배포를 완료했다. 빌드 환경설정은 나의 경우 아래와 같이 명령어를 등록해 주었더니 문제없이 배포 및 실행이 완료되었다.

 

🎡 배포된 프론트엔드 주소

https://social-account-book-frontend.vercel.app/

소셜 가계부

 

🔨 환경변수 설정

당연히 이대로 주소에 접속하면 프로젝트는 열리지 않는다. 기존 코드에서는 백엔드 주소가 'localhost:5000'으로 설정되어 있는데, 이는 내 로컬에서만 돌아가는 api endpoint 주소이므로, 이를 배포된 백엔드 서버 주소로 모두 변경해 주었다. 

const responseData = await axios.get(`${process.env.REACT_APP_BACKEND_URL}api/community`);

프론트엔드 프로젝트의 api 주소를 process.env로 불러오도록 하였다.

환경변수는 vercel 앱 배포 시에 등록할 수 있다. REACT_APP_BACKEND_URL  칸에 api 주소를 등록해 주었더니 백엔드와 완전히 연동이 가능해졌다.

 

 

💥 Error: 로그인 안됨 -> 서버 CORS 에러 수정

 

백엔드 > app.js

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", process.env.FRONT_END_URL); //배포한 프론트엔드 URL
  res.setHeader(
    ...
  );
  res.setHeader(...);
  next();
});

기존 백엔드 CORS 에러 처리 코드의 허용할 URL을 'localhost:3000'에서 배포한 프론트엔드 URL로 수정해 주었다.

환경변수로 .env에서 가져와 사용하게 하고, Koyeb 배포 환경설정에서 주소를 등록했다.

 

 

 

+ CORS 관련 에러를 찾아보다 CORS에 대해 잘 정리된 블로그 글이 있어서 가져와봤다.

CORS 가 뭔데 CORS 에러 어떻게 해결하는건데