Firebase에 웹사이트 배포 및 무료 사용: 가이드

얼마 전 ''라는 제목으로 글을 쓴 적이 있다. 웹사이트 성능 점수를 35에서 100으로 향상시키는 방법 " 그 게시물에서 저는 Firebase에 프로젝트를 배포하고 무료로 사용하는 방법을 보여주겠다고 약속했습니다. 저는 약속을 지키고 있습니다!

파이어베이스란 무엇입니까?

아직 Firebase에 대해 잘 모르시는 분들도 계실 텐데요, Firebase가 무엇인지 간단히 설명해드리겠습니다.

중포 기지 개발자가 애플리케이션을 보다 쉽게 구축하고 확장할 수 있도록 지원하는 도구 및 서비스 세트를 제공하는 모바일 및 웹 애플리케이션 개발 플랫폼입니다.

실시간 데이터베이스, 인증, 호스팅, 클라우드 스토리지 등과 같은 기능을 제공합니다. 또한 Firebase는 백엔드 기능과 인프라를 제공하므로 개발자는 서버 관리나 복잡한 인프라 설정에 대한 걱정 없이 앱 구축에 집중할 수 있습니다.

전반적으로 Firebase는 개발 프로세스를 단순화하고 개발자가 고품질 애플리케이션을 빠르게 만들 수 있도록 해줍니다.

오늘은 '호스팅' 기능을 사용하여 Next.JS 프로젝트를 저장하겠습니다. 이 예에서는 프로젝트의 정적 버전을 호스팅하는 방법을 보여 드리겠습니다. 가장 먼저 해야 할 일은 계정을 등록하는 것입니다.

Firebase 계정을 등록하는 방법

Firebase에 계정을 등록하려면 다음을 엽니다. https://firebase.google.com/ , '시작하기'를 클릭하세요.

그런 다음 Google 계정을 만들거나 기존 계정을 사용해야 합니다. 첫 번째 단계를 완료하면 Firebase 제어판이 표시됩니다. 다음 단계는 프로젝트를 생성하는 것입니다.

Firebase에서 프로젝트를 만드는 방법

프로젝트를 생성하려면 다음과 같은 간단한 3단계를 수행해야 합니다.

1. "프로젝트 추가"를 클릭하고 새 창에서 이름을 지정하십시오.

2. 프로젝트에 대한 Google Analytics 기능을 활성화 또는 비활성화하고 "프로젝트 만들기"를 클릭하세요.

몇 분 후에 프로젝트가 생성됩니다.

Firebase를 무료로 사용하는 방법

프로젝트를 생성하면 대시보드에서 해당 프로젝트를 볼 수 있습니다. 기본적으로 Spark 플랜을 사용하게 됩니다. 그렇지 않은 경우 Spark 플랜 으로 변경해야 합니다.

Spark 플랜은 월별 비용이 없는 무료 플랜 입니다. 몇 가지 제한 사항이 있지만 프로젝트를 시작하는 데는 충분합니다. 특히 정적 웹 사이트의 호스팅 플랫폼으로 사용할 계획이라면 더욱 그렇습니다.

계획에 대한 전체 설명을 보려면 다음을 방문하십시오. 링크 .

Firebase 호스팅을 설정할 시간입니다.

Firebase 호스팅을 설정하는 방법

Firebase 호스팅 설정도 매우 간단합니다. 귀하의 계정에 로그인하고 프로젝트를 선택하십시오. 그런 다음 왼쪽 메뉴에서 "빌드"를 클릭하고 드롭다운에서 "호스팅"을 선택합니다.

새 창에 환영 화면이 표시됩니다. '시작하기'를 클릭하세요.

프로젝트를 호스팅하려면 먼저 Firebase CLI를 설정해야 합니다.

터미널 창을 열고 다음 명령을 입력합니다.

 npm install -g firebase-tools

설정이 완료되면 터미널에 다음을 입력하십시오.

 firebase login

액세스 승인을 위해 로그인 화면으로 이동합니다.

다음 단계는 터미널 창 내에서 정적 웹 사이트를 저장한 프로젝트 폴더로 이동하는 것입니다.

다음 명령을 실행하십시오.

 firebase init

모든 작업을 올바르게 수행했다면 터미널 창에 다음이 표시되어야 합니다.

옵션 목록에서 "호스팅: Firebase 호스팅용 파일 구성 및 (선택 사항) GitHub 작업 배포 설정"을 선택합니다. 키보드의 화살표 키를 사용하여 탐색하고 스페이스바를 눌러 선택한 다음 Enter 키를 누르세요.

그런 다음 목록에서 계정을 선택하고 Enter를 누르십시오.

이미 프로젝트가 있으므로 목록에서 "기존 프로젝트 사용"을 선택하고 이전 단계에서 생성한 프로젝트를 선택합니다.

기본적으로 공용 디렉터리는 "public"으로 설정됩니다. 다른 디렉터리를 지정하려면 다음 단계에서 지정할 수 있습니다. 예를 들어, 내 Next.js 프로젝트는 'out' 디렉터리에 웹 사이트의 정적 버전을 생성하므로 이 단계에서 이를 지정합니다.

마지막 두 가지 구성 질문은 웹사이트 설정에 관한 것입니다.

• "단일 페이지 앱으로 구성(모든 URL을 /index.html로 다시 작성)" - 예

• "GitHub을 사용하여 자동 빌드 및 배포를 설정하시겠습니까?" - 아니요

설정이 완료되었습니다. 이제 프로젝트를 Firebase에 배포할 차례입니다.

Firebase에 웹사이트를 배포하는 방법

모든 구성을 완료한 후 웹사이트를 Firebase 호스팅에 배포할 수 있습니다.

터미널 창의 프로젝트 디렉터리 내에 다음 명령을 입력합니다.

 firebase deploy --only hosting

모든 것이 순조롭게 진행되면 웹사이트에 액세스하는 데 사용할 수 있는 URL이 표시됩니다.

이 기사가 도움이 되었기를 바랍니다. 다음 단계에서는 Firebase 프로젝트에 대한 맞춤 도메인 이름을 설정하는 방법을 보여드리겠습니다.

계속 지켜봐 주시기 바랍니다!

여기에도 게시됨