vue-cli> deploy to git pages

vue-cli project 를 git pages 에 deploy ( 배포 ) 하자.

og graph 을 prerendering 테스트 라든가 등등의 서버에서 테스트 할 때를 대비함과 동시에 포트폴리오 관리를 위하여.

open graph 는 github page url 은 적용되지 않는다. ( 삽질... )

vue-meta 로 관련값이 meta로 기록되기는 하나 url 공유시 미리보기 되지 않는다.

왜?!!! 인지....

아래의 내용은 그냥 vue-cli 3 project 를 github pages로 배포하는 내용으로만 참고하면 될듯하다.

기본설정 방법은 Vue CLI 사이트에서 제공하는 공식내용을 바탕으로 한다.

https://cli.vuejs.org/guide/deployment.html

Deployment | Vue CLI

 

deploy.sh 작성 시

# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

둘 중의 두번째 옵션으로 fetch해주는 것으로 선택하는 것이 합당해 보인다.

그럴경우 master 에는 작업프로젝트, gh-pages 라는 branch에는 build 내용이 버전관리되는 구조로 사용한다.

다른건 다 알겠는데... deploy.sh 를 run 하라구?
HOW!!! .sh 라?... 처음 보는 파일형식다.
.sh 파일 실행하는 방법을 구글링 해 본 결과 window 에서는 bash 명령어를 사용한다.
src/packge.json 파일의 scripts 에 deploy 라는 것을 설정하고 "bash deploy.sh" 라고 코딩한다.
terminal 에

 

projectfolder> npm run deploy

라고 친다. 엔터... 않된다.

 

log를 살펴보면 bash 라는 명령어는 정의되어 있지 않아 사용할 수 없다... 라고
다른 deploy 방법을 찾으려고 방황하다 이 공식문서의 설정이 더 깔끔하다는 생각에

다시 시도한다.

환경변수에 등록하면 되지... 라고 이제서야 생각이 난다.

C:\Program Files\Git\bin
를 환경변수에 추가해준다. 환경변수를 수정하면 컴퓨터를 껏다가 켜야한다.

다시 npm run deploy
뭔가 돌아간다....시원시원하게 돌아간다....

돌아가다가 git access 에서 denined...

응?

구글링을 통해 아주 친절한 내용을 발견했다.

https://gist.github.com/adamjohnson/5682757

Fix "Permission denied (publickey)" error when pushing with Git

된다!!!!!!!!!

성공하고 나서는 이렇게 간단하고 당연한 걸 나는 왜 헤매었나라고 생각한다.... 이상한 심리

그래~ 위의 참고 사이트들처럼 나도 배워서 남주는 사람 아니 공유하는 사람이 되자.
혹시 나같은 경우를 겪는 분들을 위해 그리고 깜빡깜빡 하는 미래의 나를 위해 남겨본다.