[memo-app] Firebase 2.로컬개발환경

이번에는 firebase 를 로컬에서 사용할 수 있도록 개발 환경을 설정해보도록 하겠습니다. 👊

---

 

 firebase 프로젝트 생성하기 

1. Node.js 설치

firebase cli 환경을 사용하기 위해서는 npm 이 필요합니다.

npm 을 사용하기 위하여 Node.js 를 설치하도록 합시다. (추후에 해당 파일을 설치하는 포스팅을 올리겠습니다.)

 

 

2. firebase CLI 환경 설치

npm install -g firebase-tools
firebase --version

firebase cli 를 설치하도록 합시다. CLI 환경에서 firebase 기능을 사용할 수 있습니다. 위의 명령어를 입력합니다.

제대로 설치되었는지 확인하기 위해서 버전 확인을 합니다. 10.1.0 버전이 제대로 설치되었습니다. ✌️

 

 

3. firebase CLI 환경에서 로그인

firebase login

CLI 환경에서 firebase에 로그인 해보도록 하겠습니다. 위의 명령어를 입력합니다.

입력하면 권한 요청을 허가할 것인지 물어봅니다. [y] 키를 클릭하여 허락합니다.

그 다음에 권한 요청 브라우져 창이 뜨는데 구글로 firebase 로그인을 진행합니다.

 

firebase projects:list

firebase 프로젝트를 확인하겠습니다. 보통 firebase list 명령어를 자주 사용하지만 에러가 납니다.

firebase projects:list 명령어를 사용합시다.

 

 

4. firebase 프로젝트 로컬에서 초기화하기

cd (프로젝트 폴더 위치)

우선 firebase 프로젝트를 업로딩할 폴더 위치로 이동해야 합니다.

저는 Learning-JavaScript/5.firebase 폴더에 초기화하도록 하겠습니다.

cd 명령어를 이용하여 해당 폴더 위치로 이동합니다.

 

firebase init

로컬 환경에서 프로젝트를 초기화하도록 하겠습니다. 위의 명령어를 입력합니다.

 

? Which Firebase CLI features do you want to set up for this directory?
Press Spac e to select features, then Enter to confirm your choices.
(Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)

이 디렉토리에 어떤 Firebase CLI 기능을 설정하시겠습니까?
Space를 눌러 기능을 선택한 다음 Enter를 눌러 선택을 확인하십시오.
(선택하려면 <space>를 누르고, 모두 토글하려면 <a>를 누르고, 선택을 반전하려면 <i>를 누르고, 계속하려면 <enter>를 누르십시오.)

명령어를 입력하면 어떤 기능을 사용할 것인지 물어봅니다.

위의 캡쳐 화면과 같이 [Realtime Database] 와 [Hosting] 을 스페이스 키를 이용하여 선택합니다.

 

? Please select an option:
- Use an existing project
- Create a new project
- Add Firebase to an existing Google Cloud Platform project
- Don't set up a default project

다음으로는 어떤 firebase 프로젝트 옵션을 사용할 것인지 물어봅니다.

저는 기존의 프로젝트를 등록할 것이기 때문에 [Use an existing project] 를 클릭합니다.

 

? Select a default Firebase project for this directory:
- (프로젝트 목록들)

어떤 프로젝트를 사용할 것인지 물어봅니다. 저는 [fir-start-5566d] 를 선택하겠습니다.

 

? What file should be used for Realtime Database Security Rules?
(database.rules.json)

Realtime Database 기능 설정으로 이동합니다.

어떤 데이터베이스 보안 정책을 사용할 것인지 물어봅니다. (파일 이름 설정하라는 뜻)

저는 그대로 [database.rules.json] 을 쓰겠습니다.

 

? What do you want to use as your public diretory?
(public)

어떤 public 폴더를 사용할지 선택합니다. 저는 디폴트 그대로 [public] 을 사용하도록 하겠습니다.

 

index.html 파일을 rewrite 할건지 묻는 것에는 Yes 를 아래 github 질문에는 No 를 선택합니다.

(Yes는 [y] 키를, No는 [n] 키를 누르면 됩니다.)

 

public 폴더 및 설정 파일들이 등록되고 firebase 프로젝트가 성공적으로 초기화가 되었습니다 ! ✨

 

 

5. firebase 로컬 서버 실행하기

cd 폴더위치

우선적으로 firebase 프로젝트를 초기화한 위치로 와야합니다.

 

firebase serve

firebase 로컬 서버를 실행시켜 보도록 하겠습니다. 위의 명령어를 입력합니다.

하지만 맥에서는 종종 위와 같은 403 에러가 뜹니다. 원래는 위 에러가 뜨면 안됩니다. ❌ 

맥 OS 업데이트가 주로 5000 port 를 사용하기 때문에 권한 에러가 난다고 합니다.

 

// 맥 OS 업데이트가 주로 5000 포트를 사용한다고 한다.
// 권한 403 에러가 날때가 있으니 그럴때는 아래와 같이 실행해보자.
firebase serve --port=5500

위의 명령어를 입력하고 해당 페이지가 뜬다면 firebase 프로젝트 생성에 성공한 것입니다 ! ✨

 

 

 

 

 

firebase init

firebase database

firebase 로컬 개발 환경 설정

firebase serve

firebase 403 에러

firebase 권한 에러

fireabase 포트 설정

---