Firebase 웹 호스팅 생성 및 배포하기

Firebase로 웹호스팅을 생성하고 배포하는 방법에 대해 간략히 정리하는 글이다.

프로젝트를 배포하는 방법에는 여러가지가 있는데 서버를 직접 구축하고 호스팅을 직접 설정하여 배포하는 방법도 있겠지만 Firebase를 사용하면 클릭 몇 번으로 웹서버 구축이 가능하다.  

 

1. Firebase 접속 및 프로젝트 생성

https://firebase.google.com/ 

Firebase

우선 위 Firebase 공식 홈페이지로 접속하여 시작하기 버튼을 클릭한다.

[Firebase 프로젝트 생성 1-1]

시작하기 버튼을 누루고 프로젝트 추가 버튼을 클릭한다.

 

[Firebase 프로젝트 생성 1-2]

프로젝트 이름을 만들고 계속 클릭 후 Google 애널리틱스 사용설정 여부를 설정하는 화면이 나오는데 해도 되고 안해도 된다. 프로젝트 만들기 클릭하여 프로젝트 생성을 완료한다.

 

2. Hosting 설정

[Firebase 호스팅 설정 1-1]

프로젝트가 생성이 되고나면 좌측 빌드 탭에서 Hosting을 클릭한후 시작하기 버튼을 클릭하면 Firebase 호스팅 설정 화면이 표출된다. 

PowerShell 이나 Terminal 등의 명렴프롬프트에서 firebase를 사용하기 위해 Firebase CLI를 가이드에 따라 명령어로 설치한다.

[Firebase CLI 권한 관련 에러]

맥북 사용자의 경우 위와 같이 권한 관련 에러가 발생한다면 명령어 앞에 sudo를 붙여서 실행하면 설치가 정상

적으로 된다.

[Firebase 호스팅 설정 2-1]

[Firebase 호스팅 설정 2-2]

Firebase CLI가 설치가 완료되고 나면 다음버튼을 클릭한다. 가이드에 따라 터미널에서 배포할 프로젝트의 루트 경로로 이동한 뒤 firebase login 명령어를 입력한다. 입력하고 나면 Firebase 가 error reporting 정보를 수집하는 것을 허가 하겠냐는 문구가 뜨는데 'Y' 를 입력한다.

 

 

[Firebase 호스팅 설정 2-3]

 

[Firebase 호스팅 설정 2-4]

 

입력을 하게 되면 로그인을 위해 계정을 선택하라는 화면이 표출된다. 계정을 선택한 후 우측 화면이 나오면 허용버튼을 클릭하면 로그인에 성공했다는 문구가 표출된다.

로그인 이후 가이드에 따라 프로젝트 루트경로에서 firebase init 명령어를 실행한다.

[Firebase 호스팅 설정 2-5]

명령어를 실행하면 어떤 서비스를 사용할지 선택지가 나오게 되는데 3번째 선택지 Hosting 을 클릭한다. 스페이스를 누루면 선택되고 엔터를 클릭시 선택이 완료된다.

[Firebase 호스팅 설정 2-6]

option 설정에 대한 선택지가 나오는데 기존에 구축한 프로젝트가 있기 때문에 use a existing project를 선택한 뒤 어떤 Firebase 프로젝트를 사용할건지 선택하라는 선택지에서는 Firebase 공식 홈페이지에서 만든 프로젝트를 선택한다.

 

[Firebase 호스팅 설정 2-7]

이후 Hosting 셋업에 관련된 설정을 묻는 선택지가 나오게 되는데

 

1. What do you want to use as your public directory ? 

-> public directory를 묻는 선택지가 나온다. npm 으로 프로젝트 빌드를 했다면 npm run build시 만들어진 build 폴더가 public 폴더가 된다.

 

2. Configure as a single-page app(rewrite all urls to /index.html)? 

-> Single page app 인지 묻는 선택지이다. (현재 배포하려는 프로젝트가 react.js로 만들어진 single page app 이라 y를 입력함.)

 

3.Set up automatic builds and deploy with Github? 

-> github를 연동하여 자동으로 빌드가 되게끔 설정하는 문구인거 같은데 일단은 N 으로 pass 함. 자동 빌드를 설정하실 분들은 Y로 선택.

 

4. File build/index.html already exists. Overwrite ? 

->  index.html 이 이미 존재한다 덮어쓰겠냐는 문구인데 y 선택한다. 

 

문구를 다 입력하면 성공적으로 초기화가 되었다는 문구가 표출되고 .firebaserc 와 firebase.json 파일과 .firebase 폴더가 생성된 것을 확인할 수 있다.

 

[Firebase 호스팅 설정 2-8]

마지막으로 호스팅에 firebase deploy 명령어로 배포를 하면 되는데 우선 콘솔로 이동을 클릭하여 아래 고급 영역에서 다른 사이트 추가를 클릭하여 사용할 도메인을 입력하여 사이트 추가를 클릭한다. https://'도메인명'.web.app/ 이렇게 방식으로 도메인이 생성되게 된다.

 

[Firebase 호스팅 설정 2-9]

다른 사이트 추가를 클릭하여 원하는 도메인을 입력한 후에 모든 사이트 영역에 만들어진 도메인명으로 사이트 항목이 하나 추가 된것을 확인 할 수 있는데 사이트 명을 복사하여 firebase init이 끝나고 만들어진 firebase.json 폴더로 가서 우측 캡쳐화면과 같이 사이트명을 입력한다.

[Firebase 호스팅 설정 2-10]

이후 터미널에서 firebase deploy 명령어를 실행해보면 배포가 끝나게 되고 Hostring URL로 접속해보면 정상적으로 배포가 완료된 것을 확인할 수 있다.

 

3. 배포 이력 확인

[Firebase 배포 이력 확인]

배포 이력은 firebase 공식 홈페이지에 접속하여 사이트 보기를 클릭하면 이력을 확인할 수 있다.