Vue로 제작한 정적 홈페이지를 Github Pages를 통해 배포하는 방법
1. Purpose
Github Pages 는 Github에서 정적 홈페이지를 쉽게 배포할 수 있도록 도와주는 툴이다. 일반적으로는 index.html 의 이름을 가진 HTML 템플릿을 최상단 디렉토리에 포함하고 있는 repository에 대해서 <user_name>.github.io/<directory_name> 과 같은 형태로 웹페이지를 호스팅할 수 있다. 이때, Vue 와 같은 프레임워크를 사용하는 경우에는 이와 같은 방법으로 정적 홈페이지 배포를 할 수 없기 때문에 약간의 설정이 필요하다.
2. Usage
Vue 프로젝트를 Github Pages에 배포하기 위해서는 Vue 프로젝트 내에 vue.config.js 라는 이름의 파일을 생성한다. (해당 파일은 Vue CLI 환경 설정 및 Webpack 설정을 변경할 수 있는 파일이다.) 이후, 해당 파일 내에 아래와 같이 내용을 채운다. 이 파일은 프로젝트를 build 할 때의 세팅값을 설정할 수 있다.
// vue.config.js
module.exports = {
publicPath: '/<repository_name>',
outputDir: 'docs'
}여기서 publicPath 는 웹페이지를 배포할 때 Base URL을 선택하는 옵션이다. 실제로 Vue CLI 3.3 이전의 버전에서는 baseURL이라는 옵션으로 사용되었다고 한다. Default 값은 \ 이다. 즉, 루트 도메인이 https://www.example.com 이고, publicPath 가 /sub-route/ 라면, 해당 어플리케이션은 https://www.example.com/sub-route/ 에 배포가 되는 것이다.
outputDir 의 경우에는 빌드된 파일들을 어디에 생성할 지를 결정하는 옵션이다. Default 값은 dist 이며, Github Pages에 배포하기 위해서는 docs 로 바꿔야 한다.
이후 Github Repository에 웹페이지를 push한 후, Repository 설정을 확인해보면 GitHub Pages에 관한 설정이 있다. 여기서 Branch 를 master 로, 그리고 그 옆에 directory 는 docs 로 설정하고 저장을 하면, https://<user_name>.github.io/<repository_name> 와 같은 디렉토리에 해당 웹페이지가 배포된 것을 확인할 수 있다.
cf. 웹페이지의 일부만 Vue로 구성된 경우
이번에 수업 과제를 Github Pages로 배포하던 도중에 문제가 생겼다. 나의 Repository는 아래와 같은 구조를 가지고 있었다.
- Repository
↳ HW2
↳ HW2-1
↳ HW2-2
↳ HW2-3
↳ HW3
↳ project_name근데 여기서, Navigtaion 및 HW2 전체는 기본적으로 순수 HTML로 구성되어 있는 반면, HW3만 별개로 Vue로 구현한 프로젝트였다. 해당 프로젝트를 하나의 Repository에서 배포하기 위해서 고민을 했었는데, 결과적으로는 vue.config.js 내의 outputDir 를 <repository_name>/HW3/project_name/docs 와 같은 식으로 설정해주었다. 여기서 중요한 점은 outputDir 에 docs 까지 다 적어주었다는 점이다. 또한, 이 경우 설정에서 directory 를 docs 가 아닌 (root) 로 설정해주어야 한다. 즉, root 에 있는 docs 폴더의 파일을 배포하는 것이 아니기 때문에 docs 폴더가 있는 위치까지 직접 outputDir 을 통해서 설정해 주었다고 생각하면 좋을 것 같다.
3. Reference
