Dev Container로 로컬 미리보기 환경 세팅
VS Code의 Dev Container로 Jekyll 블로그를 로컬에서 미리보기 하는 방법 정리
- Dev Container가 뭔지, 왜 쓰는지
- 미리보기 켜고 끄는 명령어
- 글 작업/커밋 흐름
(jekyll-theme-chirpy 기준)
1️⃣ Dev Container란?
“준비물이 다 갖춰진 작업방을 내 컴퓨터 안에 하나 뚝딱 만들어주는 것”
Jekyll 미리보기엔 Ruby, Bundler, Node 등이 필요한데, Windows에 직접 깔면 버전 충돌이 잦다.
Dev Container는 이 준비물이 미리 세팅된 리눅스 상자(Docker 컨테이너)를 자동으로 만들어준다.
설정은 .devcontainer 폴더에 저장되어 있다.
| 이점 | 설명 |
|---|---|
| 설치 지옥 회피 | Ruby / Jekyll / Node 가 이미 세팅되어 있음 |
| Windows가 안 더러워짐 | 격리된 상자라 본체엔 영향 없음 |
| 환경 재현 |
.devcontainer 폴더 덕분에 다른 PC에서도 동일 환경 |
| 배포 환경과 유사 | GitHub Pages(리눅스)와 비슷해 “로컬은 되는데 배포하면 깨짐” 방지 |
⚠️
.devcontainer폴더 = 레시피. 지우지 말 것. 실제 컨테이너는 필요하면 지웠다 다시 만들어도 됨(파일은 안전)
2️⃣ 컨테이너 켜기 / 끄기
켜기
- VS Code에서 폴더 열면 우측 하단 팝업 →
Reopen in Container - 또는 좌측 하단 파란색
><아이콘 →Reopen in Container
끄기
- VS Code 창을 닫으면 컨테이너도 자동으로 멈춤 (파일은 그대로 남음)
꼬였을 때 새로 짓기
-
Ctrl+Shift+P→Dev Containers: Rebuild Container
컨테이너 터미널은 이렇게 보인다:
1
vscode ➜ /workspaces/Yoo-Jeong.github.io (main) $
/workspaces/...는 리눅스 경로일 뿐, Windows의 블로그 폴더와 같은 파일이다.
3️⃣ 미리보기 켜기
컨테이너 터미널에서:
1
bash tools/run.sh
이 스크립트는 내부적으로 아래 명령을 실행한다:
1
bundle exec jekyll s -l -H 127.0.0.1 --force_polling
-
-l: LiveReload (파일 저장 시 브라우저 자동 새로고침) -
--force_polling: Docker 환경에서 파일 변경 감지용
잠시 후 아래 메시지가 뜬다:
1
2
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
브라우저에서 접속:
1
http://127.0.0.1:4000
4️⃣ PORTS 패널의 포트 두 개
미리보기를 켜면 포트가 2개 열린다.
| 포트 | 이름 | 역할 |
|---|---|---|
| 4000 | Jekyll 서버 | 블로그 미리보기 (http://127.0.0.1:4000) |
| 35729 | LiveReload | 파일 변경 시 브라우저 자동 새로고침 신호 |
-
35729는 직접 접속할 일 없음 (뒤에서 자동 동작) - 둘 다
127.0.0.1이라 내 PC 밖에선 접근 불가 → 남에게 공개되지 않음
5️⃣ 미리보기 끄기
미리보기가 돌아가는 터미널을 클릭한 뒤:
1
Ctrl + C
- 프롬프트가
➜ ... $로 돌아오면 꺼진 것 - 두 포트(4000, 35729)도 함께 닫힘
6️⃣ 미리보기 + 다른 작업 동시에 하기
bash tools/run.sh는 그 터미널을 혼자 계속 차지한다. 그래서 다른 명령을 치려면 터미널을 하나 더 열어야 한다.
터미널 추가
- 터미널 패널의
+버튼 - 또는 분할 아이콘(⧉)
- 또는
Ctrl + Shift + `
| 터미널 1 | 터미널 2 |
|---|---|
bash tools/run.sh |
(다른 작업) |
| → 미리보기 유지 |
7️⃣ 글 작업 & 커밋 흐름
컨테이너 안의 파일은 Windows 폴더와 같은 파일이므로, 수정하면 Git 변경사항에 그대로 뜬다.
1
2
3
4
5
6
1. Reopen in Container
2. (터미널1) bash tools/run.sh → 미리보기 켜기
3. _posts 폴더에 글 작성 / 수정
4. 브라우저 http://127.0.0.1:4000 에서 실시간 확인
5. 좌측 Source Control 탭 → 커밋
6. Push → 잠시 후 실제 블로그에 반영
💡 편집은 한 곳에서만. 두 창(컨테이너/Windows)에서 동시에 같은 파일을 고치면 헷갈리므로,
편집은 한쪽에서만 하는 것이 안전하다.
💡 로컬 미리보기(
127.0.0.1)는 나만 보이는 단계다.git push를 해야 비로소 인터넷에 공개된다.