---
layout: post
title: "자잘한 도움말 #1 Jekyll w/ docker 설정"
description: Jekyll, Docker, 컨테이너, live reload, 35729 포트, 4000 포트
date: 2021-11-22 17:26:00 +0900
categories: [Micro]
---

## TL;DR

- Jekyll 컨테이너를 위한 docker-compose 설정 중, 35729 포트도 bind 설정해야 live reload가 작동한다.
- 아래와 같이 `docker-compose.yml` 파일을 설정하자.

```yml
version: "3.8"

services:
  blog:
    image: jekyll/jekyll:latest
    command: jekyll serve --open-url --force_polling --watch --drafts --livereload --trace
    ports:
      - "4000:4000"
      - "35729:35729"
    volumes:
      - ".:/srv/jekyll"
```

## 이하 그리 중요하진 않은 내용들

### Jekyll 블로그는 어떻게 만들어지나?

시작하기에 앞서... 블로그를 만들어야겠다고 생각했을 때, 굳이 [훌륭한](https://www.tistory.com/) [솔루션들](https://velog.io/)을 놔두고 Jekyll을 선택한 이유는

![멋있기 때문이다](https://i.postimg.cc/gjDjjDK3/coollooking.jpg)

그리하야 지금, 블로그를 막 시작하려고 하는 단계에서 그 업보를 잔뜩 맞닥뜨리고 있는 중. 이렇게 포스팅에 군더더기 없이 이미지를 업로드 하는 법을 알아내는 것도 꽤 시간이 걸렸다. 샤라웃 투 비영리 이미지 호스팅 서비스 [https://postimages.org](https://postimages.org)

---

아무튼 솔직하게 말하자면, Jekyll이 뭔지도 모르는 상태로 블로그를 만들었다. 간단하게라도 파악해보자.

![image01]({{site.baseurl}}/assets/pictures/tip01-01.png)  
**Serving Jekyll blog**, asset에 관한 그림이 빠졌지만 무시하자
{: .center}

내가 파악하기론 이렇다. 사용자가 블로그의 소스를 작성하고, `jekyll serve` 명령어를 입력하면 Jekyll이 그걸 html로 빌드해서 웹서버에 올려준다.

그리고 github pages의 은총 아래, github의 repo에다 우리의 블로그 소스를 push하면, github pages는 내부적으로 `jekyll serve`를 실행해 웹 서버를 연다(혹은 html로 빌드만 하고 다른 웹 서버 솔루션을 사용할 수도). 그렇게 우리는 [이런 URL](https://blog.anteater-lab.link/)에 접근할 수 있게 된다.

![image02]({{site.baseurl}}/assets/pictures/tip01-02.png)  
다음 문단의 스포일러  
{: .center}

근데 생각해보면, 원격 저장소에 푸시 해야지 비로소 글이 어떻게 보이는지 확인할 수 있다. 이를 해결하기 위해 자연스럽게 사용하는 방법이 바로 로컬에서 Jekyll을 실행시켜 [http://localhost:4000](http://localhost:4000)으로 들어가 미리 변경사항을 확인하는 방법.

> 그럼 그냥 로컬에서 `jekyll serve` 입력하고, 바뀌는거 확인해가면서 글 쓰고, 완성되면 푸시하고, 어려울 것 없구나

로 끝나면 좋겠지만, 2020년대의 개발자라면 좀 더 깔끔한 방법을 쓰는게 좋지 않을까.

### Jekyll w/ docker

누군가에겐 당연한 일상적인 한 마디가 다른 누군가에겐 큰 충격을 줄 수도 있는 법이다. 나는 몇 주 전 한 커뮤니티에서 다음과 같은 문답을 보았다.

> 맥북 새 OS 버전에서 node 개발 환경은 보통 어떻게들 세팅하시나요?

> 저는 node를 docker에 올려서 사용하고있어요.

2018년 쯤 docker라는 단어를 처음 듣고 나서, '아 이게 중요하구나' 라는 생각만 있고 당최 어찌 쓰는건지 감이 안잡히던 나는 이 때 머릿속에서 뭔가가 정리되는 느낌을 받았다.

[Jekyll docker image](https://hub.docker.com/r/jekyll/jekyll/)를 사용해 Jekyll 컨테이너를 생성하면 좀 더 깔끔해진다. 그리고 **docker-compose**를 쓰면 더 깔끔해진다.

```yml
# docker-compose.yml

version: "3.8"

services:
  blog:
    image: jekyll/jekyll:latest
    command: jekyll serve --open-url --force_polling --watch --drafts --livereload --trace
    ports:
      - "4000:4000"
    volumes:
      - ".:/srv/jekyll"
```

[Ref: visual studio code에서 docker로 jekyll 블로그 로컬 환경 만들기 by jundragon](https://velog.io/@jundragon/visual-studio-code%EC%97%90%EC%84%9C-docker%EB%A1%9C-jekyll-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%A1%9C%EC%BB%AC-%ED%99%98%EA%B2%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0)

### 안되잖아?

docker-compose 설정했고... 실행 잘 됐고... 사이트 잘 열리고... 마크다운 새로 작성하고... 바뀌는거 확인... 바뀌는거 확인... 어... `--livereload` 옵션 줬는데...

**Live reload가 안먹힌다!**

개발자의 친구 live reload(hot reload)는 아주 강력한 개발 중 편의기능으로써, 개발 빌드 어플리케이션을 실행시켜 놓고 코드를 수정해가며 실시간으로 변경사항을 확인할 수 있게 해준다. Jekyll도 당연히 해당 기능을 가지고 있다. 그런데 왜 docker 컨테이너로 실행한 Jekyll에서 작동하지 않을까?

![image03]({{site.baseurl}}/assets/pictures/tip01-03.png)  
이상한 포트가 하나 더 적혀있다.
{: .center}

개발자 도구를 찬찬히 살펴본 결과, 어떤 포트를 발견했다. 저것이 필시 뭔가 작동을 하는 것이 분명하다. 검색하자.

![image04]({{site.baseurl}}/assets/pictures/tip01-04.png)

35729 포트는 Jekyll에서 live reload 기능을 위해 사용하는 포트였다. **즉, live reload가 docker 컨테이너에서 작동하지 않은 이유는 35729 포트를 바인딩하지 않았기 때문이다.**

따라서 아래와 같이 docker-compose.yml에 한 줄을 추가하면 live reload가 정상적으로 동작하는 것을 확인할 수 있다.

```
            ...

        ports:
            - '4000:4000'
            - '35729:35729'

            ...
```

![image05]({{site.baseurl}}/assets/pictures/tip01-05.png)  
정리하자면, 이런 느낌.  
물론 저렇게 뿅 하고 코드가 로드된다기 보단 볼륨 마운트와 관련한 내용도 이해할 필요가 있다.  
{: .center}

다시 천천히 생각해보면, live reload라는 기술을 위해 코드를 감시하는 어떠한 데몬 프로세스가 필요했을 거고, 해당 프로세스가 사용할 포트도 당연히 필요했던 것이 아닐까.

참고로, [livereload, 다시말해 LiveReload.js](https://github.com/livereload/livereload-js)는 javascript 기반 오픈소스 개발 도구다. 즉 Jekyll은 livereload.js 프로젝트에 의존성을 가지고 있다고 말할 수 있다.

## 내가 배운 것

- Jekyll blog에 대한 대략적인 기반지식
- Jekyll의 docker 적용법
- Jekyll이 사용하는 port는 두 개
  - `4000` : 웹 서버 포트
  - `35729` : Live Reload 포트
