Firebase Web 채팅앱 만들기 - 3. Hosting을 활용한 프로젝트 준비 작업

1. 예제 시작 소스 다운로드 받기

• 프로젝트를 시작하기 위해서 미리 구조를 잡아둔 예제 시작파일을 다운로드 받습니다.
• 아래 링크로 진입하여 commit 히스토리를 볼 수 있는 부분을 클릭합니다.
  • https://github.com/cionman/firebase-tutorial-chat/

• commit 히스토리 중 맨 아래 쪽 ‘1. 예제 시작 파일’ 부분 우측에 ‘<>’ 버튼을 클릭 합니다.
• 나중에 예제를 글 단위별로 커밋을 해두었으니 따라하시면서 commit 히스토리를 참조하시면 됩니다.

• ‘1. 예제 시작 파일’ 커밋 화면으로 진입한 후 아래의 스크린샷 부분을 클릭하면 예제 시작 파일을 다운로드 받을 수 있습니다.

• 다운받은 소스를 잠시 확인해보겠습니다.
• index.html 파일 하나와 화면을 구성할 css, 폰트, 이미지, js가 포함되어 있습니다.

• index.html 소스 하단을 보게되면 jquery, materialize, underscore가 포함되어 있습니다.
• jquery와 materialize 자바스크립트 파일은 materialize CSS framework가 꾸미는 modal 창 정도에만 사용될 것입니다.
• 예제에서 사용되는 소스들은 ES5 프로토타입 방식의 클래스 형태로 소스가 작성이 되어 있고, 유저, 채팅방, 메세지 데이터를 추가할때 사용할 템플릿으로 underscore.js를 사용하여 코드가 작성되어있습니다.

2. firebase-tools로 hosting 및 프로젝트 설정하기

• firebase hosting 및 프로젝트를 설정하기 위해 앞서 npm 을 통하여 설치한 firebase-tools 을 이용하겠습니다.
• Windows라면 ‘명령 프롬프트’, Mac 또는 리눅스 환경이라면 ‘터미널’ 프로그램을 실행합니다. 그리고 압축파일 푼 위치로 진입합니다.

• firebase init 명령어를 입력합니다. 명령어를 실행하면 다음과 같은 화면이 나올것입니다.

$ firebase init

• 이번 예제에서는 Firestore를 제외한 나머지서비스를 사용할 것입니다.
• 스페이스바 키를 누르면 선택을 할 수 있습니다.
• 아래와 같이 Firestore를 제외하고 나머지 모두 선택해주십시오.

• 선택 후 엔터 키를 누르면 아래와 같이 자신이 생성 해놓은 프로젝트 리스트가 보일 것입니다.
• ‘firebase-tutorial-chat’ 라는 이름으로 프로젝트를 생성하였습니다.
• 해당 프로젝트를 선택 후 엔터키를 누릅니다.

• 다음은 Realtime Database의 권한을 묻는 질문이 나옵니다.
• 기본 값으로 그냥 엔터키를 누르면 ‘database.rules.json’ 파일이 프로젝트 내에 생성이 됩니다.

• 이번 질문은 Cloud Functions을 사용하기 위해서 npm으로 dependency를 설치하겠냐는 질문이 나옵니다.
• 이번 예제에는 Cloud Functions를 사용할 것이기때문에 ‘Y’ 를 입력하고 엔터를 누릅니다.
• 그러면 잠시동안 firebase-functions와 firebase-admin 라이브러리가 설치됩니다.

• 이번 질문은 Hosting에 사용할 정적 파일(HTML, CSS, js) 소스 위치를 물어보는 질문입니다.
• 기본 public으로 사용하기 위하여 아무것도 입력하지 않고 엔터키를 누릅니다.

• 이번 질문은 Single-page app으로 사용하기 위하여 hosting으로 들어오는 신호 모두 index.html파일로 지정하겠느냐는 질문입니다.
• Single Page App을 만들 것이므로 ‘y’ 를 입력하고 엔터를 누릅니다.

• 이번 질문은 public 폴더 안에 index.html 파일을 덮어쓰겠냐는 질문입니다.
• 제가 미리 화면 구조를 잡아놓은 파일이므로 덮어쓰지 않습니다.
• ‘N’ 을 입력하고 엔터키를 누릅니다.(반드시 N을 해주세요!)

• 마지막 질문은 파일 전송 기능에 사용할 Storage 권한 파일에 대한 설정입니다.
• 우선 기본값을 사용하기 위해 입력하지 않고 엔터키를 누릅니다.

• 시작하기 위해 프로젝트 설정이 완료되었습니다.
• firebase deploy 명령어를 입력하여, 배포를 해보겠습니다.

$ firebase deploy

• 배포가 완료되고 맨 아랫 줄에 자신이 배포한 파일이 어떤 URL에서 서비스가 되고 있는지 확인할 수 있습니다.
• 해당 URL로 진입해봅니다. 아래의 화면이 나오면 성공적으로 준비가 되었습니다.

• 다음은 Authentication 을 활용하여 가입 및 로그인을 구현해보겠습니다.