Coding Log


Firebase Hosting 포스팅에 앞서

본 카테고리는 작년부터 구글이 밀고 있는 Serverless인 Firebase의 Hosting에 관하여 다룬다.

일반적인 호스팅 서비스와는 다르게 정적 페이지만을 호스팅해주는 서비스로 각각 장단이 존재한다.

Firebase의 많은 서비스 중 Hosting에 대해 정리해본다.

참고 Firebase 공식 사이트

참고 Firebase Korea Facebook Page

참고 Firebase Korea Facebook Group

참고 Firebase Korea Github

Firebase Hosting 환경 설정 및 배포

Firebase의 Hosting 서비스를 이용해보자.

물론 Firebase에 프로젝트를 먼저 생성해야 하며 구글 계정이 필요하다.

프로젝트를 생성하기 위해선 아래 링크를 방문하자.

참고 Firebase Console

Firebase CLI 설치하기

앞서 포스팅에서 언급했듯 Firebase의 Hosting은 CLI기반의 환경에서 동작한다.

프로젝트 생성부터 하나씩 하나씩 알아보자.

프로젝트 생성

위의 Firebase Console 사이트에 들어가면 아래의 화면이 보인다.

물론 처음 계정을 생성한 사람은 프로젝트가 보이지 않는다.

좌측의 프로젝트 추가 버튼을 눌러보자.

누르면 Modal 형식의 창이뜨고 프로젝트의 이름과 국가를 선택할 수 있다.

위와 같이 프로젝트의 이름은 원하는 대로 하고, 국가는 대한민국을 고르면 된다.

여기서 고른 국가에 따라서 데이터 위치가 결정되는 건 아니다.

애초에 데이터 센터가 그렇게 세계 곳곳에 있는 것도 아니기 때문이다.

위의 국가는 프로젝트에서 발생한 수익을 해당 국가의 통화로 보여주기 위해 선택하는 것이라 봐도 무방하다.

국가/지역 옆에 물음표에 커서를 올리면 자세한 설명이 나온다.

프로젝트 만들기 버튼을 누르고 나면 프로젝트가 생성되며 아래의 화면이 보인다.

좌측의 개발탭에 있는 서비스 중 Hosting 을 선택해보자.

Hosting에 대한 간단한 설명과 함께 시작하기 버튼이 있는 것을 확인할 수 있다.

시작하기를 누르자.

뜬금없이 npm이 등장하며 Firebase CLI를 설치해야 한다고 나온다.

구글 특유의 불친절이 느껴지는 부분이다.

npm을 통해 firebase-tools를 설치하기 위해 사전에 Node.js 환경을 구축해두야 한다.

Node.js 설치는 아래 포스팅을 참고하자.

참고 Node.js 설치 포스팅

Firebase CLI 설치

설치를 완료하였다면 잠시 브라우저를 최소화시키고 터미널을 열어보자.

터미널의 아래 명령어를 입력하면 된다.

npm install -g firebase-tools

위의 명령어를 수행하다가 아래 처럼 오류가 날 수도 있다.

권한이 없는 것이니 사용자 스크립트 설정을 바꾸던지 sudo 명령어를 사용하자.

sudo npm install -g firebase-tools

위와 같이 트리구조가 나온 뒤 다시 터미널이 대기 상태로 돌아오면 설치가 완료된 것이다.

Firebase Login

이 다음으로는 프로젝트가 구성될 폴더로 이동하면 된다.

예시가 될 폴더로 바탕화면에 firebase_hosting이라는 폴더를 생성했다.

이제 Firebase CLI 환경에서 로그인을 해야 한다.

터미널에서 해당 폴더위치로 이동한 뒤에서 아래 명령어를 입력한다.

firebase login

그럼 위와 같은 화면과 함께 CLI 관련 권한 요청이 뜨고 Y를 입력해서 동의하면 된다.

그럼 브라우저가 열리며

위와 같은 화면이 나온다. 여기서 허용을 누르자.

허용을 누르면 로그인 성공이라는 화면으로 바뀐다.

터미널도 확인해보자.

위와 같이 뜬다면 Firebase CLI 설치와 함께 로그인도 완료한 것이다.

Firebase Application 초기화

이제 터미널에서 Application을 초기화해보자.

아래의 명령어를 입력한다.

firebase init

Firebase라는 글과 함께 프로젝트 초기화가 시작된다.

위의 선택지는 총 3개인데 Real-Time Database, Functions, Hosting 이다. Firebase의 서비스들인데 정적 웹 사이트만 올릴 생각이면 Hosting만 선택하면 되지만 3가지 다 선택해도 상관없다.

선택/해제는 해당 옵션에서 스페이스를 누르면 선택할 수 있다.

Real-Time Database와 Functions는 추후 따로 다루도록 하겠다.

엔터를 치면서 다음 단계로 계속해서 진행하자.

프로젝트 리스트에서 위에서 생성한 프로젝트를 선택하자.

최초 생성시 아마 하나밖에 존재하지 않을 것이다.

그 다음 Database 설정 파일명을 입력하면 된다. 그냥 엔터를 치면 회색으로 표시된 database.rules.json이 기본값으로 적용되며, 앞으로도 동일하게 적용된다.

Funtions 설정이 진행된 후에 npm 의존성 관련 파일들을 설치할건지 물어오는데 Y를 입력하자.

설치가 완료된 후 public directory를 만들건지 물어오는데 이 폴더에 들어있는 내용이 웹상에 배포된다.

즉 정적 웹 사이트 프로젝트를 public directory에서 구현하면 된다.

엔터를 치면 폴더명으로 public을 사용한다.

그 다음으로 SPA인지를 물어오는데 별 상관없으므로 N을 입력하자.

이로써 초기화가 완료되었다.

만들어진 폴더안의 파일들은 아래와 같다.

public 폴더 안에는 기본적으로 index.html과 404.html 파일이 생성된다.

index.html 파일을 실행시켜 브라우저에서 확인하면 아래와 같은 기본 페이지가 나온다.

웹 상에 배포

위에서 최소화한 브라우저에서 Firebase Console - Hosting을 보자.

새로고침을 해도 바뀐 것이 없는데, 아직 로컬 환경에서만 초기화를 하고 웹 상에 배포하지 않았기 때문이다.

이제 배포를 해보자.

배포 또한 CLI 환경에서 진행하며 아래의 명령어를 입력하면 된다.

firebase deploy

입력하고 나면 터미널과 브라우저는 아래의 화면을 보인다.


배포가 완료되면 아래의 화면을 볼 수 있다.


이제 배포가 완료된 것이다.

최초 배포를 진행하게 되면 프로젝트 이름에 따라 <YOUR-FIREBASE-APP>.firebaseapp.com형식의 도메인 주소가 부여되며 웹상에서 접근할 수 있다.

현재 배포중인 정적 웹사이트는 배포 기록에서 현재 라는 파란 글씨로 표시되며 여러 번 배포했을 경우 해당 배포 기록을 이용하여 바로바로 롤백도 가능하다.

부여받은 해당 도메인으로 접속해보자.

로컬의 index.html 파일이 배포되어 동일한 화면이 보이면 배포도 성공이다.

이제 public 폴더 내에 정적 웹사이트를 구축하면 Firebase CLI와 Hosting을 이용해 빠르게 배포할 수 있게 되었다.

DISQUS 로드 중…
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다