Vue 배포 기초

0. 들어가면서

우리는 지금까지 로컬에서 Vue를 만들어 보았다. Vue cli와 Vue router 관련해서는 클릭해서 알아보자. 지금까지 Vue를 완성했다고 가정하고 들어가 보겠다.

 

 

 

1. Vue Build 하기

 우선 서버를 실행하면 다음과 같은 창이 나올 것이다.

보면 최적화하기 위해서는 Build 하라고 나온다. 빌드를 진행하자.

$ npm run build

완료가 됐다면 상태창은 다음과 같다.

 

설치 후에 dist라는 폴더가 생성되었고 폴더 안에는 js 파일 2개와 css 파일 하나가 생성이 됐다. 우리는 지금까지 각각의 파일 안에 style을 만들어 놨다. 그러나 build를 하면 우리가 작성한 모든 자바스크립트 코드, 작성한 라이브러리, 라이브러리가 의존하는 코드를 포함하여 모두가 압축되어 들어가게 된다. 즉, 기존에는 로컬에서 Vue 서버에 주고받으면서 실행했지만, 배포가 가능하도록 관련된 모든 파일들을 dist 폴더 안에 넣어놔서 dist 폴더만으로 실행이 가능하게 만들어 놓은 것이라고 생각해도 된다. (git에는 올라가지 않는다.)

 

 

 

 

2. netlify

Netlify는 웹 기반 응용 프로그램 및 정적 웹 사이트를 위한 호스팅 및 서버리스 백엔드 서비스를 제공한다. 정적 웹 사이트라는 것은 데이터를 모델에 넣고 그런 게 아니라, 요청이 오면 단순히 문서 한 장을 주고 끝난다. 우리는 netlify를 사용하여 간단하게 배포를 해볼 예정이다.

www.netlify.com/

Netlify: All-in-one platform for automating modern web projects

들어가보면 가장 빠르게 빌드할 수 있다고 소개되어 있다.

 

홈 페이지를 보다 보면 Vue를 배포 가능한 것을 알 수 있다. 우선 회원가입을 하자.! 가능하면 github으로 연동하는 것을 추천한다. 로그인 이후에 site를 누르면 아래와 같은 화면이 나온다.

가운데 영어를 읽어보면 파일을 드래그해서 넣기만 하면 될 것 같다. 그럼 해보자. dist 폴더를 아래와 같이 드래그해서 넣자.

 

넣으면 아래와 같은 화면이 뜬다.

 

화면을 보면 step 2를 눌러서 해야할 것 같다. 그러나 지금이 배포가 된 상태이다. 위 쪽에 나타나고 있는 url을 눌러보자. 그러면 우리가 만들었던 화면이 바로 뜬다. 배포 끝!

 

그렇다면 step2는 단지 우리가 구입한 도메인 주소가 있다면 그것으로 바꿔주는 것이므로 꼭 사용할 필요가 없다.

 

netlify는 위와 같이 간단한 배포를 가능하게 하기 때문에 요즘 많이 뜨고 있다. 그러나 단점도 있다. 코드가 수정 되었을 때 번거롭다. 자동화가 아닌 수동이다. 따라서 급하게 배포가 필요하다면 위와 같이 배포를 해주면 된다.

 

그렇다면 다른방식은 무엇이 있을까? 우리가 연동한 github로 배포를 하는 것도 가능하다.

 

 

 

 

 

3. github 배포

 github에 내가 만든 프로젝트 하나가 리포지토리에 들어가 있으면 된다. 여기서의 주의점은 위에서 처럼 build를 하여 dist 파일이 있는 것이 아니다. 왜냐하면 우리는 수정을 할 수 있게 하기 위해서 github에 넣는 것이기 때문에 build를 하면 안 된다. 이때 특이한 점은 public이 아닌 private으로 만들어도 배포가 가능하다. 등록이 되어있다면 아래와 같은 site에 들어가자.

 

site를 보면 위에서 드래그하여 배포된 것을 볼 수 있다. 우리는 여기서 오른쪽 위에 있는 New site from Git을 누르자. 그러면 아래와 같은 화면이 나타날 것이다.

 

 

GitHub를 눌러 아래와 같이 Select repositories를 눌러 연동하고 싶은 레파지토리를 선택한다.

그런다음 확인을 눌러 준다. 그러면 2단계까지 완성이 된다.

 

 

3단계로 넘어가면, 여기서가 중요하다. 드래그로 배포할 때는 dist 파일만 드래그해줬지만, 여기서는 하나의 파일이 아니라 흩어진 파일을 배포를 해야 한다. 따라서 직접 build 과정을 해줘야 한다. 3단계에서 아래 부분이 빌드를 직접 하는 부분이다.

 

 

간단하다. 

Build command 에 npm run build 라고 적어주자. 그 말을 빌드를 하려면 직접 npm run build라는 명령어를 쳐줘야 한다는 말이다.

Publish directory에는 build 이후에 공개할 폴더는 무엇이냐고 물어보는 거다.  위에서 했듯이 dist를 적어주면 된다. 만약 깃 헙에 보안키를 안 넣어놨다면, 아래의 내용을 좀 더 보자.

 

 

 

 

보안키 오류

 작성한 보안키가 없다면 배포가 될 것이다. 그러나 .env.local에서 key값을 숨기고 있어서 github에 안 올라가는 경우가 있을 수 있다.

 

Show advanced를 눌러서 Environment variables이라는 환경변수 setting 하는 것을 찾자. 거기서 Edit variable를 누르고 key value 적는 칸에 변수와 값을 복사해서 넣어주면 된다. 넣어주면 알아서 process.env.변수이름으로 찾아간다.

 

 

배포가 끝!