만든 Vue 사이트 build & Github Pages로 배포하려면

(Vue 강좌 목록으로 돌아가기)

 

 

여러분이 Vue로 만든 사이트를 배포하려면 빌드 또는 컴파일 작업이 필요합니다.

왜냐면 웹브라우저는 HTML CSS JS 파일만 해석이 가능하기 때문에 .vue 파일을 그걸로 변환해야합니다.

그걸 빌드 또는 컴파일이라고 하는데

그 후에 HTML CSS JS 파일을 어디 올리면 되겠습니다.

우리는 무료로 HTML 파일을 호스팅해주는 Github Pages를 이용해 배포까지 해보도록 합시다. 

빨리 github.com 들어가서 계정을 먼저 하나 생성해오십시오. 

 

 

 

 

 

1. 님들이 만든 Vue 프로젝트를 build 하는 법

 

npm run build

여러분의 Vue 프로젝트에서 터미널을 켠 후 이런 명령어 입력하면 됩니다.

(Vite, Vue-cli 아무거나 쓰든 동일)

 

 

 

 

▲ 그럼 여러분 Vue 프로젝트 폴더 내에 dist 라는 폴더가 하나 생성됩니다. 

여기 안에 작고 소중한 html, css, js 파일이 전부 담겨있는데

그걸 이제 github pages에 올려봅시다.

 

 

 

 

 

2. 무료 호스팅해주는 github pages

 

간단하게 HTML/CSS/JS 파일을 무료로 호스팅해주는 고마운 github 기능입니다.

일단 github.com에 들어가셔서 로그인까지 하십시오.

 

 

 

▲ 그 다음엔 우측 상단 + 버튼을 누르셔서 New Repository 버튼을 누르십시오.

 

 

 

 

▲ 리포지토리 생성시 이름은 꼭 왼쪽에 뜨는 여러분아이디.github.io 라고 입력하셔야합니다.

여러분아이디.github.io 말고 임의로 설정하시면 컴퓨터가 폭발하고 여러분 코딩인생 끝납니다. 

그리고 README 파일 생성도 체크한 뒤에 생성해주시면 됩니다. 

 

 

 

 

 

3. 리포지토리에 파일 올리면 되는데

 

이제 리포지토리에 파일을 올리면 끝입니다.

 

 

 

▲ 그럼 거기에 dist 폴더 내의 파일을 전부 드래그 앤 드롭하면 됩니다. 

dist 폴더를 드래그 앤 드롭하는게 아닙니다. dist 폴더 안의 내용물이요.

드래그 앤 드롭하고 초록버튼까지 눌러주시면 배포 끝입니다. 

이제 5분 정도 후에 아까 여러분이 작성했던 https://여러분아이디.github.io 로 들어가면 사이트가 보입니다.

 

 

 

 

 

4. 혹은 "내아이디.github.io/서브경로" 에다가 발행하고 싶은 경우 

 

github이 좋아져서 언제부터인가 그냥 아무 이름으로 만든 리포지토리도 github pages 기능 이용이 가능합니다.

 

1. 그럴려면 설정이 필요한데 프로젝트 폴더에 있는 vite.config.js 파일 안에 이렇게 작성합시다.

 

export default defineConfig({
  어쩌구~~
  base : '/배포할리포지토리이름'
}) 

입력해줍시다.

그럼 css, js파일들 경로가 /리포지토리이름/어쩌구.css 이런 식으로 변경됩니다.

또는 base : './' 입력해주고 진행해도 됩니다. (그러면 ./어쩌구.css 이런 식으로 경로가 변경됨)

 

2. npm run build 다시 해줍시다.

 

3. 리포지토리를 하나 만들어줍니다. vite.config.js에서 썼던 이름이 좋겠군요.

참고로 내아이디.github.io 리포지토리는 남겨둬야합니다.

 

4. 그 리포지토리에 똑같이 dist 안의 HTML CSS JS 파일을 업로드합시다.

 

5. 리포지토리의 setting 메뉴에 들어가서 Github Pages 부분을 찾습니다.

 

 

▲ 6. source 부분을 None이 아니라 main 이런걸로 바꿔주고 저장하셈

 

7. 그럼 셋팅 끝이고 이제 님아이디.github.io/repository이름으로 들어가면 리포지토리에 있던 html 파일을 구경 가능합니다.

 

 

 

 

 

Q. 왜 사이트 주소로 접속했는데 404 페이지가 뜨죠?

- 5분 더 기다려보십시오.

- ctrl + shift + r 을 이용해 새로고침 해보십시오.

- 혹은 repository 생성하실 때 내아이디.github.io가 아니라 뭔가 잘못적은 것임

 

 

 

Q. 업데이트 사항이 생기면?

npm run build 또 하고 그 파일 그대로 다시 업로드하면 됩니다.

빌드할 때 마다 CSS, JS 파일 명이 무작위로 다시 생성되기 때문에

그래서 새로 배포할 때마다 사이트 방문자들은 새로운 CSS,JS 파일을 이용할 수 있습니다. 

 

 

 

Q. 빌드할 때 압축 시키지말고 남기고 싶은 파일은?

여러분이 src폴더에 넣었던 jpg, js, css 파일들은 전부 짜부되고 이름이 변합니다.

이름이 변하지 않게 하고 싶으면 public 폴더안에 넣고 빌드해보십시오.

그럼 빌드하고 나서도 그대로 루트경로에 파일이 남아있습니다.

(개발시 그런 파일들을 이용하고 싶으면 public 폴더에 보관하고 / 경로로 import 해오면 됩니다)

 

 

 

Q. 서버에 올렸는데 왜 접속하면 이상한 페이지가 나오거나 일부 img, css파일이 로드가 안되는 것이죠?

- build 할 때 에러 안났겠죠 

- 혹시 하위폴더에 배포한거 아닙니까

- 배포한 페이지가 안나오면 크롬개발자도구 열어서

index.html이 쓰고있는 css, js, img 파일들의 경로가 제대로 되어있는지 체크해봅시다.

 

 

 

Q. 메인페이지 말고 왜 특정 페이지로 접속하면 404 에러가 뜨나요?

라우터를 쓰는 경우

어쩌구.github.io/detail/1 이렇게 세부 페이지 URL을 주소창에 직접 입력하면

찾는 페이지가 없어요~ 이렇게 404 에러가 날 수 있습니다.

 

이건 서버에서

"누군가 /어쩌구 로 접속하면 메인페이지로 안내하세요~"

라고 API 개발을 해놔야합니다.

 

하지만 github pages는 우리가 서버를 어쩌고 할 수 없어서 어쩔 수 없습니다.

아니면 URL에 #기호가 붙는 hashRouter를 라우터 사용시 설정해놓든가 하면 됩니다.

URL에 # 뒤에 붙은 내용은 서버로 전송되지 않습니다.