구글의 firebase에서 무료 호스팅 기능을 제공하고 있어서 소개하려고 합니다.
무료로 제공되는 내용은 스토리지 10GB, 트래픽 360MB/일 입니다.
이 이상을 사용하기 위해서는 유료 플랜으로 전환해야 합니다. (가격정책)
호스팅을 사용하기 위해서는 먼저 firebase 콘솔로 이동합니다.
처음 사용자라면 구글 로그인 후에 별도의 가입절차가 있었던거 같은데..긴가민가하네요.
암튼 콘솔로 들어간 후에 프로젝트를 생성하면, 아래와 같은 대시보드 화면이 보일텐데..
우린 여기서 Hosting 기능을 사용할 겁니다.
firebase는 호스팅 말고도 구글 로그인을 할 수 있는 인증, DB, 머신러닝 등 여러가지 서비스들을 제공하고 있습니다. 관심있으신 분들은 한번 찾아보세요. 저는 여기서 호스팅, 인증, DB만 주로 사용을 하고 있습니다.
아무튼 구글에서는 친절하게도 각 서비스별로 가이드 문서를 제공하고 있어서
가이드 문서만 보고 따라하면, 호스팅을 설정하고 사용하는데 아무 문제가 없습니다.(가이드문서)
Firebase 설치
먼저 프로젝트 폴더에서 firebase와 firebase-CLI를 설치해줍니다.
npm install firebase
npm install -g firebase-tools
firebase를 설치한 후에는 인증을 해야합니다.
firebase login
터미널에서 위와같이 입력하면 브라우저가 열리면서 구글 로그인이 나올겁니다.
정상적으로 로그인하게 되면 Success! 라는 메세지와 함께 인증이 되었다고 나옵니다.
프로젝트 초기화
firebase 사용을 위해서 다음에 할일은 초기화입니다.
호스팅에 필요한 디렉토리와 파일들을 알아서 설정하고 생성해줍니다.
터미널에서 아래처럼 입력을 해줍니다.
firebase init
초기화시에 웹에서 접근할 public 디렉토리를 물어보는데, 디폴트는 public으로 되어있습니다.
변경이 필요하면 public directory를 물어볼때 수정하시면 됩니다.
초기화가 완료되면 Firebase initialization complete! 라는 문구가 나옵니다.
배포
이제 firebase를 설치했고, 초기화까지 끝냈다면,
public 디렉토리에 index, 404, hosting 와 같은 html 문서 및 설정에 필요한 json 파일 몇개가 추가되어 있을겁니다.
이제 배포를 하면 되는데,
배포전에 로컬에서 확인을 하고 싶으면 아래와 같은 명령으로 확인이 가능합니다.
firebase serve --only hosting
그럼 브라우저에서 lcoalhost:5000 으로 접속하여 확인이 가능합니다.
이제 모든 준비가 끝났고, 로컬에서 테스트도 끝났습니다.
마지막으로 모든 사람들이 볼 수 있도록 공개용으로 배포를 해야합니다.
firebase deploy
위와같이 하게되면 배포를 진행하게되고,
성공으로 끝났다면 마지막에 접속가능한 URL(***.web.app)을 표시해줍니다.
web.app 형식의 도메인이 마음에 들지 않는다면, 콘솔 호스팅메뉴에서 커스텀 도메인으로 연결도 지원하고 있으니 참고하시면 좋을거 같습니다.