Firebase 호스팅을 사용하여 웹 앱을 배포하는 주요 단계

Firebase 호스팅은 개발자가 웹 애플리케이션을 배포할 수 있도록 Google에서 제공하는 안전하고 빠르며 안정적인 호스팅 서비스입니다. HTML, CSS, JavaScript 파일과 같은 정적 자산에 대한 고성능 호스팅 제공을 목표로 하는 Firebase 호스팅은 서버리스 기능을 사용하여 동적 콘텐츠 생성도 지원합니다. 글로벌 콘텐츠 전송 네트워크(CDN)를 통해 Firebase 호스팅은 애플리케이션 최종 사용자의 지연 시간을 최소화합니다.

Firebase 호스팅은 Firebase Functions 및 Firestore와 같은 다른 Firebase 서비스와 잘 통합되는 사용하기 쉬운 배포 솔루션을 찾는 웹 개발자에게 탁월한 옵션입니다. 이러한 통합 덕분에 Google에서 제공하는 실시간 데이터 동기화, 인증, 서버리스 컴퓨팅 기능을 활용하는 강력한 웹 애플리케이션을 구축할 수 있습니다.

Firebase 호스팅을 사용하여 웹 앱을 배포하기 위한 필수 구성 요소

Firebase 호스팅을 사용하여 웹 앱을 배포하려면 먼저 충족해야 할 특정 전제 조건이 있습니다.

• Firebase 계정 및 활성 Firebase 프로젝트
• 일반 HTML, CSS 및 JavaScript 설정이나 React, Angular 또는 Vue.js와 같은 최신 웹 프레임워크를 사용하여 생성된 웹 앱
• 개발 컴퓨터에 설치된 Node.js 및 npm(Node.js 패키지 관리자)
• 개발 머신에 설치 및 구성된 Firebase CLI(명령줄 인터페이스)

Firebase 계정이 없다면 Firebase 웹사이트로 이동하여 가입하세요. 웹 개발이 처음인 경우 HTML, CSS 및 JavaScript의 기본 사항을 배우거나 React, Vue.js 또는 Angular와 같은 인기 있는 웹 프레임워크를 살펴보세요.

Firebase 호스팅 설정

전제조건을 충족하면 프로젝트에 Firebase 호스팅을 설정할 수 있습니다. 다음과 같이하세요:

1. Firebase 계정을 만들고 Firebase 콘솔에 로그인하세요 . 아직 Firebase 계정을 만들고 Firebase 콘솔에 로그인하지 않았다면 로그인하세요. 계정 생성은 무료이며 시작 시 무료 Spark 플랜을 활용할 수 있습니다.
2. 새 Firebase 프로젝트 만들기 또는 기존 프로젝트 선택 : Firebase 콘솔에서 새 프로젝트를 만들거나 기존 프로젝트를 선택하여 Firebase 호스팅을 활성화할 수 있습니다.
3. 프로젝트에 Firebase 호스팅 활성화 : 대시보드로 이동하여 사이드바에서 "호스팅" 탭을 클릭하세요. 프로젝트에 Firebase 호스팅을 활성화하려면 제공된 지침을 따르세요.
4. 개발 머신에 Firebase CLI 설치 : 개발 머신에서 터미널이나 명령 프롬프트를 엽니다. 아직 설치하지 않았다면 다음 명령어를 실행하여 전역적으로 Firebase CLI를 설치하세요.

    npm install -g firebase-tools

   이 명령을 실행하기 전에 Node.js 및 npm이 설치되어 있는지 확인하세요. 권한 문제가 발생하면 Unix 기반 시스템의 경우 sudo 사용하거나 Windows 시스템의 경우 관리자로 명령 프롬프트를 실행하는 것이 좋습니다.
5. Google 계정을 사용하여 Firebase CLI에 로그인 : Firebase CLI를 설치한 후 다음 명령을 실행하여 Google 계정을 사용하여 로그인합니다.

    firebase login

   이 명령을 실행하면 브라우저 창이 열리고 Google 계정에 로그인하고 Firebase CLI에 대한 액세스 권한을 부여하라는 메시지가 표시됩니다.
6. 웹 앱의 로컬 디렉터리에서 Firebase 호스팅 초기화 : 터미널이나 명령 프롬프트를 사용하여 웹 앱의 루트 디렉터리로 이동합니다. 다음 명령어를 실행하여 Firebase 호스팅을 초기화하세요.

    firebase init hosting

   메시지에 따라 프로젝트를 구성하고 필요에 가장 적합한 Firebase 호스팅 옵션을 선택하세요. 기본적으로 Firebase 호스팅은 정적 자산을 'public'이라는 폴더에 저장하지만 필요에 따라 이를 다른 폴더로 변경할 수 있습니다.

이제 웹 앱에 대한 Firebase 호스팅이 성공적으로 설정되었습니다. 다음으로, 정적 자산의 위치를 ​​지정하고, 다시 쓰기 규칙을 설정하고, 필요한 리디렉션을 구성하여 배포할 앱을 구성해야 합니다. 이 단계를 완료한 후 웹 앱을 Firebase 호스팅에 배포할 수 있습니다.

배포를 위한 웹 앱 구성

웹 앱을 Firebase 호스팅에 배포하기 전에 적절하게 구성해야 합니다. 이 프로세스는 일반 HTML, CSS 및 JavaScript 설정을 사용하는지 아니면 React, Angular 또는 Vue.js와 같은 최신 웹 프레임워크를 사용하는지에 따라 달라질 수 있습니다. 설정에 관계없이 배포 준비가 된 정적 자산을 생성하는 앱의 프로덕션 빌드를 생성해야 합니다.

일반 HTML, CSS 및 JavaScript 설정

HTML, CSS 및 JavaScript만 사용하여 구축된 간단한 웹 앱의 경우 일반적으로 구축 프로세스가 필요하지 않습니다. 그래도 적절한 디렉터리 구조로 파일을 구성하는 것이 중요합니다. 프로젝트 디렉터리에 public 폴더를 만들고 그 안에 HTML, CSS 및 JavaScript 파일을 배치하세요.

React, Angular 또는 Vue.js 웹 앱

React, Angular 또는 Vue.js와 같은 최신 웹 프레임워크를 사용하는 경우 웹 앱을 배포하기 전에 먼저 빌드해야 합니다. 대부분의 최신 웹 프레임워크에는 단일 명령으로 프로덕션에 바로 사용할 수 있는 정적 자산을 생성하기 위한 지원 기능이 내장되어 있습니다.

Try AppMaster no-code today!

Platform can build any web, mobile or backend application 10x faster and 3x cheaper

Start Free

• React 앱의 경우 npm run build 또는 yarn build 사용하세요.
• Angular 앱의 경우 ng build --prod 사용하세요.
• Vue.js 앱의 경우 npm run build 또는 yarn build 사용하세요.

이러한 명령은 프로덕션에 즉시 사용 가능한 정적 자산이 포함된 build , dist 또는 public 폴더를 생성합니다.

firebase.json 구성

다음으로 프로젝트에서 firebase.json 파일을 구성해야 합니다. 이 파일은 프로젝트 디렉터리에서 Firebase 호스팅을 초기화할 때 생성되며 Firebase 호스팅의 배포 설정을 지정합니다. 가장 필수적인 설정은 웹 앱의 정적 자산이 포함된 공용 디렉터리를 지정하는 것입니다. firebase.json 파일에서 public 필드를 정적 자산이 포함된 폴더로 설정합니다.

 { "hosting": { "public": "public", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] } }

React, Angular 또는 Vue.js와 같은 최신 웹 프레임워크를 사용하는 경우 public 필드를 해당 build 또는 dist 폴더로 설정해야 합니다.

Firebase 호스팅에 웹 앱 배포

배포할 웹 앱을 구성한 후 이제 Firebase CLI를 사용하여 Firebase 호스팅에 배포할 수 있습니다. 다음과 같이하세요:

1. 터미널에서 firebase.json 파일이 포함된 프로젝트 디렉터리로 이동합니다.
2. firebase deploy 명령어를 실행합니다. 이 명령은 웹 앱의 정적 자산을 Firebase 호스팅에 업로드합니다.
3. 배포가 완료되면 Firebase CLI는 이제 웹 앱이 활성화되어 액세스할 수 있는 URL을 제공합니다. URL의 형식은 https://{your-project-id}.web.app 및 https://{your-project-id}.firebaseapp.com .

그게 다야! 이제 귀하의 웹 앱이 Firebase 호스팅에 게시되었습니다. 사용자 정의 도메인을 설정한 경우 사용자 정의 도메인의 URL에서도 웹 앱에 액세스할 수 있습니다.

배포된 웹 앱 관리 및 업데이트

웹앱을 배포한 후 이를 관리하거나 업데이트해야 할 수도 있습니다. Firebase 호스팅을 사용하면 이러한 작업이 쉬워집니다.

웹 앱 업데이트

배포된 웹앱을 업데이트하려면 다음 단계를 따르세요.

1. 웹앱의 소스 코드를 필요에 따라 변경합니다.
2. 업데이트된 웹앱을 빌드하여 프로덕션에 바로 사용할 수 있는 정적 자산을 생성하세요.
3. 프로젝트 디렉터리에서 firebase deploy 명령어를 다시 실행하세요.

Firebase 호스팅은 새로운 변경사항으로 웹 앱을 자동으로 업데이트하여 사용자에게 원활한 전환을 제공합니다.

이전 버전으로 롤백

웹 앱을 이전 버전으로 롤백해야 하는 경우 Firebase 호스팅 버전 기록을 사용하면 됩니다. Firebase 콘솔은 각 배포를 추적하므로 필요할 때마다 특정 버전으로 롤백할 수 있습니다.

1. Firebase 콘솔로 이동하여 프로젝트의 호스팅 섹션으로 이동합니다.
2. 배포 기록을 보려면 "기록" 탭을 클릭하세요.
3. 롤백하려는 버전을 찾아 "..." 아이콘을 클릭하세요.
4. 드롭다운 메뉴에서 "이 버전으로 롤백"을 선택하고 롤백을 확인하세요.

이제 웹앱이 선택한 버전으로 롤백됩니다.

웹 앱 사용량 모니터링

Firebase 호스팅은 Firebase 콘솔에서 볼 수 있는 웹 앱의 사용 통계를 제공합니다. 이러한 통계는 앱의 성능, 인기, 리소스 소비를 이해하는 데 도움이 될 수 있습니다. 추적되는 일부 측정항목에는 총 요청, 캐시 적중, 캐시 누락, 사용된 스토리지 및 데이터 전송이 포함됩니다.

웹 앱을 이해하고 관리하면 원활한 사용자 경험을 제공하는 동시에 보안과 업데이트를 유지할 수 있습니다. Firebase 호스팅을 사용하면 웹 애플리케이션을 쉽고 효율적으로 배포, 관리, 모니터링할 수 있습니다.

웹 앱용 Firebase 호스팅 사용의 장점과 단점

Firebase 호스팅의 장점과 단점을 이해하는 것은 이를 웹 앱에 사용할지 여부를 현명한 결정을 내리는 데 중요합니다. 아래에서는 Firebase 호스팅이 귀하의 프로젝트에 적합한 선택인지 판단하는 데 도움이 되는 주요 장단점을 논의하겠습니다.

Firebase 호스팅의 장점

• 안전하고 빠르며 안정적인 호스팅: Google에서 제공하는 Firebase 호스팅은 웹 앱에 안전하고 빠르며 안정적인 호스팅 환경을 보장합니다. Google의 글로벌 콘텐츠 전송 네트워크(CDN)를 사용하면 앱의 지연 시간이 줄어들고 성능이 향상되는 이점을 누릴 수 있습니다.
• 간편한 설정 및 배포: Firebase CLI를 사용하면 웹 앱을 Firebase 호스팅에 빠르고 간단하게 설정하고 배포할 수 있습니다. 몇 가지 명령을 사용하면 웹 앱을 온라인에서 실행하고 실행할 수 있습니다.
• 맞춤 도메인 지원 및 자동 SSL 인증서: Firebase 호스팅을 사용하면 웹 앱에 맞춤 도메인을 사용하여 전문적인 모습을 유지할 수 있습니다. 또한 Firebase 호스팅은 SSL 인증 관리를 담당하여 웹 앱에 HTTPS 암호화를 자동으로 제공합니다.
• 다른 Firebase 서비스와의 통합: 웹 앱에 Firebase 호스팅을 사용하면 Firebase Functions, Firestore, 인증 등 다른 Firebase 서비스를 더 간단하게 통합할 수 있습니다. 이러한 통합은 백엔드 기능을 위해 서버리스 아키텍처를 사용하는 프런트엔드 프레임워크로 구축된 최신 웹 앱에 특히 유용합니다.

Try AppMaster no-code today!

Platform can build any web, mobile or backend application 10x faster and 3x cheaper

Start Free

Firebase 호스팅의 단점

• 제한된 서버 측 렌더링(SSR) 기능: Firebase 호스팅은 주로 정적 자산 호스팅에 중점을 두고 있습니다. 즉, 서버 측 렌더링(SSR) 기능에 대한 지원이 제한적입니다. 기본 SSR에 Firebase Functions를 사용할 수 있지만 광범위한 서버 측 렌더링 요구 사항이 있는 웹 앱에는 이상적인 솔루션이 아닐 수 있습니다.
• 잠재적인 호스팅 비용: Firebase 호스팅은 무료 기본 등급을 제공하지만 웹 앱의 저장소, 데이터 전송, 기타 리소스 요구 사항이 증가함에 따라 유료 요금제로 업그레이드해야 할 수도 있습니다. Firebase 호스팅을 결정하기 전에 관련 호스팅 비용을 신중하게 고려하세요.
• 모든 웹 앱에는 적합하지 않음: 서버 측 요구 사항이 복잡하거나 Firebase 서비스 제품군에서 지원하지 않는 기능이 필요한 웹 앱에는 Firebase 호스팅이 최선의 선택이 아닐 수 있습니다. 이러한 경우 대체 호스팅 솔루션이 프로젝트에 더 적합할 수 있습니다.

AppMaster: 웹 앱용 No-Code 개발

웹 애플리케이션 개발에서 AppMaster는 혁신적인 노코드 접근 방식을 통해 게임 체인저로 등장합니다. 이 강력한 도구를 사용하면 사용자는 광범위한 코딩 지식 없이도 백엔드, 웹 및 모바일 애플리케이션을 쉽게 만들 수 있습니다.

AppMaster 의 차별화된 기능 중 하나는 백엔드 애플리케이션 생성을 용이하게 하는 기능입니다. 사용자는 시각적으로 데이터 모델을 디자인하고, 시각적 BP Designer를 통해 복잡한 비즈니스 로직을 정의하고, REST API 및 WebSocket endpoints 설정할 수 있습니다. 이를 통해 백엔드 시스템의 신속한 생성이 가능해집니다.

웹 애플리케이션의 경우 AppMaster 사용하면 간단한 drag-and-drop 작업으로 사용자 인터페이스를 생성할 수 있습니다. Web BP Designer를 사용하면 사용자는 각 구성 요소에 대한 논리를 정의하여 웹 애플리케이션을 완전한 대화형으로 만들 수 있습니다. 특히 웹 비즈니스 프로세스는 사용자 브라우저 내에서 실행되어 사용자 경험을 향상시킵니다.

AppMaster 서버 endpoints 및 데이터베이스 스키마 마이그레이션 스크립트에 대한 Swagger(OpenAPI) 문서를 생성하여 프로젝트 관리를 더욱 향상시킵니다. 청사진이 변경될 때마다 AppMaster 30초 이내에 새로운 애플리케이션 세트를 신속하게 생성합니다. 이 독특한 접근 방식은 프로젝트와 관련된 누적된 기술 부채가 없도록 보장합니다.

민첩한 개발 프로세스 외에도 AppMaster 애플리케이션은 모든 PostgreSQL 호환 데이터베이스를 기본 데이터 저장소로 사용하여 원활하게 작동하도록 설계되었습니다. Go로 생성된 컴파일된 상태 비저장 백엔드 애플리케이션을 사용함으로써 AppMaster 애플리케이션은 본질적으로 확장 가능하며 기업 및 고부하 사용 사례의 요구 사항을 모두 충족합니다. AppMaster 의 no-code 기능으로 웹 애플리케이션 개발의 미래는 밝습니다.

마지막 생각들

Firebase 호스팅은 특히 최신 프런트엔드 프레임워크와 서버리스 아키텍처를 활용하는 프로젝트에 웹 앱 배포를 위한 매력적인 옵션을 제공합니다. 안전하고 빠르며 안정적인 호스팅, 간편한 설정 및 배포, 다른 Firebase 서비스와의 원활한 통합을 갖춘 Firebase 호스팅은 많은 웹 앱 프로젝트에 탁월한 선택이 될 수 있습니다.

하지만 Firebase 호스팅이 특정 사용 사례에 적합한지 판단하려면 이 문서에 설명된 장단점을 비교하는 것이 중요합니다. 웹 앱의 서버 측 렌더링 요구 사항, 잠재적인 호스팅 비용, 다른 Firebase 서비스와의 호환성 등의 요소를 고려하세요. 이러한 요소를 주의 깊게 평가하면 정보에 입각한 결정을 내리고 웹 애플리케이션에 가장 적합한 호스팅 솔루션을 선택할 수 있습니다.

백엔드, 웹 및 모바일 애플리케이션을 생성하기 위한 강력한 no-code 플랫폼 AppMaster 살펴보는 것을 잊지 마십시오. AppMaster 데이터 모델, 비즈니스 프로세스 및 사용자 인터페이스를 시각적으로 디자인하기 위한 도구를 제공하여 개발 시간을 더 빠르고 비용 효율적으로 만듭니다. 웹 애플리케이션 생성 기능을 Firebase 호스팅과 결합하여 웹 앱 배포를 위한 효율적이고 확장 가능한 솔루션을 만들 수도 있습니다.