[협업] 협업을 위한 파이어베이스 셋팅 및 호스팅 설정하기 (feat node.js)

들어가며

스타트업에서 서버 개발자로 일하면서, 푸시 알림을 사용하기 위해 파이어베이스를 처음 사용했습니다. 파이어베이스를 들어가보면, 정말 다양한 기능이 있습니다. 하지만 저는 파이어베이스를 제대로 모르기 때문에, 어떤 기능도 제대로 사용해본 적이 없었습니다. 이번 기회에 파이어베이스에 대한 기초 지식을 쌓아야겠다고 생각했습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

Firebase 프로젝트 생성하기

먼저 파이어베이스를 활용하기 위해서는 프로젝트를 생성해야합니다. 프로젝트를 생성하기 위해 firebase 사이트에 들어갑니다.

 

 

 

 

 

 

 

만약 사이트에 들어간다면, 프로젝트 추가 버튼이 보일 것입니다. 파이어베이스 활용을 위한 프로젝트 생성을 위해 프로젝트 추가를 클릭합니다.

 

 

 

 

 

 

 

프로젝트 생성을 해줍니다. 저는 테스트를 위해 프로젝트명을 test-constp로 설정하겠습니다. 

 

 

 

 

 

 

 

Google 애널리틱스 연결을 해주고, Google 애널리틱스 계정을 연결해줍니다.  

 

 

 

 

 

 

 

모두 완료하면 이런 화면이 나올 것이고, 계속을 눌러 프로젝트를 생성해줍니다!

 

 

 

 

 

 

 

프로젝트가 생성됐다면, 이런 화면이 나올 것입니다. 여기서 파이어베이스를 활용해서 웹 호스팅을 해보겠습니다. 

 

 

 

 

 

 

 

여기서 < / >을 클릭해줍니다. 그 후, 연결할 앱 이름을 작성하고 등록버튼을 클릭합니다. 

 

 

 

 

 

 

 

그러면 이와 같은 SDK가 출력되는 것을 살펴볼 수 있습니다. 이 부분을 외부에 유출되지 않게끔 잘 보관해두면 됩니다. 그리고 마지막으로 파이어베이스를 배포하고 활용할 수 있는 툴을 설치해야합니다. 

 

 

npm install -g firebase-tools

 

 

만약 권한설정 때문에 제대로 설치가 안된다면, 이렇게 설치해주시면 됩니다.

 

 

sudo npm install -g firebase-tools

 

만약 잘 설치가 됐는지 확인하려면, 이렇게 명령어를 작성해봐야합니다.

 

which firebase

 

만약 이 명령어가 제대로 작동하지 않는다면, 제대로 설치가 된 것이 아닙니다. 이렇게 파이어베이스를 활용해서 프로젝트를 생성하고, 개발에 필요한 툴을 설치해봤습니다. 그렇다면, 파이어베이스를 활용해서 호스팅을 어떻게 할 수 있을지에 대해 알아보겠습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

Firebase 프로젝트 호스팅하기

먼저 파이어베이스를 활용해서 호스팅을 하기 위한 프로젝트 폴더가 필요합니다. 폴더를 먼저 생성한 뒤에 호스팅을 해보겠습니다. 저는 firebase라는 폴더에 const-Park이라는 폴더를 생성했습니다. 폴더의 위치를 const-park1으로 지정한 후, 

 

파이어베이스에서 호스팅하기 위해 먼저 firebase에 login을 해야합니다.

 

firebase login

 

firebase login을 입력하면, 아래와 같이, 나오며, 아래의 물음이 나오면 엔터를 입력해줍니다.

 

 

 

그러면, Firebase에 연결할 구글 계정을 입력하라고 나오는데, 로그인할 계정을 선택하고 로그인 합니다. 

 

 

 

 

firebase에 로그인을 하면, 성공했다는 문구가 나옵니다. 그 후 호스팅 셋팅을 위한 명령어을 입력해줍니다.

 

firebase init hosting

 

 

 

 

이 명령어를 통해 firebase의 Hosting 부분에 연결을 시켜줄 수 있습니다. 

 

 

 

 

그 후엔 이런 명령어가 나오는데, 기존에 있는 프로젝트를 선택하기 때문에 Use an existing project를 선택합니다! 

 

 

기존에 test-constp에서 테스트를 했기 때문에 test-constp를 선택하겠습니다. 

 

 

 

 

 

 

 

그 후, 저는 기본셋팅을 활용하기 위해 모두 엔터를 입력했습니다. 그 후 폴더를 확인해보면, public 폴더가 생성된 것을 확인할 수 있습니다. 그 후 배포를 해보겠습니다.

 

 

firebase deploy

 

이렇게 입력해주면, 배포를 하기 시작합니다. 이렇게 된다면, 아래에서 나온 도메인으로 입력하면, 웹사이트에 들어갈 수 있습니다. 

 

 

 

 

 

 

도메인에 퍼블리싱된 페이지가 없기 때문에, 아래와 같이 나온다면 성공적으로 호스팅을 마무리한 것입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

마치며

다음 Firebase 공부에는 Firebase를 활용한 CRUD 활용법에 대해 공부해서 정리해보도록 하겠습니다.

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고 및 출처

Firebase

서버 환경 및 FCM  |  Firebase

 

[2021] 요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - Javascript - 인프런 | 강의