gh-pages: dist 디렉토리만 deploy 하기

동동·2021년 3월 22일

블로그 작성시 참고한 웹사이트들

0. dist 디렉토리만 배포하여야 한다

이번주부터 새로 시작한 미션에서, webpack을 사용하여 bundling 하는 것을 공부하고 있습니다. 기존에는 배포용 코드와 작업용 코드가 일치하였지만, 이제는 src 디렉토리 내의 작업용 코드와 이를 bundling 한 dist 디렉토리 내의 배포용 코드가 상이하게 됩니다.

디렉토리 구조 예시
📦javascript-subway
 ┣ 📦dist        << 배포용 파일이 포함된 디렉토리
 ┃ ┣ 📜3677884233af83d1fea3.png
 ┃ ┣ 📜index.html
 ┃ ┣ 📜main.css
 ┃ ┗ 📜main.js
 ┣ 📂src          << 작업용 파일이 포함된 디렉토리
 ┃ ┣ 📂css
 ┃ ┃ ┗ 📜index.css
 ┃ ┣ 📂images
 ┃ ┃ ┗ 📜subway_emoji.png
 ┃ ┣ 📂js
 ┃ ┃ ┣ 📂auth
 ┃ ┃ ┣ 📂constants
 ┃ ┃ ┣ 📂router
 ┃ ┃ ┣ 📂utils
 ┃ ┃ ┣ 📂views
 ┃ ┃ ┗ 📜index.js
 ┃ ┗ 📜index.html
 ┣ 📜LICENSE
 ┣ 📜README.md
 ┣ 📜babel.config.json
 ┣ 📜package.json
 ┣ 📜webpack.config.js
 ┗ 📜yarn.lock

별도의 설정을 하지 아니한 경우, remote 저장소의 gh-pages 브랜치에 push를 하면 자동으로 github pages에 배포가 됩니다.

Creating a GitHub Pages site

이때까지는 작업용 브랜치를 remote 저장소의 gh-pages 브랜치에 push를 함으로써, github pages에 배포를 해왔습니다. 그러나 이제는 dist 디렉토리만 remote 저장소의 gh-pages 브랜치에 push를 해야합니다.

dist 디렉토리만 gh-pages 브랜치에 수동으로 copy & paste 한 후, remote 저장소의 gh-pages 브랜치에 push를 하는 것도 하나의 방법입니다.

하지만 좀 더 자동화된 세련된 방법은 없을까요?

1. git worktree 활용

추후 내용 추가

worktree는 하나의 레포지토리에서 다른 레포지토리(또는 다른 브랜치. 이하, 다른 레포지토리라 한다)의 작업을 손쉽게 하기 위하여 도입된 개념입니다.
다른 브랜치에 있는 갑작스런 업무로 인하여 진행중이던 업무를 stash commit 한 후, 다른 브랜치로 switch하여 갑작스런 업무를 처리하게 되는 경우가 있으실 겁니다. switch 하는 것은 물리적으로 파일이 바뀌므로, 작지 않은 overhead 비용・시간이 발생하게 됩니다.

이에 worktree라는 개념을 도입하여, 상위 레포지토리의 하위 디렉토리에 worktree를 add하여, 해당 디렉토리로 이동하면 추가된 레포지토리로 이동한 것과 동일한 효과가 발생합니다.따라서 해당 디렉토리내에서 작업을 한 후, 커밋을 하고 푸쉬를 하면 해당 레포지토리에서 작업한 것과 동일합니다. 또한 추가한 하위 디렉토리를 삭제하고 git worktree prune 을 하면 손쉽게 다른 레포지토리와 상위 레포지토리를 분리할 수 있습니다.

이를 응용하여, dist 폴더에 gh-pages 브랜치의 worktree를 연결하겠습니다. webpack을 실행하면 dist 폴더에 배포용 코드가 생성됩니다. 이를 gh-pages 브랜치에 커밋 후 remote 저장소의 gh-pages에 push한다면, dist 디렉토리만을 gh-pages로 배포하는 것이 가능해집니다.

2. 구체적인 배포 방법

아래의 모든 shell command는 아래의 규칙에 맞게 기재되어 있습니다.

➜ 현재 디렉토리명(*) git:(브랜치명) 커맨드

(*) 공란의 경우 package 최상단 디렉토리

① 배포를 위한 준비

1. orphan branch(gh-pages) 생성

orphan 브랜치는 하나의 git repository에서 다른 브랜치나 커밋으로부터 단절된 새로운 history를 가지는 브랜치를 말합니다. 새로운 orphan branch에서 만들어진 최초 커밋은 부모 커밋을 가지지 않아 다른 브랜치와 커밋들로부터 완전히 단절된 새로운 히스토리의 루트가 됩니다. 따라서 orphan 브랜치는 다른 브랜치와 독립적으로 운영할 수 있기 때문에 설정 파일이나, 다른 프로젝트를 생성하기보다는 하나의 프로젝트에서 진행하고 싶을 때 사용하면 유용합니다.
git checkout --orphan

gh-pages 를 기존 브랜치와는 완전히 단절되며 아무런 파일을 가지지 않은 상태로 만들기 위하여 orphan branch로 생성하겠습니다.

➜ git:(main) git checkout --orphan gh-pages   

➜ git:(gh-pages)  git rm --cached -r .  # staged 파일들을 unstage

➜ git:(gh-pages)  git clean -f .        # untrackted 파일들을 모두 삭제

➜ git:(gh-pages)  git commit --allow-empty -m 'initial commit'  # 최초 커밋

2. gh-pages 브랜치를 remote 저장소와 연결

➜ git:(gh-pages)  git push origin gh-pages

3. remote 저장소의 gh-pages 브랜치를 dist 디렉토리에 연결

remote 저장소의 gh-pages 브랜치를 dist 디렉토리에 연결하며, 이 디렉토리를 gh-pages 브랜치로 합니다. 따라서 아래의 커맨드 실행 후 dist 디렉토리로 이동하게 되면, 이는 gh-pages 브랜치로 전환한 것과 동일합니다.

➜ git:(gh-pages) git switch main

➜ git:(main) git worktree add dist origin/gh-pages -fB gh-pages

② 배포

1. deploy용 코드 생성

➜ git:(main) webpack

2. dist 디렉토리로 이동

➜ git:(main) cd dist

3. gh-pages 브랜치에 커밋

➜ dist git:(gh-pages) git add . 

➜ dist git:(gh-pages) git commit -m "build: gh-pages 배포용 코드 빌드"

4. remote 저장소의 gh-pages 브랜치에 푸쉬

➜ dist git:(gh-pages) git push origin gh-pages

※ webpack 실행으로 인해 dist/.git 이 삭제되지 않도록 하여야 합니다.

dist디렉토리 내의 .git 디렉토리가 삭제되면, 이는 더이상 gh-pages 브랜치가 아니게 됩니다.
webpack.config.js 의 설정으로 인해 매 빌드시 output path(dist) 내의 모든 파일과 디렉토리를 삭제하도록 되어 있을 수 있습니다. 이러한 경우, .git 디렉토리는 삭제하지 않도록 별도의 설정을 하셔야 합니다.

저는 별도의 plugin을 설치하지 않고, output property의 clean property를 이용하여 매 빌드시 output path를 비워주고 있습니다. 따라서 아래와 같이 keep: /\.git/ 을 추가하여 .git 디렉토리가 삭제되지 않도록 하였습니다.

const config ={
  entry: './src/js/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(dirname, 'dist'),
    clean: {
      keep: /\.git/,
    },
  },
}