Next.js - Vercel 환경에서 Google Cloud Platform 으로 환경 이동 구축기

심리상담센터 홈페이지를 운영하던 중 갑작스런 에러상황을 맞이하게 되었고, 해당 환경을 더이상 이용하기 힘들 것이라 판단하여, Vercel 환경에서 GCP 환경으로 이동한 구축기를 적어두려고 한다.

에러 상황

위에 그림과 같이 Pro 계정은 Serverless function의 timeout이 30초로 제공되는 반면
최근 vercel의 hobby 계정은 10초로 제한되면서 504 에러를 발생하게 된다.

구글링으로 해결책을 확인하였지만, getServerSideProps 및 getStaticProps 으로 serverless 함수의 응답시간을 줄여야 된다는 해결책들이 있어서, 해당 관련으로 수정 해보았다.

하지만 며칠째 반복 되었고 해결되지 않아서 vercel에서 github action 과 배포 프로세스가 매우 훌륭하여 잘 이용하였지만, 간단한 환경조차 hobby 계정에서는 운영되기 힘들 것이라 판단되어 환경을 옮기려고 하였다.

Google Cloud Platform

참조
https://medium.com/google-cloud/next-js-tutorial-deploy-to-docker-on-google-cloud-container-engine-6b0c19dd8ecb

Next.js 환경을 그대로 옮길 수 있는지에 대해 찾다가 위에 글을 참조하였고, 사실 이 방법말고 좀 더 알게 된다면 다른 방법으로 바꾸어 보려고 한다.

Dockerfile 이미지 Build하기

Dockerfile을 기반으로 이미지를 생성하는 작업

docker build -t ${PROJECT명}/${PROJECT명}:v1 .
// docker build -tag <이미지명>[:태그] . 

Dockerfile

FROM node:alpine
# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
# Install app dependencies
COPY package.json /usr/src/app/

COPY package*.json ./
COPY prisma ./prisma/ ---------> prisma 설정
RUN yarn install
RUN npx prisma generate ---------> prisma generate
# Bundle app source
COPY . /usr/src/app
RUN yarn run build

EXPOSE 3000
CMD [ "yarn", "start" ]

Dockerfile 이미지 실행하기

docker run --rm -p 3000:3000 ${PROJECT명}/${PROJECT명}:v1
// docker run --rm -p 엮어줄 포트 ${PROJECT명}/${PROJECT명}:v1

.dockerignore 설정

node_modules
npm-debug.log
.next

google cloud 로그인하기

gcloud auth login
gcloud set project ${PROJECT명}

gcloud 컨테이너 등록 api 선언

gcloud services enable containerregistry.googleapis.com

gcloud 컨테이너 생성

gcloud container clusters create ${클러스터명} --num-nodes=${노드숫자}

gcloud 도커 이미지 push

gcloud docker -- push gcr.io/spring-counsel/spring-counsel:v1

쿠버네티스 커멘드 라인 툴 설치

https://kubernetes.io/docs/tasks/tools/install-kubectl-windows/

쿠버네티스 deployment로 생성

kubectl create deployment ${프로젝트명} --image=${프로젝트명}/${프로젝트명}:v1 --port 3000

쿠버네티스 deployment 환경변수 적용

kubectl get deployment
kubectl edit deployment ${프로젝트명}

해당 yaml 에 env 넣어주고 edited 확인

spec:
  containers:
    - name: ${프로젝트명}
      image: ${이미지명}
      env:
        - name: ${환경변수명}
          value: ${Value}
          
     형식으로 저장
     
kubectl get deployment spring-counsel -o yaml // env 적용되었는지 확인

적용된 환경변수 - 쿠버네티스 클러스터 > 작업 부하 > deployment.yaml 확인

쿠버네티스 서비스 생성

kubectl expose pod(deployment) ${프로젝트명} --type=LoadBalancer --port 3000

외부 DNS 연동

DNS 주소는 가비아에서 구입을 했고, 구글 GCP에 적용하는 내용

네트워크 서비스 > Cloud DNS > 영역 만들기

DNS 이름만 발급받은 도메인 적어주면 됨.

만들어진 DNS의 상세보기 중 유형이 NS(Name server) 선택

라우팅 데이터에 나와있는 NS를 가비아 NS에 적어줌.

DNS의 상세보기의 유형 중에 SOA 와 NS만 있을텐데 두개를 추가로 만들어주어야 함.
+표준 추가 버튼 선택하여 레코드를 만들어준다.

• 1개는 DNS 이름을 안적어준 A 타입
• 1개는 www 나 앞에 도메인을 붙여줄 이름을 적어준 A 타입
  앞서 보았던 엔드포인트 주소를 적어줌

연결해 준 도메인 접속하여 확인

https ssl 관련하여서는 추가적으로 진행되면 작성할 예정

고생을 많이 했던 부분 (사용환경 prisma 와 planetScale)

• 기존 Vercel에 DATABASE_URL 은 mysql:127.0.0.1 ~~~ 와 같이 내부에서 db를 실행 해주고 해당 url로 접속이 가능 하였었다.

• 하지만 GCP에 올리고 난 후 실제 DB는 PlanetScale에서 관리하지만 클라우드에서 해당 db에 접속하기 위해서는 외부에서 접속 가능한 db_url로 접근하여야 한다.
  

• planetScale 사이트에 로그인하여 dashboard로 이동 후 해당 db의 connect 버튼을 클릭하면 다음과 같이 환경변수로 쓰일 DATABASE_URL이 생기게 되고, 이를 image 환경변수에 넣어주면 db와 커넥션이 맺어지게 된다.

마치며

회사에서도 클라우드 환경에 pod 띄우고 이미지 배포하고, 운영하는 일들을 여러번 하다보니 GCP도 생각했던 것 만큼 쉽게 진행이 될 줄 알았지만.. 생각보다 많은 시간을 투자했고, 또한 지인에게 물어보면서 고쳐야 될 부분이나 막힌 부분들에 대해 대해 알게 되었다.
앞으로 지향해 나가야 할 방향이 프론트 뿐만 아니라 풀스택 및 devOps 이기 때문에 이것들과 관련하여서도 꾸준히 학습 해야겠다는 생각을 하였다.

ps. vercel은 hobby 등급 그래도 어느정도는 쓸 수 있게 해줘야 하는거 아닌가..