[Github] Vue 프로젝트 Github Pages 배포하기

서론

사이드 프로젝트를 갭라하면서 프론트엔드 부분을 어디에 배포할지 고민하다가
무료로 사용할 수 있는 Github Pages를 활용하기로 한다.

최대한 신속하게 퍼블리싱하는 것이 목적이라 Vue 프레임워크를 선택하였으며, 원본 소스는 Private로 관리한다.

---

배포는 build 결과물을 업로드하자

• Vue 프레임워크를 활용하게 되면 .vue 파일을 사용하게 된다.
• 당연하게도 웹 브라우저는 해당 파일을 바로 컴파일하지 못한다.
• npm run build : dist 폴더 내 컴파일된 정적 파일을 생성 후 활용하자.
  • build 후 dist 폴더가 생성된다면, dist 폴더 내 모든 파일을 github.io 레포에 push 해주면 된다.

Vue.js 렌더 파이프라인

 

---

Github Pages는 자동 배포?

• {github ID}.github.io 레포지토리를 생성하게되면 자동적으로 Github Pages가 동작하게 된다.
• 이후 git add . -> git commit -> git push 과정을 통해 레포지토리 상태가 변경된다면, Github Actions가 동작하면서 CI/CD 과정이 수행된다.

Github Actions

---

테스트는 로컬에서.. 배포는 장애 최소로~!

1. 당연한 논제지만, 마음처럼 되지 않는 것이 배포 단계라고 생각한다.
2. 장애 발생 시 최소한의 Loss를 유지하는 것을 유념하고 진행하자.
3. 로컬 환경에서만의 테스트도 중요하지만, 네트워크망(프록시 등) / 트래픽량 등 포괄적으로 여러 측면에서의 테스트 기법도 적용하거나 고민해보는게 좋다.

모던 프론트엔드 테스트 전략 — 1편