Firebase 웹 호스팅 생성 및 배포하기
Firebase로 웹호스팅을 생성하고 배포하는 방법에 대해 간략히 정리하는 글이다.
프로젝트를 배포하는 방법에는 여러가지가 있는데 서버를 직접 구축하고 호스팅을 직접 설정하여 배포하는 방법도 있겠지만 Firebase를 사용하면 클릭 몇 번으로 웹서버 구축이 가능하다.
1. Firebase 접속 및 프로젝트 생성
Firebase
Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.
firebase.google.com
우선 위 Firebase 공식 홈페이지로 접속하여 시작하기 버튼을 클릭한다.
시작하기 버튼을 누루고 프로젝트 추가 버튼을 클릭한다.
프로젝트 이름을 만들고 계속 클릭 후 Google 애널리틱스 사용설정 여부를 설정하는 화면이 나오는데 해도 되고 안해도 된다. 프로젝트 만들기 클릭하여 프로젝트 생성을 완료한다.
2. Hosting 설정
프로젝트가 생성이 되고나면 좌측 빌드 탭에서 Hosting을 클릭한후 시작하기 버튼을 클릭하면 Firebase 호스팅 설정 화면이 표출된다.
PowerShell 이나 Terminal 등의 명렴프롬프트에서 firebase를 사용하기 위해 Firebase CLI를 가이드에 따라 명령어로 설치한다.
맥북 사용자의 경우 위와 같이 권한 관련 에러가 발생한다면 명령어 앞에 sudo를 붙여서 실행하면 설치가 정상
적으로 된다.
Firebase CLI가 설치가 완료되고 나면 다음버튼을 클릭한다. 가이드에 따라 터미널에서 배포할 프로젝트의 루트 경로로 이동한 뒤 firebase login 명령어를 입력한다. 입력하고 나면 Firebase 가 error reporting 정보를 수집하는 것을 허가 하겠냐는 문구가 뜨는데 'Y' 를 입력한다.
입력을 하게 되면 로그인을 위해 계정을 선택하라는 화면이 표출된다. 계정을 선택한 후 우측 화면이 나오면 허용버튼을 클릭하면 로그인에 성공했다는 문구가 표출된다.
로그인 이후 가이드에 따라 프로젝트 루트경로에서 firebase init 명령어를 실행한다.
명령어를 실행하면 어떤 서비스를 사용할지 선택지가 나오게 되는데 3번째 선택지 Hosting 을 클릭한다. 스페이스를 누루면 선택되고 엔터를 클릭시 선택이 완료된다.
option 설정에 대한 선택지가 나오는데 기존에 구축한 프로젝트가 있기 때문에 use a existing project를 선택한 뒤 어떤 Firebase 프로젝트를 사용할건지 선택하라는 선택지에서는 Firebase 공식 홈페이지에서 만든 프로젝트를 선택한다.
이후 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 deploy 명령어로 배포를 하면 되는데 우선 콘솔로 이동을 클릭하여 아래 고급 영역에서 다른 사이트 추가를 클릭하여 사용할 도메인을 입력하여 사이트 추가를 클릭한다. https://'도메인명'.web.app/ 이렇게 방식으로 도메인이 생성되게 된다.
다른 사이트 추가를 클릭하여 원하는 도메인을 입력한 후에 모든 사이트 영역에 만들어진 도메인명으로 사이트 항목이 하나 추가 된것을 확인 할 수 있는데 사이트 명을 복사하여 firebase init이 끝나고 만들어진 firebase.json 폴더로 가서 우측 캡쳐화면과 같이 사이트명을 입력한다.
이후 터미널에서 firebase deploy 명령어를 실행해보면 배포가 끝나게 되고 Hostring URL로 접속해보면 정상적으로 배포가 완료된 것을 확인할 수 있다.
3. 배포 이력 확인
배포 이력은 firebase 공식 홈페이지에 접속하여 사이트 보기를 클릭하면 이력을 확인할 수 있다.