다중 호스팅의 필요성
파이어 베이스로 웹서비스를 만들다 보면, 때로는 관리자와 사용자 화면을 하나의 프로젝트에 따로 만들고 싶은 경우들이 많이 있다. 실제로 해당 웹페이지에 일반 사용자가 와서 볼 수 있는 페이지를 호스팅 하면서, 동시에 해당 컬렉션이나 스토리지에 관리자들이 자료를 올리기 위해서 관리자들을 위한 별도의 웹페이지가 있었으면 하는 경우이다. 또한 때로는 웹페이지를 만들면서, 서로 다른 언어 사용자를 위해 언어별 페이지를 만들어야 하는 경우도 있다.
이들은 모두 하나의 프로젝트 내에서 동일한 DB나 스토리지를 공유하되, 서로 다른 화면으로 분리해야 한다는 특징이 있다.
이러한 상황을 해결할 수 있는 한 가지 방법은 로그인과 메뉴바를 이용하는 것으로, 예를 들어 일반 사용자는 로그인 없이 해당 웹페이지를 이용하고, 자료를 올리는 관리자는 로그인한 후, 관리자를 위한 전용화면들을 사용하는 방식이다. 여러 개의 언어로 구성된 페이지의 경우도 버튼으로 언어를 선택하게 하고, 각 언어별로 선택된 페이지만으로 구성된 메뉴바를 구성하는 방식으로 어느 정도 이런 문제를 해소할 수는 있다.
그런데 이런 메뉴 방식 외에 보다 근본적으로 이러한 상황에 대처할 수 있는 방법이 있는데, 바로 multihosting으로, 하나의 프로젝트에서 여러 개의 앱을 동시에 호스팅 하는 방식이다.
다중 호스팅의 필요성
파이어 베이스에서는 하나의 프로젝트 내에서 컬렉션과 스토리지를 공유하는 여러 개의 앱을 동시에 호스팅 하는 방법을 지원한다. 다음의 예를 들어 이를 구현하는 방법을 소개한다.
먼저, 다음과 같이 하나의 프로젝트에서 애견 사진이나 동영상을 업로드하는 기능을 하는 웹페이지를 따로 만들고,
사용자들은 인터넷에서 다음과 같은 전용 페이지로 이러한 사진들을 보는 웹페이지를 만들고자 하는 경우를 예로 소개한다.
이를 구현하려면 가장 중요한 것이 프로젝트 디렉터리에 있는 firbasebase.json 파일을 다음과 같이 구성해 준다.
그리고, 사용자 화면은 public 폴더 아래에 사용자를 위한 consumer라는 부속 폴더와, 관리자들을 위한 manager라는 폴더를 구성하고, 여기에 각각의 index.html을 넣어준다. 이들은 이름만 같은 index.html일뿐 내용은 서로 다른 파일이다.
consumer 폴더에는 사용자를 위한 웹페이지용으로 만든 index.html을,
manager 폴더에는 관리자를 위한 index.html을 넣어준다.
중요한것은 이들 모두 MyJPGMP4라는 컬렉션을 통해 자료를 공유하는 점이다.
만일 추가 화면이 필요하다면, 각각의 index.html에 메뉴바를 구성하고 페이지를 추가해도 된다.
그리고 두 폴더에 파이어 베이스 접속을 위한 firebaseConfig.JS 파일을 복사해 넣어준다.(동일 파일)
이렇게 하면 결과적으로 두 폴더 내 파일 구성은 다음과 같은 형태가 된다.
이 상태에서 다음과 같은 firebase.Json 파일이 있는 프로젝트 디렉터리에서
deploy 명령을 내린다. 그러면 다음과 같이 정상적으로 배포가 이루어지고, 웹페이지의 URL이 생성된다.
그런데 한 가지 주의할 것은 이 URL을 그대로 접속하면 다음과 같은 404에러가 발생하게 되는데, 멀티 호스팅 시 생성되는 URL은 프로젝트의 URL이지만 개별 페이지 접속에는 추가 폴더의 이름까지 지정해 주어야 하기 때문에 발생하는 문제이다.
다음 화면에서처럼 각각의 index.html 파일이 있던 하위 폴더 이름까지 URL에 추가해 주면 다음과 같이 정상적으로 각각의 페이지들이 보이게 된다.
한 가지 기억할 것은 이렇게 여러 가지 앱으로 공통의 스토리지와 컬렉션을 접속하는 경우 각각의 보안규칙을 적절하게 설정해야 한다.