[vue.js] Github Pages로 배포하기

byungjur_96·2021년 1월 11일
0

vue-js

목록 보기
4/8
post-thumbnail

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에 관한 설정이 있다. 여기서 Branchmaster 로, 그리고 그 옆에 directorydocs 로 설정하고 저장을 하면, 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 와 같은 식으로 설정해주었다. 여기서 중요한 점은 outputDirdocs 까지 다 적어주었다는 점이다. 또한, 이 경우 설정에서 directorydocs 가 아닌 (root) 로 설정해주어야 한다. 즉, root 에 있는 docs 폴더의 파일을 배포하는 것이 아니기 때문에 docs 폴더가 있는 위치까지 직접 outputDir 을 통해서 설정해 주었다고 생각하면 좋을 것 같다.

3. Reference

  1. Vue CLI 애플리케이션 github pages로 배포하기 [link]
  2. [Vue.js] Vue CLI build 할 때 외부 참조 파일 변경 방법(publicPath) [link]
  3. vue.config.js 옵션에 관한 공식문서 [link]
profile
개발 외의 일들에 더 흥미를 가지는 개발자. Interested in Web, NLP, UI/UX.

0개의 댓글