Next.js 프로젝트 배포하기

📖 목차

-  Next.js 프로젝트 Vercel로 배포하기

-  Flask 서버는 pythonanywhere로 배포하기

-  아직 완벽하지 않은 배포 상태

 

 

 

 

본격적인 리팩토링을 시작하기 전에, 지금까지 완성된 서비스를 배포시켜보기로 결정했다.

 

엘리스 AI트랙에서는 프로젝트 기간 동안 각 팀마다 VM을 하나씩 제공해주기 때문에 개발 완료 후 VM 환경에서 배포하여 서비스를 테스트해보긴 했지만 그 후로 VM은 종료되었다.

 

그래서 지금은 로컬 환경에서만 테스트가 가능한데 포트폴리오로 첨부하려면 아무래도 배포한 서비스가 있는게 좋을 것 같고, 로컬 개발환경과 배포 환경에서 나는 오류는 또 다르다는걸 프로젝트를 하면서 느꼈었기 때문에 본격적인 리팩토링에 앞서 먼저 배포에 도전해보았다.

 

그래도 아직 취업 전인데 유료로 비용을 들여가면서까지 배포하는 것을 원하진 않아서 무료로 사용할 수 있는 플랫폼들만 찾아보았다.

 

 

 

 

 

1️⃣  Next.js 프로젝트 Vercel로 배포하기

 

배포에 대해서는 정말 하나도 몰라서 성공할 수 있을지 걱정했는데 생각보다 어렵지 않아서 다행이었다.

(물론 간단한 토이프로젝트라 그랬겠지만..!)

 

Next.js로 만든 서비스를 배포할 수 있는 방법은 대표적으로

 

1)  Netlify를 이용하는 방법

2)  Vercel을 이용하는 방법

3)  Github page를 이용하는 방법

 

이 있는데 아래 블로그에 자세하게 비교, 정리해놓은 글을 참고하면 어떤 것을 선택하면 좋을지 생각해볼 수 있다. 👍👍

🚀 nextJS 뭘로 배포할까? (Netlify, Vercel, Github page)

 

 

나는 가장 간단하기도 하고, 배포할 페이지가 별로 크지 않기 때문에 Vercel로 배포하는 방법을 선택했다.

 

배포하는 과정은 크게 어려운 점은 없었는데 내 프로젝트의 경우에는 루트 디렉터리가 next가 아니라 flask와 next로 나누어져 있어서 배포할 next의 루트 디렉터리를 next 폴더로 지정해주었고, .env 파일에 있는 환경변수들은 Environment Variables탭에 입력해주었다.

 

그리고 내가 처음 참고했던 블로그는 Build Command를 next build && next export라고 작성해서 사용했는데 나는 이렇게 따라하니 deploy 시 오류가 발생했다. 오류를 캡쳐안하고 넘겨서 오류메세지가 자세하게 기억나진 않지만 page가 어떠어떠해서 next export를 사용할 수 없다라는 내용의 오류였는데 Build Command를 직접 지정해주지 않고 기본값인 next build로 진행했더니 배포가 성공적으로 완료되었다.

 

처음 배포하고 환경변수를 변경해야 했었는데 변경하는 곳을 못찾아서 배포한걸 삭제하고 새로 배포를 했는데 해당 프로젝트의 Settings탭에서 변경할 수 있었다..😅

 

도메인 주소를 자동으로 3개를 제공하는데 셋 중에 짧은 주소도 제공을 해줘서 굳이 도메인은 바꾸지 않고 그대로 사용하기로 했다.

 

 

💜  배포한 바디토리 서비스 URL

bodytory-ruddy.vercel.app

 

 

당장은 Vercel로 간단한 배포만 도전해본 것이라 쉬웠을 수도 있지만, 앞으로도 토이 프로젝트를 진행하게 되면 배포하는 과정에 너무 겁먹지 말고 차근차근 시도해봐야겠다.

 

 

 

---

+) 4월 17일 추가 내용

 

pages 폴더 안에 페이지 구성 요소 외의 컴포넌트나 API등이 있으면 안된다 →  Next.js에서 pages 구조를 기반으로 라우팅을 하기 때문!

 

참고  :  🔗 Next js Vercel 에서 배포하는 도중 만난 오류

 

지금 내 프로젝트에도 pages 폴더 안에 api와 auth가 포함되어 있는데 이 부분 공식문서를 좀 더 보고 수정해야할 리스트에 추가해야겠다.

 

그리고 next build와 next export가 어떤 차이가 있는지 찾아본 글에 따르면,

next build는 Next.js의 기본적인 SSR 페이지 생성 방식으로 .next 폴더에 production application을 빌드한다. next build는 next start나 next export를 하기 위한 선행 과정이다.

 

build 후 next start를 하면 하이브리드 페이지를 지원하는 Node.js 서버를 시작하여 정적으로 생성된 페이지와 서버 측에서 렌더링된 페이지를 모두 제공한다.

 

build 후 next export를 하면 모든 호스트에서 제공할 수 있는 정적 HTML 파일로 모든 페이지를 낸다. 이는 create-react-app과 매우 유사하지만, pre-rendering을 위해 전용 메소드를 사용하여 여전히 build-time에 정적생성을 할 수 있다는 차이점이 있다.

 

참고  :

🔗 Next.js build, export

🔗 stack overflow

 

 

 

 

 

 

2️⃣  Flask 서버는 pythonanywhere로 배포하기

 

사실 이 프로젝튼느 Next.js만 배포했다고 끝이 아니라 Flask 서버를 배포해야하는 일이 남아있다..😮

Flask 서버가 배포가 잘 안되면 기록이 작성되지않고, 키워드 추출, 진료과목 추천 등 주요 서비스를 제대로 경험해볼 수 없다.

 

프로젝트 내에서 Flask 서버는 페이지나 별도의 UI없이 api 요청이 들어오면 키워드를 추출하는 함수, 진료과목을 추천하는 함수를 실행해서 나온 결과값을 보내주기만 하면 되는 역할을 한다.

 

우선 무료로 flask 서버를 배포할 수 있는 플랫폼을 찾아보니까 대부분 pythonanywhere가 많이 나왔다. python에 특화된 웹 호스팅 서비스인데 무료 계정도 하나의 webapp을 무료로 다룰 수 있다고 해서 시도해보았다.

 

Web탭에서 내가 만드려는 옵션에 맞게 새로운 웹앱을 생성할 수 있다. 내 프로젝트에서는 python 3.11버전을 사용했는데 선택할 수 있는 옵션은 3.10까지라 3.10을 선택해서 진행했는데 큰 문제는 없었다.

 

웹앱을 만들고 Files탭에서 필요한 파일들을 업로드하면 된다. 이 때, 실행파일의 이름은 무조건 flask_app.py로 변경해주어야 한다. 내 경우는 main.py를 flask_app.py로 바꿔주었다. 그리고 실행에 필요한 다른 파일들로 업로드 완료해주고 Reload 버튼 클릭 후 페이지가 잘 열리는지 확인해보는데 오류가 발생하였다.

 

내 Flask 웹앱은 페이지가 없으니 404 NOT FOUND라도 떠야하는데 아예 실행이 제대로 되지 않는 오류가 발생해서 실행파일(flask_app.py)에 들어가서 Run하고 콘솔을 보니 import 관련 오류가 여러개 떴다.

 

gensim, pandas, konlpy,krwordrank 같이 import하는 라이브러리가 없다고 오류가 떠서 콘솔 창에서 다 pip명령어를 통해 설치해주고 다시 run을 하니 콘솔에 오류가 없고 웹주소로 들어가니 아까와 다르게 NOT FOUND 페이지가 보였다.

 

그래서 Flask 서버도 잘 배포가 되었나 하고 Vercel을 통해 배포한 바디토리 서비스를 들어가서 테스트 해보았는데 Flask 서버가 제대로 배포되지 않는 것 같았다..😥😥😥

 

Flask 서버가 제대로 동작하면 기록확인하기 페이지에서 'Ai 토리추천'과 '많이 기록된 키워드'가 제대로 나타내야 한다. 그리고 오늘 기록하기 페이지에서 증상을 기록할 수 있어야 한다.

flask서버가 연결 안되었을 때 화면 (좌)  /  연결 되었을 때 화면 (우)

 

 

 

 

3️⃣  아직 완벽하지 않은 배포 상태

 

pythonanywhere로 Flask 서버를 배포하고 바로 테스트를 해보았을 때는 Flask 서버가 제대로 배포되지 않은 것 같았는데 시간이 조금 지나고 다시 테스트를 해보니 정상적으로 작동하는 것처럼 보였다.

 

기록확인하기 페이지에서  'Ai 토리추천'과 '많이 기록된 키워드'가 제대로 나타났다!!

하지만, 기록하기 기능은 여전히 정상적으로 작동하지 않았다..😂

 

 

바디토리에서 Flask 서버와 통신해야 하는 부분은 크게 아래 2가지 부분이 있다.

 

1)  오늘 기록하기  -  증상 기록 시 해당 증상을 Flask 서버에 넘겨 추천 진료과목을 뽑아내서 DB에 저장해야 증상 기록 과정이 완료된다.

2)  기록 확인하기  -  기록된 증상들을 리스트로 만들어 Flask 서버에 넘겨주면 키워드 추출 함수를 통해 TOP 5 키워드를 추출해준다. 이를 통해 대시보드, 차트에서 통계 및 필터링 등 키워드를 활용한 기능들을 보여준다.

 

2번은 현재 정상 작동하는데 1번은 작동하지 않는다.

1번이 제대로 안될 경우 기록하기를 시도하면 증상 기록 후 확인 페이지로 넘어가지 않고 아래처럼 로딩페이지에 계속 머물러 있고, 브라우저 콘솔을 보면 504 Error가 발생한다.

 

 

 

가끔 2번도 제대로 작동하지 않을 때가 있는데 pythonanywhere에서 Dashboard를 살펴보면 CPU Usage가 금방 100%를 넘어가 버려서 제한이 걸려서 그러는 것 같다.

 

내가 배포를 잘못해서 그런지, 아니면 실행하는 파일이 일반적인 웹앱이 아니라서 그런건지 잘 모르겠다.

(로컬 환경에서 docker로 flask서버를 만들고 테스트해보면 기능들 모두 잘 동작하는 걸 보면 코드에 문제가 있는 것 같지는 않다)

 

 

 

 

 

마무리

 

우선 서비스 자체는 배포를 하긴 했는데, 기록하기 기능이 안되면 기록 확인하기도 제대로 동작하지 않기 때문에 사실 배포를 안한 것과 크게 다르지 않다..

 

Flask 서버가 왜 제대로 동작안하는지 좀 더 살펴보고 다른 플랫폼을 통해서도 배포를 시도해 보아야 겠다.

Flask 배포는 시간이 얼마나 걸릴지 감이 안와서 배포 완료하고 리팩토링을 시작하는 것보다 리팩토링은 리팩토링대로 진행하면서 곁들어서 진행하는 걸로..!

 

 

 

 

 

 

 

참고 자료

🔗 nextJS 뭘로 배포할까? (Netlify, Vercel, Github page)

🔗 4] Flask 웹 앱 무료 배포하기 - pythonanywhere