프리킴의 개발로그

https://freekim.tistory.com/category/%EC%9C%A0%EC%9A%A9%ED%95%9C%20%ED%8C%81

 이전 블로그에서 Jenkins 설치까지 완료하였다. 만약 Jenkins 설치를 못한 사람들은 이전 포스팅에 가서 Jenkins 를 로컬에서 띄우고 이 포스팅의 내용을 진행하길 바란다.

이제 jenkins 설치가 완료되엇다고 생각하고 github 과 연결한 후 push 가 일어났을 때 jenkins 동작하는 것 까지 진행을 해보자.

git Repo 와 git Project 는 미리 생성해두자.

Task 설명

1. 젠킨스 도커 컨테이너 설치 (완료)

2. github 프로젝트 연결

3. shell 실행

[GitHub] Access Personal access tokens 발급

GitHub -> Profile -> Settings -> Developer settings -> Personal access tokens -> Generate new token

토큰의 설명을 적어주고 repo 와 admin:repo_hook 을 클릭한 후 Generate token 버튼을 누른다.

발급받은 key 값을 따로 저장해둔다. 이 페이지에서 벗어나면 키를 확인 할 수 없고, 다시 토큰을 재생성 해야한다.

[Jenkins] GitHub Repo 연결

Jenkins 에 GitHub을 등록시켜주기 위해서 Jenkins 관리 탭에 들어간다 

[Jenkins 관리] -> [시스템 설정] -> [GitHub] -> [Add GitHub Server]

시스템 설정에 들어가서 스크롤을 내려보면 GitHub Tab 이 있는데 Add GitHub Server를 눌러서  Git Hub 주소를 추가해준다.

눌러보면 아래와 같은 값을 넣어주는 UI 를 만날 수 있고 Name 을 정해주고 API URL 은 Default 값을 사용한다.

Add 버튼을 눌러서 Credential 을 추가해보자.

Add Button 을 누르면 아래와 같이 팝업이 뜨는데 Kinde 를 선택하고 Secret text를 선택해준다.

그 후 Secret key 에는 GitHub 에서 발급 받았던 Token 을 복붙해주고

ID 에는 GitHub ID 를 입력한 후 Add 버튼을 눌러준다.

Add Button 을 누르면 Credentials 에 좀전에 생성한 `jenkins` Credentials 이 추가된 것을 볼 수 있다. 

그리고 Test connection 버튼을 누르면 'Credentials verified for user ${id} rate limit:.....'  를 확인하고 이제 GitHub repo 와 연동이 잘된 것을 확인 할 수 있다.

[Jenkins] Jenkins Project 추가 - GitHub Project 연동

Jenkins 에 Item 을 추가하여 GitHub Project 와 연동해준다.

[]

Freestyle project 를 선택 한 후 item 의 이름을 입력한 후 ok 버튼을 누른다.

아래와 같은 창이 바로 뜨는데 GitHub Project를 체크해준 후  GitHub project 주소를 입력해준다.

하단으로 내려서 소스 코드 관리 탭에 Repository URL 에는 git clone 시 사용하는 git 의 URL을 입력해주고 과 Add 버튼을 눌러 Credentials 를 추가해 준다.

아래의 popup 이 뜨는데 Username 과 Password 에 github 의 id와 비밀번호를 입력해 준다. 

빌드 유발은 Jenkins 빌드 실행 조건을 선택해주는 탭인데 아래의 GitHub gook trigger for GITScm polling 을 선택하면 GitHub에 코드가 푸쉬되면 빌드를 트리거링 하게 된다. 어떤식으로 동작하냐면 GitHub 에서 코드 푸쉬가 일어날 때 webHook 메세지를 Jenkins 에 보내주고, Webhook 메시지를 받을 때 Jenkins에서 빌드를 트리거링 한다.

Build 탭에서 빌드를 하는 여러가지 옵션을 선택할 수 있다. Gradle build 도 할 수 있고

Execute shell 을 사용해서 미리 선언해 놓은 shell script 를 실행하게 할 수 있다. 복사, 파일전송 등 여러가지 동작이 필요한 경우 shell command 를 넣어 구성을 해놓으면 된다.

GitHub Jenkins WebHook 설정

일단 WebHook 을 날리기 위해서는 Jenkins에 외부 주소가 필요하다. 현재 docker 의 외부 주소가 없으므로 ngrok 을 통해서 jenkins 외부 주소를 만들어주자. 나같은 경우는 Docker ToolBox 를 사용해 도커 컨테이너를 띄워서 IP 를 직접 입력해줬다.

> ngrok http [포트번호]

아래의 젠킨스 주소를 git 에 넣어주면 된다.

Git Project 우상단의 Setting에 들어간다.

Webhooks Tabl 에 Payload URL 에 

Jenkins URL/github-webhook/ 를 입력한다.

이제 GitHub 에서 push 를 해주면 자동으로 build 로 해놓은것이 동작하는 것을 볼 수 있다.

CI/CD 란?

CI 는 지속적인 통합(Continuous Integration)을 의미한다. 개발자들이 어플리케이션에 코드를 merge 하기 위해서는 변경 사항들이 어플리케이션에 에러를 발생시키지 않도록 반복적인 작업을 통해 확인을 해야 한다. 이는 시간을 소모하게 되면서 여러 개발자들이 같이 일을 하면서 코드 상의 conflict 이 발생할 가능성이 생기는데, 변경사항에 대해 테스트할 것들을 자동화 함으로써 신규 코드의 버그를 빠르게 발견하고 효율적으로 수정할 수 있게 도와 주는 툴을 CI 툴 이라고 표현한다.

CD 는 지속적인 서비스 제공(Continuous Delivery)와 지속적인 배포(Continuous Deployment)를 의미한다. Continuous Delivery은 배포팀에게 코드 릴리즈가 자동화 되는 것을 의미하며,  Continuous Deployment은 변경사항을 반영한 후 자동으로 어플리케이션을 실행할 수 있는 것을 의미한다.

JenKin? (젠킨스란?)

젠킨스는 개발 작업을 지원하기 위해 1400가지의 플러그인을 가지고 있는 오픈소스 자동화 서버이다. 자동화 테스트, 프로파일링 툴을 이용한 성능 변화 감시 등 여러가지 기능들을 제공하고, 여러 모듈을 사용하여 참조관계가 있는 layer들을 빌드할 때 파이프라인을 사용하여 구성을 간단히 할 수 있다. 모든 언어의 지속적인 통합과 지속적인 전달 환경을 구축하기 위한 방법을 제공한다. 

Task 설명

1. 젠킨스 도커 컨테이너 설치

2. github 프로젝트 연결

3. shell 실행

1. 젠킨스 도커 컨테이너 설치

Kitematic을 실행해주면 컨테이너들이 보이는데 jenkins 컨테이너의 CREATE 버튼을 눌러 설치해 준다.

설치가 다 되면 아래의 그림처럼 RUNNING 중인 것을 확인 할 수 있다.

> docker ps -a

위의 명령어를 터미널에 실행시켜보면 실행중인 컨테이너를 볼 수 있는데 아래와 같이 컨테이너의 8080 포트가 32769 포트로 연결된 것을 확인 할 수 있다. ( 참고로 나같은 경우에는 window home edition 이라 Docker ToolBox 를 사용해서 컨테이너를 실행하기 때문에 Vmware 의 localhost ip 인 http://192.168.99.100/ 로 jenkins 가 시작되엇다.) 

오른쪽 위의 WEB Preview 를 클릭해보면 젠킨스 웹 브라우져로 바로 접근할 수 있다.

웹브라우져로 가면 아래와 같이 Admin Password 를 입력하라는 화면을 만나게 된다. 친절하게 위치가 써져 있는데 젠킨스 컨테이너의 터미널를 실행 해서 비밀번호를 복사해서 붙여 넣어주면된다.

jenkins의 터미널에 접속하기 위해서는 아래의 명령어를 실행시켜 주면 되는데 -it 옵션은 STDIN 표준 입출력을 열고 가상으로 접속하겠다는 의미 이다.

> docker exec -it jenkins /bin/bash

터미널을 실행한 후 cat 명령어를 통해 Password 를 출력해보자.

> cat /var/jenkins_home/secrets/initialAdminPassword

위와 같이 key 값이 나오는데 복사해서 붙여 넣고 continue 를 누르면 jenkin에 접속하면서 아래의 화면을 만날 수 있다. 기본적인 플러그인을 설치해주는 왼쪽 옵션을 선택해서 기본적인 것들을 설치해준다. 나는 모두 실

이제 젠킨스 설치가 끝났다.

참고 : Jenkins 업데이트

현재 Jenkins 컨테이너는 2.60.3 으로 더이상 업데이트가 없다. 그래서 아래와 같이 버전이 낮아 Plugin 들이 받아지지 않아서 난장판인 것을 볼 수 있다. 이를 해결해 주기 위해서 Jenkins를 업데이트 해주어야 한다.

1. root 권한으로 컨테이너 진입

> docker exec -it -u 0 jenkins /bin/bash

docker 컨테이너에 root 권한으로 터미널을 실행 시킨다 -u 0 옵션은 루트 권환을 획득 한다.

> cd /tmp
> wget ${jenkins download url}

tmp folder 에 wget 명령어를 통해 jenkins war 파일을 다운 받는다. 난 현재 최신버젼인 2.222.3 을 받았다.

> mv ./jenkins.war /usr/share/jenkins
> chown jenkins:jenkins /usr/share/jenkins/jenkins.war

다운받은 jenkins.war 로 교체를 해주고 권한을 바꿔 준다.

>exit
docker restart "jenkins"

컨테이너에서 나온 후 컨테이너를 재실행 시켜준다.

About Jenkins 에 들어가면 Jenkins 가 업데이트 된 것을 볼 수 있다.

생각보다 여러가지에서 막혀서 힘들었다.

다음 포스팅에는 git 과 연동 하여 배포 후 자동으로 작업을 하고 release 까지 하는 내용을 작성하겠다.

다음 포스팅 - git, jenkins 연동 

출처 : https://www.redhat.com/ko/topics/devops/what-is-ci-cd

<!DOCTYPE html>
<html>
<head>
	<title>test html 입니다.</title>
</head>
<body>

</body>
</html>

티스토리 블로그에 코드를 공유 하는 글들을 보면 위의 예시 처럼

Editor tool 과 동일하게 high light 도 들어가 있고, Line Number 까지 들어가 있는 글이

가독성이 좋았고 보기 편했다.

티스토리는 현재 코드 블록이라는 것을 제공해서 손쉽게 코드를 넣을 수 있게 제공을 하고 있다.

다만 기본 테마가 너무 못생겨서 highlight 와 line number 을 새로 추가해줘야한다.

다른 블로그에도 글들이 많이 있어 다른 글들을 보아도 좋으나

초보자의 입장에서 처음 부터 코드블럭을 넣고, 라인넘버까지 넣는 일련의 과정을 한번에 정리해 보았다.

1. 코드 블럭을 통해 코드 추가.

1. 글쓰기를 누르고 난 후 상단 메뉴를 보면 코드 블럭이라는 메뉴가 보이고 클릭을 한다.

2. 노란색깔로 표시된 부분을 누르면 내가 작성한 코드의 언어를 선택할 수 있다. 그리고 확인을 누르면

아래와 같은 형식으로 보이게 되고 완료를 누르면 최종적으로 코드가 코드블럭의 기본 테마 형식으로 보이게 된다.

<결과>

기본 코드 블록의 결과는 정말 볼품이 없다. 이제 HighLight 를 추가해보자.

2. Highlight.js 적용하기

Highlight.js 는 블로그 관리 에서 플러그인을 통해 적용하는 방법과 HTML 을 통해서 직접 적용하는방법이 있다.

플러그인을 활용한 방식은 간단하므로 설명을 생략하고

직접 사이트에서 받아와 HTML에 적용하는 방법을 설명 하겠다.

테마는 아래의 사이트를 보고 고르면 된다.

나는  AndroidStudio 테마가 익숙하므로 AndroidStudio 테마를 선택했다.

https://highlightjs.org/static/demo/

테마를 선택했다면 이제 HTML에 적용해보자.

내 블로그의 HTML 편집에 들어가서 </head> 위에 아래의 코드를 복사 붙여넣기 해주면된다.

그리고 선택한 테마이름에서 대문자는 소문자로, 띄워쓰기는 -로 바꿔주고 아래의 androidstudio 부분 대신

입력해주면 된다.

예)

'A 11 Y Dark' - > a-11-y-dark

cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/a-11-y-dark.min.css">

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/androidstudio.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

초보자를 위해 과정을 스크린샷했다.

1. 블로그 관리 페이지에서 [꾸미기]->[스킨편집] 을 누른다.

2. 오른쪽 [html편집] 버튼을 누른다.

3. </head>를 검색 하여 테마 이름을 수정하여 블록 영역처럼 </head>위에 붙여 넣는다.

4. 저장을 해보면 위와 같은 결과를 얻게된다.

여러분과 결과물이 다를 수 있는데 나는 추가적으로 css에 들어가서 <code> css의 font size를 13으로 바꾸고, 적용되어 있던 font 를 삭제해줫다.

3. LineNumber 추가하기

1. highlightjs-line-number.js 를 다운 받는다. 아래는 git hub 주소이다.

혹은 ----> 이곳  <--- 을 우클릭 하여 다른 이름으로 링크저장을 누른다.

https://github.com/wcoder/highlightjs-line-numbers.js/

2. 다운받은 js 파일을 위에 highlight 적용할때 사용한 [html편집] 으로 들어가

상단 [파일업로드] -> [추가]  를 눌러 js 파일을 내 블로그에 추가해준다.

3. js 가 추가가 되었으면 아래의 코드를 highlight 를 적용했을 때와 동일하게 </head> 위에 복사 붙여넣기 해준다.

<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
	$(document).ready(function() {
		$('code.hljs').each(function(i, block) {
		hljs.lineNumbersBlock(block);
		});
	});
</script>

4.

완성되었다. 

이제 꾸준히 예제 코드들을 열심히 올려주기만 하면된다.

파이팅