Firebase Hosting 설정 방법

Firebase Hosting은 일단 무료이며, 도메인명도 (이름.web.app)으로 괜찮아서 추천한다.

나는 앱 사이트를 웹사이트 생성툴인 구글사이트로 만들었는데, 루트에 app-ads.txt파일을 추가 못하는 문제부터 시작해 디자인을 맘대로 못하는 등의 이런저런 이유로 결국 firebase hosting을 사용하게 되었다.

 

자, 그럼 아래에서 Firebase Hosting을 설정하는 방법에 대해 자세히 알아보겠다.

일단 Firebase는 가입했다고 보고, 개발관련 지식이 없는 사람은 따라가지 못할 수도 있다.

 

1. Firebase에서 프로젝트를 생성한다.

 

2. 해당 프로젝트에 웹앱 추가를 선택한다.

 

3. Firebase CLI를 설치한다.

 

3-1. nodejs를 최신 stable버전으로 설치 혹은 업데이트한다. 

 

버전확인은 명령 프롬프트에서 아래와 같이 입력한다.

> node -v 

미설치상태라서 에러가 뜨거나, 너무 오래된 버전이면 아래에서 다운로드 받아 설치한다.

nodejs.org/ko/download/

다운로드 | Node.js

(나는 v6.11.2 -> v12.18.4으로 업데이트하였다.)

 

3-2. npm을 최신버전으로 업데이트한다.

업데이트는 명령프롬프트에서 아래와 같이 입력한다.

> npm install npm@latest -g

(나는 6.14.8 버전으로 업데이트하였다.)

 

3-3. firebase CLI를 설치한다.

설치는 명령프롬프트에서 아래와 같이 입력한다.

> npm install -g firebase-tools

 

4. Firebase 호스팅에 올리고자 하는 웹사이트의 폴더를 만든다.

예) c:\dev\web\myHomepage

 

5. 프로젝트를 초기화한다.

 

5-1. 명령프롬프트에서 위의 호스팅할 웹사이트 폴더로 이동한다.

예) > cd c:\dev\web\myHomepage

 

5-2. 해당 폴더에서 파이어베이스에 로그인한다.

>firebase login

 

5-2-1. 입력시 파이어베이스에서 로그정보수집여부를 물어보는데 원하는대로 입력한다.

나는 전송하지 않도록 n입력함.

 

5-2-2. 브라우저가 뜨고 Firebase CLI 앱에 연결할(파이어베이스 호스팅에 사용할) 구글 계정으로 로그인해준다.

 

5-2-3. 로컬의 생성된 웹페이지가 표시되며 닫아도 된다.

 

5-3. 해당 폴더에서 파이어베이스 웹앱을 초기화한다.

> firebase init

 

5-3-1. 초기화 할 것인가 Are you ready to proceed? (Y/n)가 뜨면 y한다.

5-3-2. 해당 웹앱에 적용할 서비스를 선택한다.

(나는 호스팅만 사용할거라 화살표로 이동하여 Hosting만 스페이스키로 선택 후, Enter)

5-3-3. 연결할 파이어베이스 프로젝트를 설정한다.

이미 위에서 만든 프로젝트에 해당 웹앱을 연결할거라 기본선택을 그대로 두고 넘어간다. 

5-3-4. 어느 프로젝트를 사용할것인지 선택한다.

내가 생성한 여러 프로젝트들 중에서, 연결할 프로젝트를 선택한다.

(위에서 생성한 프로젝트를 선택한다.)

5-3-5. 호스팅 배포용 폴더를 입력한다.

현재 폴더는 전체소스 및 로컬테스트 폴더이다. 추후 호스팅에 업로드할 소스만 담은 배포폴더명을 지정한다.

(기본 폴더명인 public으로 그대로 사용하였다. 엔터)

Hosting Setup Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory. ? What do you want to use as your public directory? (public)

(나는 배포폴더를 별도로 생성했다.)

 

5-3-6. 웹앱을 단일페이지로 구성할 것인지 여부를 선택한다.

(나는 여러페이지를 사용하기 위해 n으로 입력하였다.)

파이어베이스 웹앱 프로젝트 초기화가 완료되었다.

폴더에 가서 보면 관련 파일들이 생긴 걸 확인할 수 있다. 

프로젝트의 배포용 폴더인 public폴더에 들어가보면 홈페이지인 index.html과 페이지없음 404.html 파일이 기본적으로 생성되어 있음을 확인할 수 있다.

 

6. 로컬에서 소스를 테스트하기

해당 프로젝트 루트 폴더에서 아래 명령어를 입력하여 로컬서버를 실행하면 웹앱에 대한 경로가 생성된다.

> firebase serve --only hosting

위 링크를 브라우저에서 열어보면 아래와 같은 index.html파일이 열린다.

 

7. 직접 웹사이트 꾸미기.

이제 각종 편집툴을 이용해서 내가 원하는 형태로 웹사이트를 만들어 준다. 

html, javascript, css 등을 잘 사용해서... 

 

8. 파이어베이스 호스팅 배포

배포할 파일들을 정리하여 모두 public에 넣고 로컬서버로 확인이 완료되었다면,

명령 프롬프트에서 프로젝트 루트 디렉토리로 이동하여 아래와 같이 입력하면 된다.

예) c:\dev\myHomepage>firebase deploy

 

만약 배포로그를 기록하려면 아래와 같이 입력하면 된다.

> firebase deploy -m "새 디자인 적용"

 

그리고, 한 프로젝트에 여러 웹앱을 생성한 경우 아래와 같이 입력하면 된다.

> firebase deploy --only hosting:TARGET_NAME (호스팅사이트 고유식별자)

 

9. 웹 호스팅 결과 확인

내 프로젝트ID를 확인하고 아래의 아무 사이트에서든 확인하면 된다.

PROJECT_ID.web.app

PROJECT_ID.firebaseapp.com

커스텀 도메인

 

 

파이어베이스 호스팅에 대한 더 상세하고 추가적인 정보는, 아래 사이트에서 확인하자. 

firebase.google.com/docs/hosting