배포 관리

Firebase Hosting 사용법 ( 웹 배포, React )

늦깍이 2025. 6. 11. 23:09

Firebase 아니 구글 당신은 신이야

저는 웹 배포를 vercel이라던지.. 기타 등등을 사용해서 몇번 해봤습니다.
물론 직접 s3였나해서 nginx하고 해서 도메인 주소 구매해서 막막 알져 과정? 그것도 해보고,,,
할때마다 느끼지만 바보인 저에겐 참 힘들었습니다...ㅠ

최근에 회사에서 Firebase의 기능을 쓸 일이 좀 있었어서( distribution, database 등등..? )
Hosting도 있길래 이참에 적용시켜보자 싶었습니다.
근데 너무 쉽길래... 그래서 공유하고 싶었어요 ㅎㅎ ( 늘 그렇듯 까먹었을때 대비기도 합니다. 바보니까여~ )

React의 경우

React를 많이 쓰니까 React를 기준으로 할께요 ( 많이 안쓰면 많이 쓰는게 뭔지 알려주세요 ㅎㅎ )
생각보다 간단합니다.

아예 처음부터 그냥 호스팅해버리면서 진행한다고 가정했을때!

 

1. 일단 npx create 머시기 하면 프로젝트 만들죠?

npx create-react-app 플젝이름
cd 플젝이름 // 루트 디렉토리로 들어가는거지용

 

2. 그 다음 firebase 패키지를 설치합니다. ( 정확히는 Firebase CLI 에요 )

npm install -g firebase-tools

 

3. firebase login 해주셔야해요. ( 회원가입도 필요하면 해야죠? )

firebase login

 

4. 로그인 완료했으면, 시작!

firebase init

이러면 막막 마구마구 뭔갈 물어봅니다.

Firebase Console내의 어떤 프로젝트를 선택할 것이냐. 

싱글페이지 앱이냐 이런 질문있자나요?

그 중에서 딱 하나 좀 막혔던 질문이 저한텐

File build/index.html already exists. Overwrite? (y/N)

이거였어요. 

이거는 React의 기준으론 No가 맞는거같아요.

이유는 build를 하면 index.html이 같이 빌드될텐데 거기에 덮어씌면 좀 그렇자나요?

Firebase initialization complete!

이거 뜨면 대충 끝난거에요.

 

5. 빌드해야죠 

npm run build

 

6. 호스팅 해야죠?

firebase deploy

 

하면 deploy하는데, 완료될때쯤에 URL 알려줍니다. 거기 들어가면 배포 끝나있어요. 

 

아아... 구글은 신입니다. 일해보고 싶지만 저같은게 어찌 일해보겠나여 그저 감사할뿐..., 이상~

 

( 추후에 Git이랑 연동해서 CI/CD도 자동으로 되는지 체크해보고 가능하다면 거기까지 연결해서 써보겠습니당 )