안녕하세요. J4J입니다.
이번 포스팅은 GitLab Runner + Docker + Ubuntu를 이용한 Next 환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다.
들어가기에 앞서 다음 글을 참고하시면 좋을 것 같습니다.
사전 준비
[ 1. GitLab Runner와 GitLab Repository 연결 ]
Runner와 Repository를 연결하는 방법은 [GitLab] GitLab Runner 설치하기 (Ubuntu 20.04)를 참고해주시길 바랍니다.
또한 참고적으로 Runner와 연결된 제 Repository는 다음과 같이 구성되어 있습니다.
[ 2. Dockerfile 내용 수정 ]
[Docker] Next 환경 구축에 작성해 둔 Dockerfile을 수정해줘야 합니다.
링크에 만들어 둔 Dockerfile을 확인해보면 패키지 설치와 build 등의 작업과 또한 작성된 모든 파일들을 WORKDIR에 COPY하는 작업이 이루어지고 있는데 GitLab CI를 이용할 경우 해당 작업들이 불필요해지게 됩니다.
그렇기 때문에 다음과 같이 Dockerfile을 수정해주시면 됩니다.
# node 이미지 불러오기
FROM node:12.18.4
# Docker Container에서 작업이 이루어지는 위치
WORKDIR /usr/src/app
# 현재 경로에 있는 실행에 필요한 파일들을 Docker Container의 WORKDIR 위치로 모두 복사 (이미지 생성할 때 동작)
COPY ./.next ./.next
COPY ./node_modules ./node_modules
COPY ./package* ./
# 번들 파일 실행하기 (컨테이너 실행할 때 동작)
CMD ["npm", "run", "start"]
GitLab CI 작성 (1) - build
Runner 설정을 모두 마쳤다면 자동 배포를 위해 사용되는 .gitlab-ci.yml 파일을 작성해보겠습니다.
해당 파일은 다음과 같이 root경로에 생성해주시면 됩니다.
생성이 완료되었다면 가장 먼저 build 단계부터 작성해보도록 하겠습니다.
build는 말 그대로 작성된 파일들이 build되는 구간입니다.
일반적으로 GitLab에 작성된 코드들을 올릴 땐 build된 파일이 들어있는 .next폴더는 .gitigonre을 이용하여 push를 하지 않습니다.
또한 설치된 모듈들에 대한 정보가 담겨있는 node_modules도 push를 하지 않습니다.
그렇기 때문에 배포를 위해 모듈들을 설치해줘야하고 더불어 코드들도 build 해줘야 합니다.
그리고 이렇게 생성된 파일들은 build 이후의 절차에 사용될 수 있도록 보관하는 장소가 필요합니다.
보관하는 장소는 GitLab에서 제공하는 job artifacts를 활용할 수 있습니다.
모듈 설치 및 build를 하여 node_modules, build 된 파일들이 job artifacts에 보관될 수 있도록 .gitlab-ci.yml을 다음과 같이 작성해보겠습니다.
# 실행될 stage 지정 (위에서 아래로 차례대로 실행)
stages:
- build
build: # JOB 이름
# 사용될 이미지 설정
image: node:12.18.4
# stage 설정
stage: build
# 실행될 script 설정
script:
- npm install
- npm run build
# artifacts 설정 (bulld를 통해 생성된 파일을 job artifacts에 보관하여 다음에 수행되는 JOB에서 가져다 활용할 수 있게 도와줌)
artifacts:
# 보관이 이루어질 경로 설정
paths:
- .next
- node_modules
# 유효기간 설정
expire_in: 1 days
# JOB이 수행될 branch 설정 (설정된 branch에 push가 발생될 시 JOB 수행)
only:
- master
파일 작성이 완료되었다면 변경된 내용을 commit하여 Repository에 push를 해주면 됩니다.
push가 되면 GitLab → CI/CD → Editor에서 다음과 같이 .gitlab-ci.yml에 작성한 내용들을 확인할 수 있습니다.
또한 GitLab → CI/CD → Pipelines를 확인해보면 .gitlab-ci.yml 파일을 기반으로 push가 이루어진 사항에 대한 trigger가 생성된 것을 확인할 수 있습니다.
trigger가 정상적으로 동작되었을 경우 위의 모습처럼 Status가 passed로 나오는 것을 확인할 수 있습니다.
또한 다음과 같이 Stages 체크 버튼 클릭 → build 클릭을 하면 실행된 trigger에 대한 로그들도 확인할 수 있습니다.
그리고 위의 로그 화면에서 우측에 보면 artifacts에 대한 정보와 함께 Browse라는 버튼을 확인할 수 있습니다.
해당 버튼을 클릭하게 되면 .gitlab-ci.yml에 설정했던 .next와 node_modules에 대한 정보들이 artifacts에 보관되어 있는 것을 확인할 수 있습니다.
GitLab CI 작성 (2) - test
다음 단계로 test를 작성해보겠습니다.
Next에서 test는 대표적으로 jest가 존재합니다.
test단계에서는 jest를 통해 코드들을 테스트를 해줄 수 있고 해당 테스트가 정상적으로 동작되었을 때만 다음 단계가 실행되기 때문에 올바르게 동작되지 않을 경우 배포를 하지 않도록 도와줍니다.
test를 추가하기 위해 .gitlab-ci.yml 파일을 다음과 같이 수정해보겠습니다.
# 실행될 stage 지정 (위에서 아래로 차례대로 실행)
stages:
- build
- test
build: # JOB 이름
# 사용될 이미지 설정
image: node:12.18.4
# stage 설정
stage: build
# 실행될 script 설정
script:
- npm install
- npm run build
# artifacts 설정 (bulld를 통해 생성된 파일을 job artifacts에 보관하여 다음에 수행되는 JOB에서 가져다 활용할 수 있게 도와줌)
artifacts:
# 보관이 이루어질 경로 설정
paths:
- .next
- node_modules
# 유효기간 설정
expire_in: 1 days
# JOB이 수행될 branch 설정 (설정된 branch에 push가 발생될 시 JOB 수행)
only:
- master
test: # JOB 이름
# 사용될 이미지 설정
image: node:12.18.4
# stage 설정
stage: test
# 실행될 script 설정
script:
- npm run test
# JOB이 수행될 branch 설정 (설정된 branch에 push가 발생될 시 JOB 수행)
only:
- master
변경된 사항을 commit해주고 push를 해주시면 됩니다.
그러면 Pipelines에서 다음과 같이 test stage가 추가된 것을 확인할 수 있습니다.
GitLab CI 작성 (3) - package
다음 단계는 package입니다.
package에서는 간단하게 docker 이미지를 생성한 뒤 저장소에 push 하는 단계라고 생각해주시면 됩니다.
docker 이미지는 기존에 만들어 둔 Dockerfile을 이용해서 생성해주면 됩니다.
그리고 저장소 같은 경우는 GitLab에서 제공해주는 Container Registry 활용해보겠습니다.
package를 추가하기 위해 다음과 같이 .gitlab-ci.yml 파일을 수정해보겠습니다.
# 실행될 stage 지정 (위에서 아래로 차례대로 실행)
stages:
- build
- test
- package
build: # JOB 이름
# 사용될 이미지 설정
image: node:12.18.4
# stage 설정
stage: build
# 실행될 script 설정
script:
- npm install
- npm run build
# artifacts 설정 (bulld를 통해 생성된 파일을 job artifacts에 보관하여 다음에 수행되는 JOB에서 가져다 활용할 수 있게 도와줌)
artifacts:
# 보관이 이루어질 경로 설정
paths:
- .next
- node_modules
# 유효기간 설정
expire_in: 1 days
# JOB이 수행될 branch 설정 (설정된 branch에 push가 발생될 시 JOB 수행)
only:
- master
test: # JOB 이름
# 사용될 이미지 설정
image: node:12.18.4
# stage 설정
stage: test
# 실행될 script 설정
script:
- npm run test
# JOB이 수행될 branch 설정 (설정된 branch에 push가 발생될 시 JOB 수행)
only:
- master
# 전역 변수 설정
variables:
IMAGE_NAME: $CI_REGISTRY_IMAGE:latest # 이미지 이름
package: # JOB 이름
# 사용될 이미지 설정
image: docker:latest
# stage 설정
stage: package
# service 설정 (설정한 image가 작업이 이루어지는 동안 실행되는 docker 이미지)
services:
- docker:dind
# script가 실행 전 수행 될 script
before_script:
- docker login $CI_REGISTRY -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD # GitLab Container Registry에 로그인
# 실행될 script 설정
script:
- docker build -t $IMAGE_NAME . # Dockerfile로 build
- docker push $IMAGE_NAME # Container Registry에 image push
# script가 실행된 후 수행 될 script
after_script:
- docker logout # GitLab Container Registry 로그아웃
# JOB이 수행될 branch 설정 (설정된 branch에 push가 발생될 시 JOB 수행)
only:
- master
여기서 사용되는 $CI_~로 되어있는 변숫값들은 모두 GitLab에서 default로 제공해주는 값들입니다.
값들에 대한 정보가 궁금하시다면 아무 JOB에서나 script에 다음을 추가해주신 뒤 로그를 확인해보시면 됩니다.
echo $CI_REGISTRY $CI_REGISTRY_USER $CI_REGISTRY_PASSWORD $CI_REGISTRY_IMAGE
또한 여기서 사용되는 Dockerfile을 확인해보면 node_modules와 .next에 대한 정보도 COPY를 합니다.
여기서 COPY되는 파일들은 artifacts에 보관되어 있는 파일들입니다.
변경된 사항들을 commit해주고 push를 해줍니다.
그러면 다음과 같이 Pipelines에 package stage가 추가된 것을 확인할 수 있습니다.
또한 생성된 이미지는 GitLab → Packages & Registries → Container Registry에서 다음과 같이 push가 된 것을 확인할 수 있습니다.
GitLab CI 작성 (4) - deploy
마지막 단계인 deploy입니다.
deploy에서는 package를 통해 생성된 이미지를 Ubuntu 서버에 전달한 뒤 해당 이미지를 이용하여 Docker Container를 생성 및 실행되도록 설정합니다.
결국 서버에는 코드와 관련된 파일은 하나도 전달되지 않고 이미지만 전달되어 서비스가 실행될 수 있도록 해줍니다.
deploy를 추가하기 위해 다음과 같이 .gitlab-ci.yml 파일을 수정해보겠습니다.
# 실행될 stage 지정 (위에서 아래로 차례대로 실행)
stages:
- build
- test
- package
- deploy
build: # JOB 이름
# 사용될 이미지 설정
image: node:12.18.4
# stage 설정
stage: build
# 실행될 script 설정
script:
- npm install
- npm run build
# artifacts 설정 (bulld를 통해 생성된 파일을 job artifacts에 보관하여 다음에 수행되는 JOB에서 가져다 활용할 수 있게 도와줌)
artifacts:
# 보관이 이루어질 경로 설정
paths:
- .next
- node_modules
# 유효기간 설정
expire_in: 1 days
# JOB이 수행될 branch 설정 (설정된 branch에 push가 발생될 시 JOB 수행)
only:
- master
test: # JOB 이름
# 사용될 이미지 설정
image: node:12.18.4
# stage 설정
stage: test
# 실행될 script 설정
script:
- npm run test
# JOB이 수행될 branch 설정 (설정된 branch에 push가 발생될 시 JOB 수행)
only:
- master
# 전역 변수 설정
variables:
IMAGE_NAME: $CI_REGISTRY_IMAGE:latest # 이미지 이름
package: # JOB 이름
# 사용될 이미지 설정
image: docker:latest
# stage 설정
stage: package
# service 설정 (설정한 image가 작업이 이루어지는 동안 실행되는 docker 이미지)
services:
- docker:dind
# script가 실행 전 수행 될 script
before_script:
- docker login $CI_REGISTRY -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD # GitLab Container Registry에 로그인
# 실행될 script 설정
script:
- docker build -t $IMAGE_NAME . # Dockerfile로 build
- docker push $IMAGE_NAME # Container Registry에 image push
# script가 실행된 후 수행 될 script
after_script:
- docker logout # GitLab Container Registry 로그아웃
# JOB이 수행될 branch 설정 (설정된 branch에 push가 발생될 시 JOB 수행)
only:
- master
deploy: # JOB 이름
# stage 설정
stage: deploy
# tag 설정 (수행이 이루어질 GitLab-Runner tag 등록)
tags:
- dev-fe
# script가 실행 전 수행 될 script
before_script:
- docker login $CI_REGISTRY -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD # GitLab Container Registry에 로그인
# 실행될 script 설정
script:
- docker rm -f fe-con || true # 기존에 존재하던 Container 삭제
- docker rmi $IMAGE_NAME || true # 기존에 존재하던 이미지 삭제
- docker pull $IMAGE_NAME # Container Registry에서 이미지 가져오기
- docker run --name fe-con -p 8088:8088 -d $IMAGE_NAME # Container 생성 및 실행
# script가 실행된 후 수행 될 script
after_script:
- docker logout # GitLab Container Registry 로그아웃
# JOB이 수행될 branch 설정 (설정된 branch에 push가 발생될 시 JOB 수행)
only:
- master
변경된 사항은 commit하고 push를 해주면 됩니다.
그러면 다음과 같이 Pipelines에 deploy stage가 추가된 것을 확인할 수 있습니다.
또한 문제없이 동작되었을 경우 tag가 dev-fe로 등록되어 있는 Ubuntu 서버를 확인해보면 script구문에 넣었던 내용들이 실행되어 Docker Container가 생성 및 실행된 것을 확인할 수 있습니다.
이상으로 GitLab Runner + Docker + Ubuntu를 이용한 Next 환경 구축하는 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.
댓글