[Vue/코딩애플/part2] 7. build / Github pages 로 배포하기
우리가 실습을 통해 만든 Vue 페이지를 다른 사람들도 볼 수 있게 배포하려면 build용 파일을 생성해야 한다.
웹브라우저는 HTML CSS JS 이 세개의 언어만 해석할 수 있다.
=> 브라우저는 .vue 파일을 읽을 수 없다
그래서 build 를 하면 브라우저 친화적인 HTML CSS JS 파일로 바꿔준다
빌드 된 것을 웹에 올리면 이제 다른 사람들도 내 사이트를 방문할 수 있다.
📌 Vue 프로젝트 build 하기
1. vue 프로젝트에서 터미널 열기
2. npm run build or yarn build // 에러가 있으면 build 되지 않음
3. Vue 프로젝트 내 dist 폴더 생성 확인
dist 폴더 안에 index.html , css파일, js 파일이 전부 담겨 있다.
build 하면 파일 사이즈를 압축한다. 파일명도 무작위 생성된다.
여기 안에 있는 내용들을 모두 서버에 올리면 된다.
우리는 지금 서버가 없으니 github pages 를 이용해보자
📌 github pages 이용하기
1. github 접속 후 로그인
2. github new repository (레파지토리 생성)
- repository name 은 {{깃헙아이디}}.github.io
꼭 자신의 ID 를 입력해야한다. 바로 왼쪽 Owner 에서 자신의 ID 를 확인할 수 있다.
3. Repository 생성 후 파일 올리기
dist 폴더 내 모든 파일을 드래그 해서 옮기면 된다.
4. 10분 정도 후에 https://{{깃헙아이디}}.github.io 로 접속하면 사이트가 보인다
📌 '깃헙아이디.github.io/서브경로' 에 사이트 발행하고 싶을 때
1. 방금 만든 repository 는 삭제하지 말고 새로운 repository 생성
2. repository 이름은 아무 이름으로 설정, Add a README file 체크
3. 뷰 프로젝트 파일 오픈 > vue.config.js 파일 생성
다음 코드를 추가하면 된다.
module.exports = {
publicPath: '/repository이름',
}
publicPath 에 /내가만든 repository 이름 을 적는다.
4. npm run build (다시 빌드)
5. dist 안의 프로젝트 파일을 vue 라는 이름의 repository 에 드래그해서 업로드
6. 업로드 완료 후 repository 설정 > Pages 들어가서 main, / 경로로 github pages 발행하겠다고 저장
7. 깃헙아이디.github.io/vue 로 접속해서 잘 노출되는 지 확인
🔎 만약에 안보이면 깃헙아이디.github.io/vue/index.html 로 접속하기
⚡ 404 에러가 뜬다면
- 더 기다렸다가 접속해보기
- 새로고침
- /index.html 붙여서 다시 접속
- repository 생성할 때 내 아이디 잘 적었는 지 확인 (대소문자 등) : 이름 틀렸다면 다시 새로 만들기
⚡ 특정 URL 접속 시 404 에러가 뜬다면 (ex. 깃헙아이디.github.io/detail/1)
주소창에 뭔가 입력한다는 건 서버에게 '/detail/1 페이지 주세요~' 라는 요청을 행위이기 때문에 에러가 날 수 있다.
=> 서버에서 깃헙아이디.github.io/detail/1 로 접속하면 vue 메인 페이지로 보내주세요~ 라고 개발을 해야한다.
(하지만 github 서버는 우리가 제어 불가)
해결방법
1) 사이트 메뉴 잘 만들기 (페이지 이동 버튼 구현)
2) URL 에 # 기호가 붙는 hash mode 사용 (아래 글 참고)
[Vue/코딩애플/part2] 6. Hash mode vs HTML mode / Navigation guards
📌 Hash mode vs HTML mode현재는 아래와 같이 셋팅했다.import { createRouter, createWebHistory } from 'vue-router'const router = [];const router = createRouter({ history: createWebHistory(), routes,}) history: createWebHistory() 로 셋팅
onlynana.tistory.com
⚡ 파일 업데이트 후 재배포는?
- build 를 하고 새로 생긴 dist 파일을 전과 동일하게 드래그해서 repository 에 업로드하면 된다.
build 할 때 마다 CSS, JS 파일 명에 dist 폴더 내에 무작위로 다시 생성됨
⚡ build 할 때 압축 시키고 싶지 않은 파일이 있다면?
- 우리가 코드 짤 때 ./경로로 첨부한 이미지, js 파일은 모두 압축되고 이름이 변경된다.
이름이 변경되지 않게 하려면 public 폴더 안에 넣으면 된다.
build 하고 나서도 그대로 루트 경로에 파일이 남아있게 된다.
(개발시 public 파일을 이용하고 싶으면 ./ 가 아닌 / 경로로 import 하기)
⚡ 일부 img, css 파일 로드가 안되는 경우
- 기존에 내아이디.github.io 가 이미 는 경우 다시 올리면 github pages 이상해질 때가 있다.
- 새로 서브 경로로 repository를 만들어 올려보기
- 배포한 페이지가 잘 안나오면 크롬개발자 모드열어서 index.html 이 쓰고 있는 css, js, img 파일의 경로가 제대로 되어 있는 지 체크