Firebase 사용에 대한 이전 글들을 통해 DB인 컬렉션에 자료를 등록하는 페이지, 자료를 읽어서 가져오는 페이지, 키워드 검색, 삭제 및 수정, 게시판, 로그인, 가입 등에 대한 여러 페이지를 만들었고, Navbar를 이용해 메뉴바를 추가하는 방법까지 소개했었다.
만들어진 페이지들의 몇몇 예는 다음과 같은데, 이렇게 만들어진 웹페이지들을 인터넷을 통해 외부에서도, 그리고 다른 사용자들도 접속할 수 있는 웹서비스로 사용하려면, 인터넷의 웹서버를 통해 배포하는 과정이 필요하다.
그런데, Firebase를 이용하면 자체적으로 호스팅 서비스를 제공하기 때문에, 별도의 웹서버 없이도, 아주 쉽고 간단하게 로컬 PC에서 만든 웹페이지들을 인터넷에 배포할 수가 있다. 너무 간단해 굳이 별도로 글을 작성할 필요가 있을 정도이다.
로컬 PC에서 만든 웹페이지들을 Firebase를 이용하여 인터넷에 배포하는 방법은 …
먼저 코드를 만들었던 Visual Studio Code에서 터미널 창을 열어준다.
그리고 아래 화면처럼 터미널 창이 열리면, “firebase deploy” 명령을 입력해 준다.
웹서비스 배포를 위해 필요한 것은 이것뿐이다.
10-20여 초 정도의 시간을 기다려주면, 다음과 같이 성공적으로 배포가 완료되었음을 나타내는 “Deploy COmplete!” 메시지가 나타나고,
그 아랫부분에 인터넷 접속을 위한 접속 url 주소가 나타난다. 이제 이 URL을 브라우저에 입력해 보면(또는 Ctrl+마우스 Click) Firebase를 통해 배포된 웹서비스가 정상적으로 동작하는 것을 확인할 수 있다.
만일 구입한 도메인이 있다면 이 웹서비스에 연결하여 사용할 수도 있다.
Troubleshooting)
1. 그림이 깨지는 경우
만일 인터넷에 배포를 마친후, 로컬 PC에서 다음과 같이 보이던 그림이나 동영상이
다음과 같은 형태로 정상적으로 보이지 않는 경우가 발생하기도 한다.
이러한 현상이 생기는 경우라면, 인터넷에 접속하는 브라우저의 캐시를 삭제한 후 재접속해 보기 바란다.
2. DB에 그림이나, 사진 파일이 연관된 자료의 신규 등록이나 삭제가 안되는 경우
이러한 현상은 Firebase의 storage 서비스에 대한 접근 권한 때문에 발생하곤 한다.
“규칙”탭을 확인해 보면, 아래화면처럼 storage에 대한 접근권한이 “if false;”로 설정된 상태일때 이런 문제가 발생하는데,
적절하게 변경해 주면 해소된다. 우선은 다음과 같이 true로 변경해주면 해결된다.
(storage에 대한 접근권한을 어떻게 제어할지에 대해서는 각자 고민이 필요하다. – 위의 에에서는 로그인 된 경우에만 storage와 연관된 웹화면을 볼수 있도록 해 둔 상태이기는 하다.)
