[ Vue.js + Firebase ] Vue.js 프로젝트를 Firebase 호스팅으로 배포

이번 블로그에서  Firebase 호스팅 서비스를 사용하여 Vue.js 애플리케이션을 배포하는 방법을 짧고 쉬운 방식으로 보여드리겠습니다.

 

정적 사이트, 단순한 앱 랜딩 페이지 또는 복잡한 PWA(Progressive Web App)를 구축하는 경우 Firebase Hosting 기능으로 웹사이트와 앱을 구축하고 관리하기 위해 맞춤화된 툴이나 기능,  인프라까지  제공합니다.

생각보다 간단해서 다음 순서대로 따라하시면 쉽게 해결하실 수 있습니다.

· Firebase 호스팅 프로젝트 설정

· 프로젝트 구성

· Firebase CLI 설치

· Vue 애플리케이션 배포

 

---

 

1. Firebase 호스팅 프로젝트 설정

---

파이어베이스 호스팅 프로젝트를 설정하려면 공식 사이트로 이동하여 메인 탐색 외하단에 있는 "GO TO CONSOLE" 링크를 클릭합니다.  그런 다음 Google 계정으로 로그인하거나 계정이 없으면 새 계정으로 등록하고  인증 프로세스가 완료되면 Firebase Console 시작해주시면 됩니다.  


프로젝트 없거나 vue 프로젝트와 연동하지 않는 경우 다음 자료를 참고해주시면 되겠습니다

a) Add a project

 

 

 

 

 

b) 프로젝트 생성 후 Project Overview -> Project Settings 페이지에서 새로운 프로젝트 아이디나 다양한 정보를 받을 수 있습니다

c) 다음 링크를 통해 Firebase와 Vue 프로젝트를 연동하고 이이서 진행합니다.

https://prmblogs.tistory.com/2

 

---

 

 

2. Firebase CLI 설치

---

Firebase CLI를 설치하려면  Node.js 및 npm이 이미 설치되어 있어야 합니다.이제 명령 프롬프트를 열고 npm을 통해 Firebase CLI를 설치합니다.

npm install -g firebase-tools

 

---

 

3. Vue 애플리케이션 배포

---

프로젝트를 구성하려면 먼저 빌드해야 합니다 . 배포해야 할 모든 항목이 포함된 dist 폴더가 생성됩니다.
그런 다음 Firebase에서 dist 폴더를 가리켜야 합니다. 그렇기 때문에 두 개의 구성 파일이 필요합니다.

npm run build

 

.firebaser라는 새 파일을 생성하여 다음과 같은 내용을 제공합니다. Firebase 프로젝트 아이디를 수정후 저정하고 닫아주시면 됩니다.

{
  "projects":{
    "default" : "your-firebase-project-id"
  }
}

 

firebase.json 라는 다른 구성 파일을 만들어 보겠습니다 다음 내용을 추가합니다.

{
	"hosting":{
		"public":"dist",
		"ignore": [
			"firebase.json",
			"**/.*",
			"**/node_modules/**"
		],
		"rewrites":[
			{
				"source":"**",
				"destination":"/index.html"
			}
		]

	}
}

 

 

응용프로그램을 배포하려면 먼저 로컬 컴퓨터를 Firebase 계정에 로그인하고 Firebase 프로젝트에 연동시켜야 합니다.  이렇게 하려면 다음을 실행합니다. 성공시 다음 이미지처럼 알림장이 나옵니다.

firebase login

 

 

 

 

 

마지막으로 생성되 build 파일을 Firebase 호스팅으로 배포합니다.

firebase deploy

 

 

꿀팁!!

다음에 파일이 수정하거나 계속 코드 내용이 수정되면 다음 명령어를 사용하면 도움이됩니다.

npm run build && firebase deploy

 

 

이 명령은 이전에 만든 Firebase 프로젝트에 dist 폴더 내용을 배포합니다. 이제 https://your-firebase-project-id.firebaseapp.com을 방문하면 HTTPS 서버에서 원하는 사이트를 바로 볼수있습니다.

 

 

---