Firebase Hosting 웹사이트 배포하기 - Firebase 웹개발 기초(1/4)

카테고리: firebase, 작성일:

firebase 가 처음에 가장 와닿았던 부분이 간단한 html을 만들고 이를 웹상의 대중들에게 배포할 수 있다는 것이었는데요. 별다른 서버구축 없이도 간단한게 진행을 할 수 있는 부분이 장점인것 같습니다. 기본적으로는 무료이지만 특정 트래픽을 넘어서면 유료전환이 필요합니다.

firebase hosting 을 시작하는 방법에 대해 정리해보았습니다.

Firebase Console 에서 프로젝트 생성

가장 먼저 firebase console 사이트에서, 새 프로젝트를 생성합니다. (firebase console 이동하기)

firebase console 화면
firebase console 화면

프로젝트의 이름을 지정하여 생성합니다.

firebase 프로젝트 생성하기1
firebase 프로젝트 생성하기1

애널리특스 사용설정은 지금 단계에서는 하지 않았지만, 화면의 설명에는 권장하는 것으로 나와있습니다.

firebase 프로젝트 생성하기2
firebase 프로젝트 생성하기2

로컬에서 firebase hosting 프로젝트 생성, 초기화

firebase console에 프로젝트를 생성하였다면, 이를 로컬에서의 작업환경과 연동을 시켜야 합니다.

로컬에서 임의의 디렉토리를 생성한 후, 이 디렉토리를 프로젝트를 진행할 firebase 환경으로 초기화 시키는 것이 다음 목표입니다.

디렉토리 진입 후, firebase init hosting 명령어를 실행합니다. 이후 아래와 같이 나오는 질문에 답을 선택합니다.

Please select an option
-> Use an existing project 선택 (처음에 firebase console에서 만든 프로젝트와 연동할것인지?)

? What do you want to use as your public directory
-> public 선택 (어느 디렉토리를 배포용 디렉토리로 할 지?)

? Configure as a single-page app (rewrite all urls to /index.html)?
-> No 선택

? Set up automatic builds and deploys with GitHub?
-> No 선택

위처럼 수행한 결과 화면은 아래와 같습니다.

D:\projects\firebase\ahnslab-firebase-diary>
D:\projects\firebase\ahnslab-firebase-diary>firebase init hosting

(생략)

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: ahnslab-firebase-diary (firebase-diary)
i  Using project ahnslab-firebase-diary (firebase-diary)

=== 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
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
+  Wrote public/404.html
+  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

+  Firebase initialization complete!

(생략)

D:\projects\firebase\ahnslab-firebase-diary>

위처럼 최종적으로 ‘Firebase initialization complete!’과 같이 표기가 된다면, 로컬의 해당 프로젝트가 위에서 만든 firebase 프로젝트와 연결이 되어 초기화된 것입니다.

생성된 프로젝트 구조 살펴보기

최초로 만들어진 firebase hosting 프로젝트의 구조는 아래와 같습니다.

firebase hosting 초기 프로젝트 구조
firebase hosting 초기 프로젝트 구조

각각을 살펴보면,

- public/index.html : public에 있는 html 파일들이 웹사이트 상에 보여지게 되며, index.html 은 사이트 진입 시 최초로 보여줄 화면

- public/404.html : 에러 상황에서 보여주는 html 파일

- .firebaserc : 프로젝트 정보를 저장하는 파일

- .gitignore : git commit에 제외할 대상을 지정하는 파일

- firebase.json : 프로젝트의 구성, 호스팅의 구성 등 정보를 정하는 파일

로컬에서 실행시켜보기

프로젝트 디렉토리에서 다음 명령어를 실행

firebase emulators:start

명령어를 실행하면, localhost:5000 에 웹이 구동됩니다. 로컬에서 웹이 구동된 상태에서는 html 코드 수정사항이 실시간으로 반영됩니다.

firebase hosting localhost 실행 콘솔 화면
firebase hosting localhost 실행 콘솔 화면
firebase hosting localhost 실행 웹 화면
firebase hosting localhost 실행 웹 화면

운영서버에 배포하기

로컬에서 테스트를 마친 후에는 실제 운영 환경으로 사이트롤 배포해야 할텐데요. 최종 배포를 위해서는 아래처럼 명령어를 실행합니다.

firebase deploy --only hosting

아래 화면처럼, 관련 로그들이 출력되고, 최종적으로 웹상에 배포가 됩니다. 배포되는 사이트의 웹주소는 https://{프로젝트이름}.web.app 처럼 그럴싸하게, 깔끔하게 URL이 할당이 됩니다. 해당 url 로 웹에 잘 배포되었는지 테스트를 해보면 되겠습니다.

firebase hosting localhost 실행 웹 화면
firebase hosting localhost 실행 웹 화면

이렇게 되면, html 페이지가 실제로 웹상에 배포가 끝난 것이고, 해당 html 파일을 내가 원하는대로 수정하고, 관련 웹애플리케이션을 만들면 되는 것입니다.

아래에서는 firebase 프로젝트 초기화로 만들어지는 index.html 의 내용은 어떤지 한번 간단히 살펴보도록 하겠습니다.

index.html 살펴보기

아래는 firebase 프로젝트 생성 시, 최초로 세팅되는 샘플 html 파일 내용입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/9.6.4/firebase-app-compat.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/9.6.4/firebase-auth-compat.js"></script>
    <script defer src="/__/firebase/9.6.4/firebase-database-compat.js"></script>
    <script defer src="/__/firebase/9.6.4/firebase-firestore-compat.js"></script>
    <script defer src="/__/firebase/9.6.4/firebase-functions-compat.js"></script>
    <script defer src="/__/firebase/9.6.4/firebase-messaging-compat.js"></script>
    <script defer src="/__/firebase/9.6.4/firebase-storage-compat.js"></script>
    <script defer src="/__/firebase/9.6.4/firebase-analytics-compat.js"></script>
    <script defer src="/__/firebase/9.6.4/firebase-remote-config-compat.js"></script>
    <script defer src="/__/firebase/9.6.4/firebase-performance-compat.js"></script>
    <!-- 
      initialize the SDK after all desired features are loaded, set useEmulator to false
      to avoid connecting the SDK to running emulators.
    -->
    <script defer src="/__/firebase/init.js?useEmulator=true"></script>

    <style media="screen">
      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
      @media (max-width: 600px) {
        body, #message { margin-top: 0; background: white; box-shadow: none; }
        body { border-top: 16px solid #ffa100; }
      }
    </style>
  </head>
  <body>
    <div id="message">
      <h2>Welcome</h2>
      <h1>Firebase Hosting Setup Complete</h1>
      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
    </div>
    <p id="load">Firebase SDK Loading&hellip;</p>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        const loadEl = document.querySelector('#load');
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
        // // The Firebase SDK is initialized and available here!
        //
        // firebase.auth().onAuthStateChanged(user => { });
        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
        // firebase.firestore().doc('/foo/bar').get().then(() => { });
        // firebase.functions().httpsCallable('yourFunction')().then(() => { });
        // firebase.messaging().requestPermission().then(() => { });
        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
        // firebase.analytics(); // call to activate
        // firebase.analytics().logEvent('tutorial_completed');
        // firebase.performance(); // call to activate
        //
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

        try {
          let app = firebase.app();
          let features = [
            'auth', 
            'database', 
            'firestore',
            'functions',
            'messaging', 
            'storage', 
            'analytics', 
            'remoteConfig',
            'performance',
          ].filter(feature => typeof app[feature] === 'function');
          loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
        } catch (e) {
          console.error(e);
          loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
        }
      });
    </script>
  </body>
</html>

html 한 페이지에 모든 기본 기능의 내용이 다 들어있어서, 간단한 페이지를 만들어서 배포한다면 이 페이지를 기반으로 해도 될것같은 생각이 듭니다.

javascript로, firebase 의 여러 모듈(라이브러리)의 사용을 위한 기본 선언이 되어있는 것을 볼 수 있습니다.

html 수정하여 다시 배포하기

이제부터는 html 및 기타 소스 파일을 원하는 웹애플리케이션을 위한 코드로 작성하면서 다시 배포하면 되는데요. 1차적으로 저의 경우는, 기존 코드에서 사용하지 않는 firebase 라이브러리들을 제거하고, 화면코드의 틀은 유지해서 배포를 해보았습니다.

똑같이 이후 작업들도 아래의 두 명령어를 통해 계속 진행하시면 됩니다.


firebase emulators:start

firebase deploy --only hosting

추가로 제가 수행한 작업은 소스관리를 위해, 현재의 firebase 프로젝트를 github에 업로드하여 연동하는 것인데, 그 방법은 다음 링크를 참고해주시면 됩니다.

- firebase hosting 프로젝트를 github에 업로드하기

이 글을 공유하기
  • 카카오스토리 공유하기
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기