[vue] 프로젝트를 Github Pages에 배포하는 법

Vue.js를 기본적인 Pages 배포하는 법을 알아보자

 

Installation | Vue CLI

먼저 vue.js를 설치해야한다.

npm install -g @vue/cli

npm으로 vue cli를 설치해준다.

 

그럼 vue clie3 프로젝트를 생성해주면된다.

vue create <project-name>

최신 vue3버전으로 선택하자

vue 프로젝트가 생성되었다.

정상적으로 생성된지 판단하기 위해 터미널에 server를 돌려보자

npm run serve && yarn serve

실행된후의 화면

인터넷 주소에 localhost:8080 으로 입력하면 아래와 같은 페이지가 뜬다

현재 로컬 PC 8080포트로 Vue 정적 파이를 띄우고 있다.

 

---

Github Page 배포하기

https://pages.github.com/

GitHub Pages

1.Github repository 생성.

Github Page는 정적 파일을 호스팅하므로 github repository가 필요하다.

Github에서 새로운 repository를 생성한다.

 

아까 만든 프로젝트로 가서 Terminal에 드래그한 코드를 복사 붙여넣기 한다.

정상적으로 push 되었다면 이렇게 바뀐다.

 

이제 깃허브에서 settings를 눌러 설정으로 간다.

pages 탭에서 간단하게 main으로 branch Source를 바꾸면 되지만 이번에는 두번째 방법을 선택하겠다.

 

프로젝트 내부에 /docs란 폴더를 만들어 관리하도록 하겠다.

 

현재 만들어준 vue project를 build 하면, 기본 경로는 /dist 가된다.

 

이걸 바꾸기 위해서는 vue.config.js 파일이 필요한다.

 

vue cli2 에선 기본적으로 있으나, vue cli 3 부터 직접 만들어야한다.

 

 

위처럼 vue.config.js를 만든다.

vue.config.js 파일에 아래 처럼 입력한다.

module.exports = {
  publicPath: process.env.NODE_ENV = 'production'
  ? : '/githubPageTest/'
  : '/',
 outputDir: 'docs'
}

build 할때 output directory 경로로 정하는 config 값

publicPath를 추가한 이유는 해당 repository에 경로를 추가해야 해당 repository의 github page로 연결할 수 있기 때문

 

다른 자세한 config값은 아래링크 참조

https://cli.vuejs.org/config/#vue-config-js

Configuration Reference | Vue CLI

 

그리고 터미널 창에 명령을 치면

yarn run build

docs 폴더안에 build한 파일이 만들어짐

이제 커밋후 push 해준다.

git add .
git commit -m "change output directory"
git push -u origin main