Vue-cli로 웹앱 생성 및 Github page 연동

오늘은 Vue CLI툴을 사용해 만든 페이지를 Github page로 올리는 방법에 대해 정리해 보겠습니다.
여기서는 페이지를 subtree로 올리는 방법을 다루겠습니다.
subtree에 대한 보다 자세한 설명은 링크를 첨부합니다.
사실 저는 subtree로 관리하는 게 익숙하지 않아서 상당히 까다로웠지만,
개발 / 출시를 분리해 두는 것이 유지보수 측면에서도 편하기 때문에 저는 subtree를 사용했습니다.
1개의 브랜치만으로도 깃허브 페이지를 생성할 수 있습니다. (빌드한 페이지를 /docs경로에 넣으면 가능)

Vue CLI로 프로젝트 생성

먼저 npm으로 vue-cli을 설치하고, 프로젝트를 생성합니다.

~ % npm install -g @vue/cli

# 적당한 경로에 프로젝트를 생성
[folder] % vue create [project-name] # 프로젝트 이름 입력

그러면 Vue CLI툴이 자동으로 프로젝트를 생성해 줍니다. 생성할 때 프리셋을 지정할 수도 있습니다.

Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

# 기다리면 결과 출력
 🎉  Successfully created project [project-name].
👉  Get started with the following commands:

 $ cd [project-name]
 $ npm run serve

Git push

Github에 접속해 respository를 생성한 뒤 로컬의 프로젝트와 연결합니다.
이미 init 커밋도 되어 있는 상황이므로 그대로 푸시해도 괜찮습니다.

# https://github.com/user-name/project-name.git 이라고 가정
git remote add origin https://github.com/user-name/project-name.git
git push -u origin master

푸시한 뒤 깃헙을 새로고침 하면 파일이 정상적으로 푸시된 것을 확인할 수 있습니다.

정적 페이지 빌드

다음은 정적 페이지를 빌드할 차례입니다. 우선 빌드에 앞서,
프로젝트의 루트에 vue.config.js라는 파일을 하나 생성해 다음 내용을 넣습니다.

module.exports = {
  publicPath: '/[project-name]/'
}

publicPath를 입력해 줌으로써, Github page에서 파일들을 제대로 불러올 수 있게 됩니다.
이를 입력해 주지 않으면 파일을 불러오지 못해 에러가 발생하는데요,
이는 Github page의 주소가 https://[user-name].github.io/[project-name], 즉 루트가 /기 때문입니다.

파일을 저장한 뒤 페이지를 빌드합니다.

npm run build

빌드에 성공했다면 /dist폴더에 파일이 정상적으로 생성된 것을 확인할 수 있습니다.

Git subtree 추가

생성된 /dist폴더를 푸시하기 위해, .gitignore파일에서 해당 폴더를 제거해 줍니다.

.DS_Store
node_modules
# /dist

그리고 폴더를 커밋한 뒤 subtree로 푸쉬해 주면 완료입니다.

git add dist
git commit -m "initial commit for dist folder"

git subtree push --prefix dist origin gh-pages

gh-pages는 깃허브 페이지를 위한 브랜치입니다.

잠시 기다리기

푸시 후 해당 repo의 설정 화면에 가 보면 자동으로 페이지가 설정되어 있는 것을 알 수 있습니다.
실제로 반영되기까지는 시간이 조금 걸리는데요, 반영이 되었는지는 deployment페이지(github.com/user-name/project-name/deployment)에서 확인할 수 있습니다.

완료!

깃허브 페이지(user-name.github.io/project-name/)에 접속해 다음과 같은 화면이 보인다면 완료입니다.

그 뒤로는 같은 작업의 반복

푸시에 성공하셨다면 그 뒤로는 만들어 올리는 것뿐입니다.
새로운 무언가를 한 뒤 -> deploy를 하기 위해 build(npm run build) -> 새로 만들어진 dist폴더를 커밋(subtree의 parent에서 커밋) -> gh-pages subtree에 푸시

여담

subtree라는 기능을 처음 써 봤는데 제대로 활용하고 있는 건지 도통 알 수가 없네요. 그렇지만 gh-pages브랜치에 master브랜치의 파일이 없는 건 신기합니다.

두 번째부터 푸시가 안 되는 경우

* 첫 번째 푸시는 잘 되었는데 두 번째부터 안 되는 경우가 있습니다. 이럴 경우엔 아래 명령어를 사용해 강제로 푸시를 진행합니다.

git push origin `git subtree split --prefix dist master`:gh-pages --force

history모드를 사용하는 경우

GIthub page에서 기본 값(hash)이 아닌 history모드를 사용하고자 하는 경우, 해당 페이지에서 새로고침을 하게 되면 404 에러가 발생합니다.
이는 Github page의 루트가 프로젝트가 아닌 프로젝트의 상위이기 때문입니다.