[202408] Firebase를 이용한 웹 프로젝트 호스팅 및 배포 방법

Node.js 설치부터 Firebase를 이용한 웹 프로젝트 호스팅 및 배포 가이드

1. Node.js 설치

Node.js는 서버 사이드에서 자바스크립트를 실행할 수 있게 해주는 런타임입니다. Node.js를 설치하면 함께 설치되는 npm(Node Package Manager)은 다양한 자바스크립트 패키지를 관리하는 데 사용됩니다.

Node.js 설치 방법

• Node.js 공식 웹사이트에 접속하여 운영체제에 맞는 설치 파일을 다운로드합니다.
• 설치 파일을 실행하고 지시에 따라 설치를 완료합니다.

 

2. Firebase CLI 설치

Firebase CLI(Command Line Interface)는 Firebase 프로젝트를 관리하고 배포하는 데 사용되는 도구입니다. Firebase CLI를 사용하면 터미널에서 명령어를 통해 Firebase 프로젝트를 설정하고 관리할 수 있습니다.

Firebase CLI 설치 방법

• Firebase CLI는 npm을 통해 설치할 수 있습니다. Node.js를 설치하면 npm도 함께 설치되므로, 이를 통해 Firebase CLI를 설치합니다.

  npm install -g firebase-tools

3. Firebase 로그인

Firebase CLI를 통해 Firebase 계정에 로그인합니다. 이를 통해 CLI가 Firebase 프로젝트에 접근할 수 있게 됩니다.

Firebase 로그인 방법

• 터미널에서 로그인 명령어를 입력하면 기본 웹 브라우저가 열리며, Firebase 계정에 로그인할 수 있는 페이지로 이동합니다.
• 계정에 로그인하면 터미널에 인증이 완료되었음을 알려주는 메시지가 나타납니다. 
• firebase login

4. Firebase 프로젝트 초기화

Firebase CLI를 통해 Firebase 프로젝트를 초기화합니다. 이 과정에서는 호스팅 설정, Firebase 프로젝트 선택, 공용 디렉터리 설정 등을 할 수 있습니다.

Firebase 프로젝트 초기화 방법

• 터미널에서 초기화 명령어를 입력하여 Firebase 프로젝트를 초기화합니다.

  firebase init

• 호스팅 옵션을 선택하고, 기존 프로젝트를 선택하거나 새 프로젝트를 생성합니다.
• 프로젝트의 공용 디렉터리(public directory)를 지정합니다. 이 디렉터리는 배포할 파일들이 위치하는 디렉터리입니다.
  • React 프로젝트의 경우, build 입력

    What do you want to use as your public directory? public

• 싱글 페이지 애플리케이션(SPA) 설정 여부를 묻는 질문에 답합니다. SPA는 클라이언트 사이드 라우팅을 사용하여 모든 URL 요청을 index.html로 리다이렉트합니다.

  Configure as a single-page app (rewrite all urls to /index.html)? N

 

5. 프로젝트 빌드 및 배포

웹 프로젝트를 빌드하고 Firebase에 배포합니다. 빌드된 파일들은 지정한 공용 디렉터리에 위치하게 됩니다.

프로젝트 빌드 방법

• React, Angular, Vue.js와 같은 프레임워크를 사용하고 있다면, 해당 프레임워크의 빌드 명령어를 사용하여 프로젝트를 빌드합니다.
• 빌드된 파일들은 공용 디렉터리에 위치하게 됩니다.
  • 예를 들어, React 프로젝트의 경우 

  • npm run build

  • html 프로젝트의 경우, html 파일을 공용 디렉터리에 위치하면 됨

Firebase에 배포 방법

• 터미널에서 배포 명령어를 입력하여 Firebase에 프로젝트를 배포합니다.

  firebase deploy

• 배포가 완료되면 Firebase 호스팅 URL이 제공됩니다. 이 URL을 통해 배포된 웹사이트에 접근할 수 있습니다.

결론

이 가이드에서는 Node.js 설치부터 Firebase를 이용한 웹 프로젝트의 호스팅 및 배포 과정까지를 설명했습니다. Firebase는 간편한 설정과 강력한 기능을 제공하여 빠르게 웹 프로젝트를 배포할 수 있게 해줍니다. 이 가이드를 따라 진행하면 쉽게 웹 프로젝트를 Firebase에 배포할 수 있을 것입니다.