15. Vue와 Firebase로 나만의 사이트 만들기 - firebase 설치하기

 

 

 

VF - 15강

 

 

 

---

• 이번 강에서는 Realtime Database부터 시작할 것인데 Firebase 사이트 창에서 세팅부터 마무리할 것이다.
• 먼저 프로젝트 세팅에서 리소스 위치란 DB나 Storage와 같은 것들이 Firebase에 있지만 기본적으로는 GCP(Google Cloud Platform) 안에 있으며 Firebase 식으로 랩핑 해놓은 것이다.
• 우리는 asia-northeast3로 해놓았고, 이것은 서울 리전이다.
• 일단 인증부터 설정을 다 하고 넘어갈 것이다.

 

---

 

Authentication 설정

• Authentication 메뉴를 클릭하여 [시작하기]버튼을 누른다.
• Facebook이나 Twitter, Github 등을 추가하고 싶으나, 그곳에 들어가서 키 교환하는 것들이 있어서 이러한 것들이 없는 Google 인증을 사용 가능하도록 설정할 것이다.

 

• 그래도 먼저 기본적으로 이메일/비밀번호를 클릭하여 아래와 같이 설정한다.

 

• 그리고 [새 제공업체 추가]를 눌러 Google을 클릭한다.

 

• 아래와 같이 [사용 설정]을 클릭한 후 [저장]을 클릭한다.

 

• 인증은 이정도로 설정을 마칠 것이다.

 

---

 

Realtime Database 설정

• 지난 강에서 이미 시작하여 따로 설정할 것은 없었다.

 

---

Storage 설정

• 강의에서는 Storage 시작하기를 클릭하였으나 필자는 버튼이 없고 바로 시작되었다.

 

---

 

앱 설정

• 프로젝트 설정에 들어가서 내 앱란에 [</>] 아이콘을 클릭한다.
  • 모바일은 ios나 안드로이드 아이콘을 누르면 되고, </>은 웹 앱에서 사용할 경우 선택한다.

 

• 그리고 앱 닉네임을 작성하고, 호스팅을 체크한 후 [앱 등록]을 클릭한다.

 

• 그렇게 되면 아무나 사용할 수 없도록 아래와 같이 키를 얻게 된다. 하지만 npm로 설치할 것이기 때문에 이대로 [다음]을 눌러 넘어간다.

 

• 가장 중요한 firebase-tools를 나중에 아래와 같은 명령어로 설치하면 된다. 일단 [다음]을 클릭한다.

 

• 그리고 아래와 같은 순서로 login, init, deploy 하라고 되어있다. 확인만 하고 [콘솔로 이동]을 클릭한다.

 

• 그 후 프로젝트 설정에서 비어있던 웹 API 키가 아래와 같이 생성되어 있을 것이다.

 

• 그리고 바로 아래에 내 앱에는 이제 아래와 같은 것이 생겨있다. SDK 설정 및 구성에서 구성을 체크하고 난 후 가장 중요한 것은 아래의 앱 키이다. 바로 이 키를 얻기 위하여 이러한 것을 한 것이다.

 

---

 

Firebase 설치 및 로그인

• 그리고 vscode로 돌아가 경로를 확인한 후 터미널 창에서 아래와 같이 실행한다.

$ npm install firebase

 

• 그리고 다음으로 아래의 코드를 실행한다.

$ npm install -g firebase-tools

 

• 설치가 완료되면 아래의 코드로 firebase 로그인을 한다.

$ firebase login

 

• 그리고 아래와 같이 'Firebase에서 CLI 사용량 및 오류 보고 정보를 수집하도록 허용하시겠습니까?'라는 뜨는데 Y 나 N 아무거나 상관이 없다. 필자는 yes를 선택하였다.

 

• 선택하고 나면 아래와 같이 로그인 창이 뜨면 로그인을 한다.

 

• 로그인을 완료하면 브라우저에 아래와 같이 뜨게 된다.

 

• vscode에서의 로그인 완료 사진은 아래와 같다.

 

---

 

Firestore Database 설정

• Firebase 초기화를 하기 전에 사용할지 안 할지 모르는 상황에서 Firestore를 먼저 설정해놓고 넘어가려고 한다.
• 먼저 Firebase 브라우저 창에서 Firebase Database 메뉴를 클릭하여 [데이터베이스 만들기]를 클릭한다.

 

• 보안 규칙을 아래와 같이 설정 후 [다음]을 클릭한다.

 

• 그다음으로 위치 설정이 나오면 [사용 설정]을 클릭한다.

 

• 필자의 경우 다 만든 후에 Firestore Database를 눌러도 다시 만들기가 있어서 오류로 안 만들어졌는지 해서 몇 번 만들었지만 만들다 보니 아래와 같이 오류가 뜨기도 하였다.

 

• 하지만 조금 시간이 지나니 아래와 같이 들어갈 수 있게 되었다. 만드는데 시간이 조금 소요되는 듯 하다.

 

---

 

Firebase 초기화

• 로그인이 완료되면 아래의 코드로 초기화를 하며 처음에 'Are you ready to proceed?'라고 물어보면 Yes라고 답한다.

$ firebase init

 

• 그다음으로 아래와 같이 <space> 키로 선택한 후 넘어간다. 강의보다 몇 개 선택지가 더 생겼지만 강의에서 다 선택하였지만 만약 무료 요금제인 Spark Plan으로 계속 사용하고자하며, 호스팅까지 생각한다면 유료 기능인 Functions는 제외하도록 한다. 이렇게 선택하면 이 파일들이 Rule과 같은 것으로 쌓이게 된다.
  • (O) Firestore: Configure security rules and indexes files for Firestore
  • (X) Functions: Configure a Cloud Functions directory and its files
  • (O) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys        
  • (O) Hosting: Set up GitHub Action deploys
  • (O) Storage: Configure a security rules file for Cloud Storage
  • (O) Emulators: Set up local emulators for Firebase products
  • (O) Remote Config: Configure a template file for Remote Config
  • (O) Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance

• 그다음으로 현재 프로젝트를 사용할 것이기 때문에 'Use an existing project'를 선택한다.

 

• 그다음에 Firebase에서 만든 프로젝트를 선택해준다.

 

• 그다음에는 저번 강에 Realtime database의 Rule에 대해서 설명을 한 것인데 여기서 코드로 작성해서 배포를 할 수 있다는 것이다. Enter를 누르고 넘어간다. 

 

• 그리고 Firestore의 Rule을 여기서 작성해서 배포를 할 수 있다. Enter를 누르고 넘어간다.

 

• 다음으로 Firestore indexes는 복합 인덱스라고 하며, 보통 Firebase는 index가 모든 필드에 다 걸려있다. 기본적으로 하나밖에 안 걸려있지만 만약 두 개 이상 걸 때 복합 인덱스를 써야 한다. 그때의 Rule을 말한다. Enter를 누르고 넘어간다.

 

• 만약 Functions을 선택했을 경우
• Functions 설정은 JavaScript와 TypeScript를 사용할 수 있는데 손쉬운 JavaScript를 선택한다. 강사가 말하길 TypeScript는 나중에 Vue3가 나오면 따로 강의를 한다고 한다.

 

• 다음으로 ESLint를 사용할 건지 묻는데 이미 사용하고 있으므로 No를 선택한다.

 

• 그다음으로 npm으로 dependencies를 깔겠습니까? 에서 Yes를 선택한다.

 

• 그리고 나면 프로젝트에 functions라는 디렉터리가 생성되고 여기 안에도 package.json가 있다. package.json을 열어보면 아래와 같이 dependencies와 devDependencies에 firebase에 관한 것들이 있고 이것들을 깔겠다는 의미이다.

// functions 디렉터리의 package.json
"dependencies": {
  "firebase-admin": "^10.0.2",
  "firebase-functions": "^3.18.0"
},
"devDependencies": {
  "firebase-functions-test": "^0.2.0"
},

 

• 그다음에는 Hosting Setup인데 어느 디렉터리를 배포용 디렉터리로 할 거냐고 묻는다. 기본값이 public이지만 이미 public이라는 이름의 디렉터리는 다른 용도로 사용 중이기 때문에 다른 디렉터리를 만들어줘야 한다. 나중에 이것들이 bulid를 하게 되면 dist라는 곳에 생기는데 dist로 하면 된다.

 

• index.html을 다시 쓰겠냐고 물어보면 Yes를 선택한다.

 

• 다음으로 Github을 사용하여 자동 빌드 및 배포를 설정할 거냐고 물어보면 강의에서는 나오지 않는 이야기여서 No를 선택한다.

 

• Storage 도 당연히 Rule이 있다. Enter로 넘어간다.

 

• 다음으로 Emulators Setup인데 강사도 사용을 안 해봐서 모르지만 일단 간단히 설명하면 여기서 Emulator로 구동을 시켜준다는 것인데 나중에 해볼 것이다. 강의에서는 Functions, Firestore, Database, Hosting 4가지를 선택하였으나 지금 시점은 업데이트되어서 아는 것을 모두 선택하였다.

 

• 다음으로 Emulator의 port번호를 설정하는데 그중 firestore의 8080은 이미 사용하고 있으므로 5002로 설정하고 나머지는 기본값으로 한 후 넘어간다. 그리고 Emulator UI를 사용할 건지 물어보는데 일단 Yes를 선택했다.

 

• 그다음으로 에뮬레이터 UI에 사용할 포트를 선택하라고 하며, 사용 가능한 포트를 사용하려면 비워두라고 하여 비워두고 Enter를 누른다.

 

• emulator를 다운로드할 거냐고 물어보면 일단 No로 선택하며, 나중에 사용할 때 알아서 다운될 것이다.

 

• 강의에는 나오지 않지만 Remoteconfig template 파일은 기본값으로 사용하기 위해 Enter를 누른다.

 

• 이제 firebase 설정이 완료되었다.

 

---

 

Firebase 초기화 후 설정할 수 있는 파일 확인

• .firebaserc : 이 프로젝트에 관련된 파일인데 안에는 프로젝트 ID만 들어있다.
• database.rules.json : 이 파일은 Realtime Database에 대한 보안 규칙이 들어있는 파일이다.
  • 현재는 처음 설정으로 true로 되어있고, 만약 false로 바꾼 후 deploy 하면 웹에서 클릭하던 항목이 여기서는 배포를 커맨드를 통해서 할 수 있다.
• firestore.indexes.json : 이 파일은 복합 인덱스 관련 배포 파일이다. 쓸지 안 쓸지는 모르겠지만 만약 date랑 제목을 인덱스로 갖겠다는 것을 설정할 때 사용한다.
• firestore.rules : firestore의 rule 관련 배포 파일이다.
• storage.rules : storage의 rule 관련 배포 파일로 firestore과 비슷한 양식으로 되어있으나 기본값으로 작성된 코드로 인해 인증이 되어야 사용할 수 있으므로 로그인해야 사용할 수 있다.
• functions 디렉터리 : functions는 back-end 구성&역할이 되어있다. 하지만 우리는 이 프로젝트에서 back-end 용도가 아닌 트리거 용도로 쓸 것이다. 프로그램 안에 또 프로그램이 있는 것이다. 그래서 안에 node_modules 폴더가 또 존재한다. 그러나 아직은 사용하지 않고 초기화만 되어있는 상태이다.
• firebase.json : 이 파일 안에 내용을 보면 아래와 같이 rewrite를 해서 생긴 항목이 있는데 SPA를 위한 설정이 되어 있다. 아래의 코드의 뜻은 만약 localhost:8080/about이라는 주소에서 Enter를 쳐서 들어가게 되면 SPA에서 /about이라는 주소는 없기 때문에 /뒤에 무엇을 치든 index.html로 가게끔 하겠다는 말이다.

"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]

 

• 여기까지 Firebase를 설치하고 설정해보았다.
• 참고로 .rules 형식의 파일 내용 코드가 인식되지 않아 vscode 확장 프로그램 중 Firebase를 설치하니 인식되었다.

 

• memi dev 유튜브 강의 보기
  • https://memi.dev/board/lecture/1597406335054
  • https://www.youtube.com/watch?v=OieFZ3aRuF4 

15 firebase 설치하기 : memi

 

 

 

---

해당 글은 [memi dev] 유튜브 채널을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---