[Firebase] Vue.js 앱을 Firebase Hosting 기능을 사용하여 배포하기

 

INTRO

---

firebase를 사용하여 APP을 배포해볼것이다.

firebase는 push알람을 보내는 cloud Messaging 기능으로 유명한데

이번 포스팅에서는 Web app을 배포(Hosting)하고, json형식의 nosql Database를 구축하고 사용(Firestore)하는 기능을 사용해본다.

 

 

---

 

 

 

1. 프로젝트 생성

우선 firebase에 구글 계정으로 로그인 후, firebase프로젝트를 생성해야 한다.

이 프로젝트에서 아래 보이는 firebase의 다양한 기능들을 사용할 수 있다.

Hosting은,  프로젝트를 생성하고, 내가 로컬에서 작업한 파일들을 배포 하는 형식이다.

 

 

--> firebase에 접속

firebase.google.com/

Firebase

 

-->구글 로그인 후 프로젝트 생성

 

 

-->프로젝트 이름 입력

--> 구글애널리틱스 사용할것인가?

--> default로 그냥 진행(사용)

 

--> 애널리틱스 계정 -> Default로 진행

--> 프로젝트 생성 중..

 

--> 새 프로젝트가 준비되었습니다.

--> 이제 firestore, Hosting 등의 기능을 사용할 수 있는 프로젝트가 생성되었다.

 

 

 

 

---

 

 

 

 

 

2. Web APP등록하기

-->App을 등록할 것이다.

APP을 추가하여 시작하기 에서 Web app을 선택한다.

--> 웹앱 이름을 입력하고, Hosting기능을 사용하기 위해 체크박스를 체크한다.

 

 

 

--> 다음 단계는 내 web app에 firebase관련 태그를 추가하라는 내용이다.

--> 나의 경우엔 이 부분은 건너뛰어도 무방했다

 

 

 

--> 다음단계는 Firebase CLI를 설치하는 것이다.

--> 기존 생성한 vue프로젝트의 터미널에서 아래와 같이 입력하여 firebase-tools를 설치한다.

--> 기존 프로젝트가 없다면 새로 만들어야 한다.

--> 아래 포스팅을 참고한다.

rangsub.tistory.com/82?category=966512

[vue.js] vue.js란? 개발 환경 만들기

npm install -g firebase-tools

 

 

--> firebase tools가 설치 완료되었다면, 아래와 같은 방법으로 배포할 수 있다.

 

 

 

---

 

 

 

3. 배포하기 위한 firebase설정

--> 위에서 app을 firebase 프로젝트에 등록했을 것이다.

--> 또한 npm install -g firebase-tools 명령어를 통해 firebase tools을 설치하였을 것이다.

--> 배포를 위해 아래 명령어를 입력해 firebase에 로그인을 한다.

--> 해당 명령어를 terminal에서 사용할 수 있는 이유는 위에서 firebase CLI를 설치하였기 때문이다.

firebase login

 

 

-->다음으로 firebase init 명령어를 입력한다.

--> 해당 명령어는 firebase 연동에 필요한 몇가지 설정을 하는 것이다.

firebase init

--> 입력하면 아래와 같은 화면을 볼 수 있다. y입력.

 

 

 

-->우리는 현재 hosting 기능을 사용할 것이므로, 화살표 방향키로 Hosting 까지 이동하여 스페이스바로 선택한다.

--> (이외 기능들은 추후 포스팅 할 예정. 아직 Hosting과 Firestore밖에 써보지 못했다.)

 

--> 이후 firebase프로젝트를 선택하라는 문구가 출력된다.

--> use an existing project를 선택 후, 아까 생성한 firebase프로젝트를 선택해준다.

 

 

 

--> 해당 문구가 출력되지 않을 경우, 명령어 실행을 ctrl+c로 멈추고, 아래와 같이 firebase.json파일을 새로 생성해준다.

{
  "projects": {
    "default": "testapp2-xxxxx"
  }
}

여기서 default 항목에 들어가는 testapp2-56241 은 아까 생성한 프로젝트의 고유 이름이다.

이걸 입력 후 다시 firebase init을 해주면 정상 동작할것이다.

 

 

 

 

-->아래에선 dist라고 입력해준다. 이유는 vue 프로젝트 빌드 시(npm run build) default로 dist 폴더에 결과물이 생성되기 때문이다.

 

--> 본인이 빌드 결과물을 다른 곳에 생성되도록 설정했다면, 해당 폴더를 입력해주면 된다.

 

 

 

 

-->y 입력

 

 

 

--> n입력( github를 연동하고 싶은 분은  y 입력 후 github 아이디와 pw를 입력하면 됩니다.)

 

--> 이후 initialization이 성공했다는 문구가 출력된다.

 

 

 

--> initialization 이후 firebase.json파일을 보면 아래와 같을 것이다.

 

 

---

 

 

 

4. 배포하기

--> 배포하기 위해 우선 프로젝트를 빌드한다.

npm run build

 

--> 빌드가 완료 된 모습이다. 이후 dist 폴더를 보면 결과물이 생성되어있는것을 볼 수 있다.

 

 

-->이제 배포할 일만 남았다. 아래 명령어를 통해 아까 생성한 firestore프로젝트에 배포하자

firebase deploy

 

-->배포 성공

 

-->이후 hosting URL을 접속하면 내가 만든 vue페이지가 정상 출력되는 것을 볼 수 있다.

 

--> firebase 는 현재  hosting은 무조건 무료로 제공하고 있으니 해당 사항은 신경쓰지 않아도 될 것 같다.

 

---

 

 

마무리

 

firebase로 웹 앱을 배포해보았다.

개인 공부용으로 또는 다양하게 활용할 수 있을것 같다.

 

 

 

 

 

 

 

 

-퍼가실 때는 출처를 꼭 같이 적어서 올려주세요!