Stock Quiz App (3) Firebase Web Hosting

1. Firebase

데이터베이스와 웹 호스팅을 사용할 수 있고 사용하기 쉽다는 것이 가장 큰 장점이다. 우리는 간단한 시연을 할 정도의 프로토타입을 만들어 내면 되었기 때문에  Firebase를 사용했다.

2. Firebase 웹 호스팅

1) 프로젝트 생성

firebase.google.com/?hl=ko

Firebase

Firebase 홈페이지에 접속해 로그인 후 콘솔창에 접속한 후 새로운 프로젝트를 생성한다.

프로젝트 생성

2) Firebase CLI 설치

프로젝트 생성 후 Hosting메뉴를 클릭하고 시작하기를 누른다.

시작하기를 누르면 Firebase 호스팅 설정 방법에 대한 설명을 단계별로 확인할 수 있다.

Node.js가 설치되어 있지 않다면 Node.js 홈페이지에 접속해 Node.js를 설치해야 한다. Node.js를 설치하면 Node.js command prompt를 사용할 수 있다. Node.js command prompt를 열어 사이트에서 안내하는대로 npm install -g firebase-tools 명령어를 입력한다.

명령어 입력

Firebase CLI 설치 완료 화면

3) 프로젝트 초기화

프로젝트 시작 전 먼저 구글에 로그인해야 한다. firebase login 명령어를 입력하면 구글 로그인 화면이 나타난다.

firebase login

로그인 후 firebase init 명령어를 입력하면 프로젝트가 시작된다.

firebase init

Are you ready to proceed? 가 뜨면 Y를 입력한다. 그리고 Hosting을 Space를 눌러 선택한다음 Enter를 눌러준다.

Hosting 선택

그러면 프로젝트 설정이 뜬다. 앞에서 프로젝트를 이미 생성했으므로 Use an existing project를 선택한다음 아까 생성한 프로젝트를 선택한다.

project setup

Firebase initialization complete! 가 뜨면 프로젝트 초기화가 성공적으로 이루어진 것이다.

4) 웹 배포

firebase deploy 명령어를 입력하면 배포 디렉터리에 있는 파일이 배포된다. 이 파일은 내 PC > 로컬 디스크 > 사용자 > 사용자 이름 > public 경로에 있다. 

배포 디렉터리

firebase deploy

배포 후 Hosting URL에 접속하면 다음과 같은 창이 뜬다.

Hosting Complete!!

6) 파일 수정

VScode, Visual Studio와 같은 에디터를 통해 index.html파일을 열어 코드를 입력한다. 입력 후에는 반드시 node.js command prompt에서 firebase deploy명령어를 통해 배포해주어야만 적용이 된다.

index.html

앞에서 React Native로 만든 앱에서 호스팅 url이 열리도록 설정했다. 지금까지 작업한 내용을 아래 영상에서 확인할 수 있다.

Test