firebase 배포를 위한 세팅 (로그인, db, 이미지 등 파일 첨부 세팅 포함)

소개

firebase 세팅 과정을 정리합니다.

firebase로 db연결하고 배포하는 과정을 지속적으로 소개했는데 스크린샷과 함께 정리해봅니다.
(이번주 남는 시간에는 배포와 도메인 연결해봐요!)

firebase console에 접속해서 프로젝트를 생성합니다.

오늘 갑자기 바이브코딩한거 db변경하고 배포할게 생겨서 해당 프로젝트 생성했어요!
프로젝트 이름 = 프로젝트ID 동일한게 전 편해서 최대한 이름을 맞춰줍니다.
이게 배포할때 url에 기본 제공되기도 해요!

firebase를 사용하는 또하나의 이유!
애널리틱스가 기본으로 붙습니다.
세세하게 세팅하려면 손이 가지만 일단 기본 분석은 합니다 ㅎㅎ

애널리틱스 계정도 몇개씩 합치기도 합니다.
별도로 관리하려면 새로 생성하면 됩니다!
위치는 서비스 국가를 따라가는게 좋아요 🙂

설정이 끝나면 firebase 프로젝트가 열립니다.
뭐 대충 서버가 생겼다고 생각해도 비슷할꺼애요 ㅎㅎ
이제 기본적인 인증 하나 하고 가죠

많은 인증(로그인) 방식을 지원합니다.
지금은 google 로그인만 해봐요 🙂

firebase로그인 계정으로 프로젝트 지원 이메일을 설정합니다.
다른 메일로는.. 안해봤어요 ㅎㅎㅎㅎ 방법이 있겠죠?

이제 db설정합니다. firestore!

보통은 Standard 설정으로 충분합니다.

역시 서비스 국가 Seoul 선택해주고,

테스트모드를 선택하면 한달 수 db가 자동으로 막히게 설정되어 있어요!
그래서 전 보통 프로덕션 모드로 합니다.

db가 완성됐어요!
뭔가 표가 보여야할 것 같은데 아무것도 안보이죠?

서비스 개발하면서 데이터가 생성되면서 필요한 테이블만 생기게 됩니다!

규칙으로 들어와서 false로 작성된 부분만 true로 바꿔줘요!
이건 누구나 데이터를 읽고 쓰고 할 수 있다는 의미입니다.

이 규칙이 맞지 않으면 개발하다가 에러가 나는데 최소한 서버쪽에서 에러는 없게 한다는 의미애요.
서비스 런칭할때는 데이터베이스 규칙 정교하게 수정해서 필요한 권한이 필요한 사용자에게만 있도록 수정해야되요. (이것도 AI를 일단 시킵니다 ㅎㅎ)

이번엔 Storage입니다.
db는 모두 문자형식으로 저장되고, 이미지/파일 등은 모두 여기에 저장되요.
db에는 여기 저장된 파일의 링크라는 문자가 저장되서 연결하는 방식이애요!

하지만.. firebase에서 이 기능사용은 유료에만 열어줬습니다 ㅠ
유료라고 해도 사용한만큼 부과되는거니 크게 걱정하지 않아도 됩니다.

오히려 나노바바바 api비용이 훨씬 부담스러웠어요 ㅠㅠㅠㅠ

이것도 역시 서비스 지역인 Seoul로 설정하고,

db와 같이 규칙을 개발할 당시만 사용하도록 수정해줍니다.

이제 우리가 만드는 웹앱에 연결할 수 있도록 설정만 해주면 됩니다!
프로젝트 설정으로 들어와서 웹앱 설정을 선택해줘요!

(저는) 웹앱 이름도 프로젝트명과 동일하게 잡아주는 편입니다.
복잡한거 시름..

이런 코드들이 보이면 모든 준비가 끝났습니다 ㅎㅎ

이제 다른 바이브코딩툴에서 받은 소스로 cursor, antigravity 등에서 열고

지금 프로젝트를 firebase의 firestore와 storage로 연결하는 것으로 수정하려고 해.
api key값을 저장할 수 있는 .env파일을 생성하고 지금 프로젝트 구조에 맞도록 입력해줘.

지금 프로젝트를 firebase의 firestore와 storage로 연결하는 것으로 수정하려고 해.
api key값을 저장할 수 있는 .env파일을 생성하고 지금 프로젝트 구조에 맞도록 입력해줘.

이 프로젝트를 로컬에서 실행할 수 있게 의존성 설치 등 확인해서 필요한거 설치하고 로컬에서 실행해보자.

이렇게 하면 바이브코딩툴에서 돌아가던게 내 PC에서 돌아갈꺼애요 🙂

지금 버전으로 빌드하고 firebase에 배포하자. 
프로젝트명은 blooming-seoul 이야.

이렇게 하면 firebase에서 배포까지 다 하게 되는겁니다 ㅎㅎㅎ

오늘 급 배포한 서비스애요 ㅎㅎㅎ

도메인을 구입한걸 연결시키는 것도 firebase에서 하면 됩니다!

이것저것 firebase 안에서 다되니 굳이 vercel이나 supabase 등 나눠서 쓰고 싶지 않더라고요!

많이 하다보면 몸에 배더라고요 ㅎㅎ