Firebase로 web hosting

Pilot project를 만들어서 온라인에서 써 보려면 어떤 형태로든 public에서 접근 가능한 곳이 있어야 하는데, 지속적인 서비스를 하지 않으면 이런 곳 섭외부터가 좀 부담이 됩니다. 최근에 github에 올린 코드가 그대로 hosting 되는 것을 확인했는데, 애초 목적이 그것이 아니라서 정적인 코드만 쓸 수 있다는 한계가 있었죠. 그런 문제로 자문을 구해 보니, firebase에서 web hosting이 된다는 것을 알 수 있었고, 조금 맛을 보니 꽤 좋은 것 같네요.

 

간단히 확인 한 내용 정리 해 둡니다.

이 내용의 포스트도 여기저기 많이 있으니 참고 하시면 됩니다.

 

저는 Firebase에서 준비 해 둔 내용을 보고 따라 해 봤습니다.

https://firebase.google.com/docs/hosting/quickstart?hl=ko

Firebase 호스팅 시작하기

 

1. 프로젝트 생성

https://firebase.google.com/?hl=ko

Firebase

시작하기

firebase에 처음 접속해서 시작 해 보겠습니다. 다른 업무 목적으로 Remote config 기능은 사용 해 봤는데, 참 다양한 기능이 제공되는 것 같네요. 구글은 이런 식으로 사업을 선점하는 것 같네요. 경쟁사들의 유료 서비스를 무료와 좋은 기능으로 풀어서 사용자들 모으고 경쟁사들 고사 시키고, 그 다음에 독점적인 상태에서 플랫폼의 경쟁력을 더욱 공고히 하고, 그 영향력을 이용해서 시장을 조정하고... 사용하는 입장에서는 좋긴합니다만, 염려가 되는 점도 분명 있어요. 국내 업체들의 클라우드도 비슷한 조건으로 사용 할 수 있는 서비스가 있다면 한번 고려 해 보면 좋겠어요.

  

 

프로젝트 생성

 프로젝트 만들기를 눌러 프로젝트를 미리 만들어 둡니다. 나중에 생성해도 되는데, 나중에 CLI(Command Line Interface) 환경에서 하는 것 보다는 화면 보고 하는게 편하니까요~ 이런 세부 내용의 안내는 firebase에 가이드 문서들이 다 있어요.

 세부 단계를 간단히 설명하자면, 프로젝트 이름이 있어야겠죠?

뭐 별 것 없어요. ^^

다 준비되면 만들어 줍니다.

 

2. firebae CLI

https://firebase.google.com/docs/cli#install-cli-windows

Firebase CLI 참조

 CLS는 앞에서 말씀 드린 것 처럼, Command Line Interface의 약자입니다. 저는 윈도우를 쓰고 있는데, 간단히 말하자면, Dos 환경에서 쓰는 기능이라 생각하면 됩니다. 

 

이걸 설치하는 방법도 선택 할 수 있는데, node.js를 설치하는 방법으로 해보겠습니다. 그냥 CLI만 설치 할 수도 있는데, node.js를 쓰면, npm이 설치되고 npm을 쓰면 다양한 패키지를 매우 쉽게 쓸 수 있어요. node.js도 nvm이라고 node version manager를 써서 설치 할 수 있는데.... 너무 멀어지고 복잡해지니 그냥 node.js를 직접 설치하는게 좋겠네요.

 

nodejs.org/en/

Node.js

저는 윈도우를 쓰니 윈도우용을 설치해서 쓰겠습니다. 

 

Firebase CLI 설치 화면

node.js가 설치되고 나면 command prompt로 들어갑니다.

그리고 npm을 이용해서 firebase tool들을 설치 해 줍니다. 

npm install -g firebase-tools

 

Project 연동

CLI가 설치되고 난 후에, 이제 프로젝트 연동을 위한 작업을 합니다.

먼저, firebase에 로그인을 합니다.

 

Project와 연동 할 폴더를 만들고, 그곳으로 이동해서 작업을 합니다.

 

firebase login

실제 로그인 페이지는 웹 페이지로 나타나고 로그인이 되면 콘솔창에 결과가 나타납니다.

 

프로젝트 설정

firebase CLI를 써서 제 프로젝트와 연동하는 것을 확인 해 보겠습니다.

먼저 어떤 프로젝트가 있는지 한번 볼까요?

firebase projects:list

프로젝트가 하나 있고, 그 현황이 보입니다.

firebase 초기화를 해 보겠습니다.

firebase init

 다음으로 설정하고자 하는 모듈을 선택합니다. Hosting만 선택 해 볼께요.

그냥 기본값으로 쭉 설치하면 됩니다.

설치를 시작한 폴더 안에 public이라는 폴더와 여러가지 json 파일이 있고, 그 안에 2개의 html 파일이 있는 것을 볼 수 있습니다.

 public 폴더 안의 index.html을 확인 해 보니, 이런 내용이 나오네요.

 Localhost에서 확인

위에서 확인한 것은 그냥 html 파일을 브라우져로 확인 한 것이고, 서버를 통해서 html 파일을 확인 해 보겠습니다.

firebase serve

끝에 보이는 URL로 접속 해 조면, 아까 확인했던 html 파일이 로컬 서버에서 돌아가고 있는 것을 확인 할 수 있습니다.

HTML 파일을 수정해서 제대로 반영되는지 확인 해 보겠습니다.

Hello City를 출력하도록 했습니다.

로컬 서버에서도 잘 확인되네요.

 

이제 완성 된 내용을 실제 온라인에 올려보겠습니다. firebase의 deploy를 쓰면 됩니다.

firebase deploy

끝에 보이는 URL로 접속 해 보면 잘 나옵니다

 

이상 기본적인 웹호스팅 과정을 살펴봤는데, inflearn에 좋은 무료 강의들이 많이 있네요.

저는 앱 보다는 웹으로 뭘 좀 해보려고 해서, 아래 강의를 봤는데, 많은 도움이 되었습니다.

DB 연동/ 인증 등 제가 만들어 보려는 서비스에 필요한 기능 활용 예가 있어서 좋네요.

 

www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%96%B4%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EA%B0%95%EC%A2%8C-%EC%9B%B9-%EC%96%B4%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98#description

파이어베이스(Firebase)를 이용한 웹+안드로이드 메모 어플리케이션 만들기 - 인프런