Vue-cli Netlify 배포 방법

기본적으로 Vue-cli는 npm run build를 통해 dist 폴더가 생성되고, HTML,CSS,JS가 압축되어 들어간다.

 

Netlify를 통해 배포하기 전에, /public 폴더 아래 _redirects 파일을 생성 후 , 아래의 코드를 넣어주어야 한다.

 

# Netlify settings for single-page application
/*    /index.html   200

 

위 파일을 넣어야 URL에 router 값을 넣어도 not-found가 뜨지 않는다.

 

파일을 넣고 Github Repository에 푸쉬한다. 

Netlify에 접속 후 New site from git을 눌러 Repository를 연결한다. 

 

Netlify에 연결된 저장소를 클릭하고, Settings을 누른 후 좌측 메뉴의 Build & deploy를 누른다.

Build settings에서 edit settings를 누르고, Base directory와 Build command를 수정한다. 

Base directory는 dist 폴더를 바로 접근할 수 있도록 설정해준다. 

 

설정 후, Deploys 메뉴에서 Trigger deploy를 통해 배포한다. 

 

도메인 변경은, Settings 메뉴에서 General -> Site details에서 변경이 가능하다.