netlify deploy 간단 배포하기 - Vue 프로젝트

작업환경

운영체제 : window

 

---

 

필요 준비물

1. vue 프로젝트

2. github 계정

3. netlify 계정

 

 

vue 프로젝트 만드는 법 -> https://hbsowo58.tistory.com/479?category=938110 

Vue 프로젝트 만들기

 

github 회원가입 https://github.com/

GitHub: Where the world builds software

 

 

세 개가 준비된 상태에서, 배포를 시작하겠습니다.

---

 https://www.netlify.com/

 

Netlify: Develop & deploy the best web experiences in record time

 

 

상단의 사이트에 방문해주세요

 

netlify

상단의 Log in 버튼을 클릭해주세요 (빨간 버튼)

 

로그인 페이지

GitHub을 통해 로그인을 하겠습니다. (2번 방법을 위함입니다.)

github 로그인

아이디와 비밀번호를 입력한 후, 녹색 Sign in 버튼을 클릭합니다.

 

 

---

배포를 위한 2가지 방법 중 첫 번째 방법

 

netlify 로그인 성공!

 

로그인을 하면, 비슷한 페이지가 보일 텐데 달라도 괜찮습니다

 

빨간색 버튼을 클릭하시면

선택버튼

선택 버튼들이 나오고, Deploy manually 버튼을 클릭합니다.

 

드랍 방식 배포

위화면에서 upload 녹색 버튼을 클릭하거나, 색칠된 영역에 dist 폴더를 업로드하면 됩니다.

 

dist 폴더는 어떻게 만드나요?

 

vue 프로젝트가 존재하는 곳의 package.json이 있는 경로로 터미널을 이동합니다.

 

경로 확인

그림

바탕화면에, 프로젝트 폴더(빨간색) vue 프로젝트가 있습니다. package.json이 있는지 확인 후(주황색),

 

노란색 영역에 클릭 후 CMD라고 입력합니다. 

 

 

노란색 영역에 cmd 검색

 

 

명령 프롬프트가 나타나면 npm run build라고 입력합니다.

 

npm run build

잠시 후에, dist라는 폴더가 생깁니다.

 

netlify

dist폴더를 클릭하여, netlify에 드래그엔 드롭합니다.

 

uploading...

결과

빨간색 영역에 Published라고 나타났으면, 주황색 버튼을 클릭해보면 결과가 나타납니다.

 

주황색 버튼에 적혀있는 것이 배포된 주소입니다.

 

vue 사이트 배포 성공!

본인이 만든 프로젝트를 배포하여 자랑도 하고 운 영도해보는 경험을 가지면 됩니다.

 

다만, 이 방법의 문제점은 파일에 수정이 생길 때마다 build 하여 드래그엔 드롭 과정을 다시 거쳐야 합니다.

 

다음에는 다른 방법으로 배포해보겠습니다.