[Kubernetes 도입] 개발환경 없는 회사에서 NKS로 개발환경 구성하기 Chapter 3. NextJs Application 배포하기 (Feat Ncp SourcePipeLine)

서론

NextJs 프레임워크로 제작한 Front Application을 cluster에 배포하는 일련의 과정을 포스팅하고자 합니다. 본 포스팅은 NCP 서비스를 기반으로 작성되는 점 참고 부탁드립니다. 빌드는 NCP의 SourceBuild, 배포는 SourceDeploy, 파이프라인은 SourcePipeLine을 사용하며 Kubernetes는 NKS로 작성하였습니다.

[이전글]

[Kubernetes 도입] 개발환경 없는 회사에서 NKS로 개발환경 구성하기 Chapter 2. Spring Boot Application 배포

 

[Kubernetes 도입] 개발환경 없는 회사에서 NKS로 개발환경 구성하기 Chapter 1. 개발 환경이 없었다

---

본론

1. CI/CD 파이프라인 설계

파이프라인 설계는 이전 포스팅과 동일합니다. Naver Cloud Platform에서 제공해주는 Source Build와 Deploy, Pipeline 서비스의 구성이기 때문에 "Chapter 2. Spring Boot Application 배포하기" 포스팅을 참고하여주세요. 다만, Build시 매니페스트에 deployment.yaml과 더불어 service.yaml 파일을 추가해주세요.

 

---

 

2. Next.js 빌드 프로세스 살펴보기

Next.js는 React 기반의 프레임워크로서, CSR(Client-Side Rendering), SSR(Server-Side Rendering), SSG(Static Site Generation) 등 다양한 렌더링 방식을 제공하고 있습니다. 이러한 기능들을 효율적으로 수행하기 위해, Next.js에서는 개발 모드(dev)와 프로덕션 빌드(production) 시점에 각각 최적화 과정을 거치게 됩니다.

1. next build 명령

Next.js는 프로덕션 환경에서 동작하기 전 반드시 next build 프로세스를 거칩니다. 제가 구성하고싶은 개발 환경은 스테이지 환경처럼 구성하고 싶기 때문에 저는 프로덕션 모드의 빌드를 진행합니다.

• 개발 모드(Development mode): next dev
  • Webpack의 Hot Reload 기능과 빠른 빌드 속도에 최적화되어 있습니다.
  • 파일이 변경될 때마다 새로 빌드해주는 방식을 사용합니다.
  • production용 최적화가 적용되지 않기 때문에 빌드 결과물 용량이 클 수 있습니다.
• 프로덕션 모드(Production mode): next build 후 start
  • 배포용 프로덕션 빌드를 생성합니다.
  • 사용되지 않는 코드 제거, 코드 압축, 이미지 최적화 등 다양한 최적화 과정을 거칩니다.
  • 각 페이지가 server 혹은 static으로 처리되는지에 따라 다른 형태로 빌드 아티팩트(Artifacts)가 생성됩니다.

2. 빌드 결과물 구조 이해

next build를 수행하면 .next 폴더가 생성되고, 그 안에 다음과 같은 빌드 산출물이 포함됩니다.

• server 폴더
  • 서버 렌더링에 필요한 번들 파일들과 페이지들이 여기에 위치합니다.
  • _app.js, _document.js, _error.js 등 Next.js 내부에서 사용하는 핵심 파일도 포함됩니다.
• static / build-xxxxx 폴더
  • 정적으로 제공될 수 있는 리소스(이미지, 폰트 등)가 위치합니다.
  • Webpack, Babel 등에 의해 번들링된 자바스크립트, CSS 등이 최적화된 형태로 배포 준비됩니다.
• .next/cache
  • 빌드 결과물을 캐싱해두어 재빌드 시 성능을 높이는 데 사용됩니다.

 

---

 

3. Dockerfile 작성

NextJs의 빌드용 도커파일을 작성합니다. 아래 포스팅을 참고해주세요.

https://min-nine.tistory.com/entry/Docker%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%B4-NextJs-Application-%EB%B9%8C%EB%93%9C%ED%95%98%EA%B8%B0

 

---

 

4. deployment.yaml 작성

도커를 사용하여 만들어놓은 이미지를 가지고 cluster에 deployment하는 내용의 yaml 파일을 작성합니다. NextJs를 프로덕션처럼 배포하였으니 기본 3000번 포트를 사용합니다.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: mingyu-cms-deployment   # deployment의 이름
  namespace: test
  labels:
    app: mingyu-cms-deployment  # deployment의 라벨
spec:
  replicas: 1
  selector:
    matchLabels:
      app: mingyu-cms-deployment # replicaset이 관리할 pod 라벨
  template:    # 하위에 pod 정보 설정
    metadata:
      labels:
        app: mingyu-cms-deployment # pod의 라벨
    spec: # 컨테이너 설정
      containers:
        - name: mingyu-cms
          image: vjnibbzs.kr.private-ncr.ntruss.com/mingyu-cms-dev:latest
          imagePullPolicy: Always
          ports:
            - containerPort: 3000
              protocol: TCP
      imagePullSecrets:
        - name: regcred

 

---

 

5. service.yaml 작성

외부 트래픽으로부터 deployment에 네트워크 연동을 위해 Service 오브젝트를 아래와 같이 생성해줍니다. http 프로토콜인 80 포트의 트래픽을 deployment로 생성된 pod의 3000번 포트로 타겟을 지정해줍니다.

apiVersion: v1
kind: Service
metadata:
  name: mingyu-cms-service
  namespace: test
spec:
  type: NodePort
  selector:
    app: mingyu-cms-deployment
  ports:
    - name: http
      port: 80
      protocol: TCP
      targetPort: 3000

---

결과

develop branch에 push를 하여 파이프라인을 동작시킵니다.

 

k8s cluster 대시보드에 접속하여 해당 이미지로 디플로이먼트가 잘 되었는지 체크해봅니다.