Docker + NEXT.js

😄이 글은 Oracle + 우분투로 서버를 구축한 상태에서 시작합니다.

마이그레이션 이유: Vercel:504

최근 프로젝트를 Vercel에 배포하게 되면 로컬 로그인, 로컬 회원가입이 504 Gateway Timeout 오류를 반환하였습니다.

문제의 원인은 Vercel의 무료 플랜과 관련된 자원 제한이 주요 원인 중 하나로 추정되었습니다. 실제로 Vercel Pro 플랜으로 업그레이드 한 후, 문제가 해결되었습니다.

Vercel: Serverless functions have a timeout of only 10 seconds (300 seconds if you upgrade to pro plan)

위의 글에서 볼수 있듯이 Vercel의 무료 플랜에서는 서버리스 함수의 실행 시간이 10초로 제한됩니다.
그래서 제 해결책은 자체 서버를 구축하여 데이터베이스 요청의 처리 속도와 효율성을 향상시키는 것입니다.

도커 설정법

1. Docker 설치를 위한 패키지 업데이트

   sudo apt-get update

2. 필요한 패키지 설치

   sudo apt-get install apt-transport-https ca-certificates curl software-properties-common

3. Docker의 공식 GPG 키 추가

   curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

4. Docker 저장소를 APT 소스에 추가

   sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

5. Docker 패키지 업데이트 및 설치

   sudo apt-get update
   sudo apt-get install docker-ce

6. Docker가 정상적으로 설치되었는지 확인

   sudo docker run hello-world

7. Docker 이미지 빌드

   • 폴더 만들어주시고 깃 클론으로 프로젝트 가져옵시다.
   • .env 파일도 꼭 설정해주시고요.
   • Dockerfile도 있어야합니다.

   mkdir project
   cd project
   git clone ‘url’

   sudo docker build -t nextjs-app .

8. Docker 컨테이너 실행

   • 본인은 nginx포트가 80을 이미 사용중이여서 변경하였습니다.

   sudo docker run -d -p 3000:3000 nextjs-app
   sudo docker run -d -p 80:3000 nextjs-app

   • 자신의 컨테이너를 확인하고 싶다면

   sudo docker ps

   • 컨테이너 이름 또는 ID로 여러가지를 할 수 있다. stop,remove

   sudo docker stop 컨테이너
   sudo docker rm 컨테이너

9. Oracle Cloud Infrastructure의 VCN 설정

   포트 80을 외부 접속 개방하기

   Security List

   • Source CIDR: 0.0.0.0/0, 모든 IP에서 오는 요청
   • IP Protocol: TCP
   • Destination Port Range: 80, 개방할 포트

   sudo docker run -d -p 80:3000 nextjs-app

10. 이제 브라우저에 IP주소로 접속시 프로젝트를 잘 확인할 수 있습니다.

11. 가비아에서 도메인을 삽니다. (이벤트 하는 이름으로 사면 좀더 싸요.)

12. DNS 관리 ⇒ DNS 설정 ⇒ 도메인을 연결 ⇒ 레코드 추가

    A	@	당신의 ip 주소
    CNAME	www	ott-we-t.com.

13. http:ott-we-t.com 접속

다음은 Git Actions를 활용해서 자동배포
https://velog.io/@hongkyu_mr_chu/Docker-Git-Actions