Firebase 무료 웹호스팅

https://firebase.google.com/

Firebase | Google's Mobile and Web App Development Platform

 

Firebase 홈페이지 접속 -> 우측 상단 Go to console로 접근하면 구글 계정으로 로그인 하여 Firebase 콘솔창에 들어갈 수 있다.

 

[Firebase Console 페이지 내 설정]

새 프로젝트 생성

 

프로젝트 이름 지정

 

다음으로 쭉쭉

 

애널리틱스 연동 하고싶으면 하기

 

웹 앱 시작

 

웹 앱 닉네임 지정

 

가이드가 뜨는데 일단은 무시하자

 

 

생성된 앱과 호스팅 사이트 선택해서 연결해주기

 

콘솔 페이지에서의 설정은 여기까지 해두고

로컬에 Firebase를 설치한다.

 

[Firebase Cli 설치]

https://firebase.google.com/docs/cli?hl=ko&_gl=1*new78r*_up*MQ..*_ga*NTMxMzg5MzYuMTcxNjI1Njg5NQ..*_ga_CW55HF8NVT*MTcxNjI1Njg5NC4xLjAuMTcxNjI1Njg5NC4wLjAuMA..#install_the_firebase_cli

Firebase CLI 참조  |  Firebase 문서

 

설치 방법에 여러가지 방법이 있는데

보통 Node.js 와 NPM으로 설치를 많이하네

 

[NPM으로 Firebase Cli 설치]

npm install -g firebase-tools

 

[Firebase 로그인]

firebase login

 

로그인 명령어를 치면 브라우저에서 구글계정 로그인을 할 수 있게 띄워준다.

 

[설치 확인 및 프로젝트 리스트 확인]

firebase projects:list

 

로그인 확인 및 계정 프로젝트 리스트 확인

 

[호스팅 시작 & 사이트 배포]

https://firebase.google.com/docs/hosting/quickstart?hl=ko&_gl=1*ldog6u*_up*MQ..*_ga*NTMxMzg5MzYuMTcxNjI1Njg5NQ..*_ga_CW55HF8NVT*MTcxNjI1Njg5NC4xLjAuMTcxNjI1Njg5NC4wLjAuMA

Firebase 호스팅 시작하기  |  Firebase Hosting

 

[호스팅 프로젝트 초기화]

firebase init hosting

 

public 디렉토리명 지정 후 나머지 기본 프로젝트 파일들 셋팅 자유롭게 지정. 아무것도 안할 시 아래처럼 생성된다.

 

public 폴더 안에 웹 앱 소스들 적용해주면 된다.

테스트용으로 템플릿 퍼와서 적용해주자.

(https://www.free-css.com/free-css-templates) 여기서 무료 템플릿 퍼옴

 

public 폴더 안에 웹 템플릿 적용

 

[사이트에 웹 앱 배포]

firebase deploy

 

 

 

배포하고 나면 콘솔 페이지의 호스팅 관리창으로 접근이 가능해진다.

 

Firebase 에서 제공해주는 무료 도메인으로 배포 된 페이지를 확인할 수 있다.