[CI/CD] Vue 프로젝트를 Jenkins (docker-in-docker) 배포하기

📃개요

1. 도커로 Jenkins 컨테이너를 실행한다.
2. Jenkins 컨테이너에 docker-in-docker 관련 세팅을 한다.
3. GitLab 리포지토리에 커밋이 발생하면,  설정한 Dockerfile을 실행하도록 Jenkins를 설정한다.
4. 소스를 빌드하고, 결과를 nginx 컨테이너를 실행해 적재하도록 Dockerfile을 작성한다.

소스를 수정하고 커밋하면, Jenkins가 자동으로 빌드/배포해서 결과를 공유할 수 있다.

 

 

 

🎯 작업환경 구성

1. WSL2 설치

마침, 얼마전 컴퓨터를 포맷해서 WSL이 지워진 상태였다. 마이크로소프트에서 제공하는 친절한 가이드를 보고 WSL2를을 다시 설치했다(1). 리눅스 환경을 더 쾌적하게 사용하고자 터미널을 설치하고(2), 편의성을 위해 관리자 권한의 바로가기를 바탕화면에 생성했다(3).

(1) https://docs.microsoft.com/ko-kr/windows/wsl/install
(2) 시작 -> Microsoft Store -> Windows Terminal 설치 
(3) https://segelache.tistory.com/11

 

 

2. Docker 설치

도커 공식 홈페이지에 들어가서, Windows 버전의 Docker Desktop을 다운로드 한다(4). 문서를 보면 WSL2 또는 Hyper-V가 요구된다고 되어 있다. WSL2를 이미 설치했기 때문에 요구사항을 만족한다. 설치 시 옵션을 수정할 것 없이 그대로 설치했다 .

(4) https://docs.docker.com/desktop/windows/install

 

 

 

🎯 Jenkins 실행 및 설치

1. Jenkins 컨테이너 실행

Docker Desktop을 실행하고 터미널을 켜 Ubuntu 커맨드 창을 열고, 아래 명령어를 실행해준다. 
명령어에 대한 상세한 설명은 아래 더보기를 눌러 확인해보자!

docker run -d \
-p 9090:8080 -p 50000:50000 \
-v /var/jenkins:/var/jenkins_home \
-v /var/run/docker.sock:/var/run/docker.sock \
--name jenkins \
-u root \
jenkins/jenkins:lts-jdk11

-d

백그라운드 모드로 컨테이너를 실행한다. 이 옵션을 붙이지 않으면 포그라운드로 실행되는데, 게임을 전체화면으로 실행하는 것과 비슷하다고 생각하면 쉽다. 우리는 하나만 켜놓고 구경할 것이 아니기 때문에, 백그라운드로 실행하는 옵션을 꼭 붙여주자.

 

-p

도커 컨테이너에도 외부와 통신할 포트가 존재한다. 해당 포트를 현재 기기의 포트와 연결해주는 작업이다. 지금의 경우 로컬 호스트에서 9090으로 접근하면 컨테이너의 8080 포트로 접근하는 것이 된다. 도커에서 컨테이너의 통신 방법은 매우 중요하기 때문에, 기회가 된다면 꼭 공부(5)해보자.

 

-v

컨테이너는 삭제되면 그 안의 정보가 모두 날아가기 때문에, '볼륨'(6)이라는 것이 존재한다. 진행사항 등 데이터의 보존을 위해 볼륨을 설정해주자. 터미널에서 /var/jenkins 폴더에 들어가보고, 도커 컨테이너에 들어가(7) 내용을 비교해보자. 로컬의 /var/jenkins 폴더가 생겼고, 그 안엔 도커 컨테이너를 실행하며 생성된 /var/jenkins_home의 파일들이 복사되어 있음을 알 수 있다.

 

--name 

컨테이너를 조금 더 편하게 지칭하기 위해 이름을 붙여준다.

 

-u

계정과 관련된 옵션이다. root로 해야 권한 상의 문제 때문에 애먹을 일이 없을 것이다.

 

(5) https://velog.io/@ckstn0777/%EB%8F%84%EC%BB%A4-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EA%B5%AC%EC%A1%B0
(6) https://velog.io/@ckstn0777/%EB%8F%84%EC%BB%A4-%EB%B3%BC%EB%A5%A8
(7) docker exec -it jenkins sh

제대로 실행됐다면, STATUS가 Up 상태가 되어야 한다.

 

 

2. Jenkins GUI 접속

Jenkins의 GUI 도구는 8080 포트를 사용한다. 이것을 현재 기기의 9090포트와 연결했으니, localhost:9090으로 접속해보자.

http://localhost:9090/

Jenkins가 Unlock 페이지에서 설정한적도 없는 비밀번호를 요구하고 있다면 정상이다. 당황하지 말고 다시 터미널로 돌아가 docker logs jenkins를 실행해보자. 아래 사진에 표시된 부분을 복사해 붙여넣으면 잠금이 해제된다. 여기까지 Jenkins를 도커 컨테이너를 사용해 띄우고 접근하는 데 필요한 설정을 완료했다!

 

docker logs jenkins를 입력하면, Unlock 할 수 있는 초기 비밀번호가 나온다.

 

 

3. Jenkins 플러그인 설치

아무거나 상관없다. 과정 중에 계정을 설정했다면, 계정만 잘 기억하자.

추천하는 플러그인을 설치하라고 권유하는 페이지가 나오는데, 나는 직접 선택하는 오른쪽을 클릭하고 다시 취소를 눌러 플러그인 설치를 건너뛰었다(플러그인을 설치하고 계정을 설정해도 무방하다). 단, 계정 설정까지 건너뛰게 되는데 기본값으로 설정된 아이디는 admin, 비밀번호는 아까 맨 처음 Unlock 떄도 사용했던, docker logs jenkins의 그 값이다.

 

먼저 플러그인을 바로 설치해보자. 위 사진과 같이 찾아가면, 아래 사진처럼 플러그인을 검색해 설치할 수 있는 관리자 항목이 있다. 설치 가능 항목으로 놓고 "GitLab", "Docker"를 검색해서 각각 상위 4개의 플러그인들을 모두 설치해준다. 불안하다면 아래 목록과 대조해 확인해보자.

• Generic WebhookTrigger Plugin
• Gitlab API Plugin
• GitLab Authentication plugin
• GitLab Plugin
• Docker API Plugin
• Docker Commons Plugin
• Docker Pipeline
• Docker Plugin

 

 

 

4. docker in docker 설정

자, 여기서 나는 Jenkins에 더이상 설치해야되는 것이 당연히 없다고 생각했다. 그래서 설정을 마치고 Jenkins로 빌드를 해봤는데, Jenkins가 도커 명령어를 이해하지 못하고 있었다! 나는 분명 플러그인을 설치했는데! 한참을 고생한 끝에 늘 그랬듯이 한 블로그에서 그 이유를 찾았다.

https://postlude.github.io/2020/12/26/docker-in-docker/

1. Jenkins가 도커의 '기능을 이용'할 수 있는 플러그인을 설치한 것이지, 컨테이너 안에서 도커 명령어를 실행할 수 있는 환경이 구성된 것은 아니었다. 
2. 따라서 경우에 따라 Jenkins 내부에 도커를 실행하기 위해서는, 도커를 설치해야 한다. 단, 도커 전체를 설치하는 것 대신에 도커 클라이언트만 설치하는 것을 권장한다.
3. 클라이언트만 설치해도 되는 이유는 위에서 도커 볼륨을 이용해 , 현재 로컬 PC의 도커 데몬을 빌려쓸 수 있기 때문이다(8).

 

결국 Jenkins 내부에 도커 클라이언트만 설치해주면 되는 것이다(9). 아래 명령어는 get.docker.com에서 빌드된 압축파일 을가져와 압축해제한다. 파일은 docker와 dockerd 디렉토리로 이루어져있는데, 각각은 클라이언트와 엔진이 포함되어있다(10).

(8) https://www.hanumoka.net/2019/10/14/docker-20191014-docker-jenkins-docker-in-docker/
(9) https://stackoverflow.com/questions/38675925/is-it-possible-to-install-only-the-docker-cli-and-not-the-daemon
(10) https://github.com/moby/moby/issues/15360

# 로컬에서 도커 버전을 확인한다.
docker --version

# 해당 명령어로 컨테이너 내부로 접속한다.
docker exec -it -u root jenkins sh

# 컨테이너 내부에서 입력한다(도커 버전은 로컬 버전과 통일시켜줬다).
DOCKER_VERSION=19.03.5
curl -fsSL https://download.docker.com/linux/static/stable/x86_64/docker-$DOCKER_VERSION.tgz | tar zxvf - --strip 1 -C /usr/local/bin docker/docker

 

 

 

🎯 Jenkins 설정 및 GitLab 연동

먼저 GitLab에 Jenkins와 연동할 리포지토리를 하나 만들고, 빌드 전의 빌드 가능한 소스를 올려둔다. 

 

프로젝트를 만들었다면, 소스코드 관리 탭에 들어가서 Git을 체크해준다. 여기서 Repository URL에 아까 생성한 리포지토리의 주소를 복붙하면 권한 관련 에러가 날 것이다. 주소에 유저 이름과 GitLab 토큰을 포함시켜 다음과 같은 형식으로 입력한다.

http://username:personal_access_token@repository_url

에러가 안 뜬다면, 다음으로 Credentials의 Add를 눌러 계정을 추가해주자. 아무것도 건드리지 않고 Username, Password, ID만 적당히 입력했다. 추가하고 나와, Credentials의 -none-을 방금 생성한 계정으로 바꿔준다.

 

 

어떻게 빌드를 할 것인지 방법을 결정한다. 우리는 Jenkins 내부에 도커 클라이언트를 설치했기 때문에, 쉘 스크립트로도 도커의 명령어를 얼마든지 사용할 수 있다! 아래 명령어를 그대로 입력하고 저장을 눌러 빠져나오자. 이제 해당 명령어가 제대로 동작할 수 있도록, Dockerfile만 작성하면 끝이다!

 

docker build -t hello_hhlab:latest .
docker run -d -p 80:80 hello_hhlab

 

 

 

🎯 Dockerfile 작성

빌드할 소스 예시로 Vue 프로젝트(vue-cli 이용(11))를 리포지토리에 올려뒀다. 여기서 생성할 파일은 두개다. 

nginx/default.conf
Dockerfile

https://programmerk.tistory.com/51?category=883634

한참 해맬뻔했는데, 친절한 블로그의 도움을 받았다. 더 자세한 내용은 위 블로그를 참고하면 좋을 듯 하다. default.conf는 nginx 폴더 밑에 생성해서(12) 서버의 기본적인 설정을 해준다.

Dockerfile은 크게 두 단계로 나뉜다. node 컨테이너로 Vue 프로젝트를 빌드하는 단계, nginx 컨테이너에 작성한 설정파일(default.conf)을 복사하고, 빌드한 Vue 프로젝트를 올리는 단계이다(13).

(11) https://cli.vuejs.org/guide/creating-a-project.html#vue-create
(12) https://gonna-be.tistory.com/20
(13) https://programmerk.tistory.com/51?category=883634

 

 

🚫 여기까지 경우에 따라 추가로 발생할 수 있는 오류들 

PC에 설치할 땐 겪었으나, 노트북에 설치할 땐 겪지 않은 오류들을 모았다.

해당 명령어로 실행했는데, 컨테이너가 자꾸 Up이 아닌 Exited 상태로 보일 때(볼륨 권한 문제) : https://chiftkey.tistory.com/3

Docker로 Jenkins 사용 시 볼륨관련 권한 문제

 

약간 다른 문제지만 저는 갑자기 스크립트가 실행이 안 되는 경우도 발생했었습니다ㅠㅠ :
https://itpro.tistory.com/100

스크립트 보안 오류 PSSecurityException 해결 방법

 

docker.sock의 permission denied가 발생하는 경우 : 
https://github.com/occidere/TIL/issues/116

docker 설치 후 /var/run/docker.sock의 permission denied 발생하는 경우 · Issue #116 · occidere/TIL

 

 

 

 

🎉 마지막으로...

• 작성한 파일들을 리포지토리에 푸쉬하고 Jenkins를 확인해보자.
• 오류가 난다면 다시 Build Now를 눌러보자.
• 그래도 오류가 난다면 빌드를 클릭해 Console Output을 확인한다. (오류를 보고 해결해야 한다.)

잘 쫓아했다면 잘 되겠지만, 나도 PC에서 설치할 때와 노트북에 설치할 때 분명 같은 작업임에도 다른 화면과 오류를 많이 마주할 수 있었다. 나도 처음 보는 분야라 쉽지 않았지만, 차근차근 어떤 일이 일어나고 있는지 이해하려고 한다면 오류도 금방 수정할 수 있을 것이라고 생각한다! 결과를 확인해보자.

 

http://localhost:80/