Firebase를 이용한 Node.js 호스팅

1. Node.js, npm 설치하기

https://nodejs.org/en/ 에서 왼쪽 다운로드

 

2. Firebase 프로젝트 만들기

다음과 같이 firebase 홈페이지에 접속해서 새로운 프로젝트를 하나 만들어줍니다.

 

 

3. Firebase CLI 설치하기

cmd창에 다음과 같이 입력하여 모듈을 설치합니다.

npm install -g firebase-tools

install은 (package.json 파일 및 해당 종속성에 나열된 모든 )모듈 설치를 -g 라는 옵션은 전역이라는 뜻을 가져 디렉토리에 관계없이 전역에서 사용할 수 있는 firebase 명령이 설치됩니다. 

이 firebase-tools 설치를 통해 우리는 cmd에서 firebase 명령어를 이용할 수 있습니다.

 

4. Firebase 프로젝트에 엑세스

cmd창에 다음과 같이 입력하여 프로젝트에 대한 액세스 권한을 얻습니다.

firebase login

웹 브라우저로 구글 로그인 페이지가 뜨면 로그인을 하고 cmd창으로 돌아옵니다.

 

Allow Firebase to collect anonymous CLI usage and error reporting information?

라는 글로 정보 수집에 대한 동의를 얻는 글이 떠있으면 y를 입력해 동의해줍니다. 

 

5. 사이트 초기화

firebase init

 

 

Are you ready to proceed?에 y를 입력합니다.

다음의 Firebase 서비스 중에 본인이 필요한 서비스만 화살표 상하로 움직여서 스페이스로 선택합니다.

아래의 Firebase 페이지에 메뉴에 있는 서비스와 동일합니다.

 

Select a default Firebase project for this directory: 에서는 화살표 상하키를 사용해 아까 만든 Firebase 프로젝트를 선택하고 엔터를 누릅니다. 

 

(위에서 부터 파란 글씨)

- FireStore 규칙에 어떤 파일을 사용할 것인가? Enter입력 (default값)

- FireStore 인덱스에 어떤 파일을 사용할 것인가? Enter입력 (default값)

- Cloud Functions을 작성할 때 어떤 언어를 사용할 것인가? (JavaScript 선택)

- ESLint를 사용하여 발생 가능한 버그를 잡고 스타일을 적용할 것인가? y 입력

- 지금 npm에 종속성을 설치할 것인가? y 입력

public 디렉토리는 Enter만 누르면 됩니다. 그럼 자동으로 Public이라는 이름의 디렉토리로 설정이 됩니다.

(저기서는 실수로 y를 입력하는 바람에 y라는 이름의 디렉토리로 Public 디렉토리가 설정되었습니다.)

싱글 페이지로 제작할 것인가? n입력

y를 입력하게 되면

firebase.json

파일에 플래그를 설정하여 모든 URL을 /index.html 로 리디렉션합니다.

 

5. 로컬 테스트

firebase serve

npm start나 pm2 start --watch와 같이 로컬에서 실행시키는 명령어입니다.

cmd에 다음과 같은 명령어를 입력한 후 웹 브라우저 주소창에 http://localhost:5000을 입력했을 때 다음과 같은 화면이 뜨면 로컬호스팅에 성공한 것입니다.

 

6. 사이트 배포

firebase deploy

만약 Running command: npm --prefix "$RESOURCE_DIR" run lint와 같은 에러가 뜬다면

firebase.json에

"functions": { "predeploy": [ "npm --prefix \"$RESOURCE_DIR\" run lint" ] },

위의 코드를 아래의 코드로 바꿔줍니다.

"functions": { "predeploy": [ "npm --prefix \"%RESOURCE_DIR%\" run lint" ] },

 

 

HTTP Error: 400, Project  is not a Cloud Firestore enabled project.FONT와 같은 에러가 뜨면

// "firestore": { // "rules": "firestore.rules", // "indexes": "firestore.indexes.json" // },

와 같이 주석처리해줍니다.