플러터에서 Firebase Hosting 개발을 위한 에뮬레이터 설치 및 사용 방법 가이드

 

Firebase Hosting은 웹 애플리케이션을 손쉽게 배포할 수 있는 강력한 호스팅 플랫폼입니다.

하지만 실제 Firebase Hosting에 배포하고 테스트하는 것은 비용이 들 수 있고, 배포 전 모든 기능을 로컬 환경에서 테스트하기 어려울 수 있습니다.

Firebase Hosting 에뮬레이터를 사용하면 로컬에서 안전하게 개발과 테스트를 진행할 수 있습니다.

이번 포스팅에서는 플러터에서 Firebase Hosting 에뮬레이터를 설치하고 사용하는 방법을 단계별로 설명하겠습니다.

1. Firebase Hosting 에뮬레이터란?

Firebase Hosting 에뮬레이터는 Firebase Hosting의 로컬 버전으로, 실제 Firebase 서버에 배포하지 않고도 로컬 환경에서 웹 애플리케이션을 호스팅하고 테스트할 수 있게 해줍니다. 이를 통해 배포 전 웹 애플리케이션의 동작을 로컬에서 안전하게 검증할 수 있습니다.

2. Firebase Hosting 에뮬레이터 설치하기

에뮬레이터를 설치하고 설정하는 과정은 다음과 같습니다.

1) Node.js 및 Firebase CLI 설치

Firebase Hosting 에뮬레이터를 사용하기 위해 Node.js와 Firebase CLI가 필요합니다. Node.js가 설치되어 있지 않다면 Node.js 공식 웹사이트에서 다운로드하여 설치하세요.

그 다음, Firebase CLI를 설치합니다. 터미널에서 다음 명령어를 입력합니다.

npm install -g firebase-tools

2) Firebase 프로젝트 초기화

Firebase 프로젝트 디렉터리로 이동한 후, Firebase CLI를 사용해 프로젝트를 초기화합니다. 터미널에서 다음 명령어를 실행합니다.

firebase init

여기서, Hosting 항목을 선택하고, Emulators 항목을 선택하여 Hosting 에뮬레이터를 설정합니다.

3) Firebase Hosting 에뮬레이터 설정

Firebase 프로젝트 설정 파일(firebase.json)에서 Hosting 에뮬레이터를 설정합니다. 파일에 다음과 같이 추가합니다.

{
  "emulators": {
    "hosting": {
      "port": 5000
    }
  }
}

여기서 5000은 Hosting 에뮬레이터의 기본 포트 번호입니다. 필요에 따라 다른 포트 번호를 사용할 수도 있습니다.

3. Firebase Hosting 에뮬레이터 시작하기

Firebase Hosting 에뮬레이터를 실행하려면, 터미널에서 다음 명령어를 입력합니다.

firebase emulators:start

이 명령어를 실행하면 Firebase Hosting 에뮬레이터가 로컬 환경에서 시작됩니다. 에뮬레이터가 실행되면 설정한 포트 번호를 통해 로컬 웹 서버에 접근할 수 있습니다.

4. 플러터에서 Firebase Hosting 에뮬레이터 사용하기

플러터 애플리케이션을 Firebase Hosting 에뮬레이터에서 테스트하려면, 빌드한 웹 애플리케이션을 에뮬레이터에 배포하고 확인하는 과정이 필요합니다.

1) 플러터 웹 애플리케이션 빌드

먼저, 플러터 웹 애플리케이션을 빌드합니다. 플러터 프로젝트 루트 디렉터리에서 다음 명령어를 실행하여 웹 애플리케이션을 빌드합니다.

flutter build web

이 명령어를 실행하면 build/web 디렉터리에 웹 애플리케이션의 빌드 결과물이 생성됩니다.

2) Firebase Hosting에 웹 애플리케이션 배포

빌드된 웹 애플리케이션을 Firebase Hosting 에뮬레이터에 배포하려면, Firebase Hosting 설정 파일(firebase.json)에서 public 디렉터리를 build/web으로 설정합니다.

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

이 설정을 통해 Firebase Hosting은 build/web 디렉터리의 파일을 호스팅하게 됩니다.

3) 로컬 환경에서 애플리케이션 확인하기

에뮬레이터가 실행되고 나면, 웹 브라우저에서 http://localhost:5000에 접속하여 로컬 환경에서 애플리케이션을 확인할 수 있습니다.

5. Firebase Hosting 기능 테스트하기

이제 Firebase Hosting 에뮬레이터를 통해 웹 애플리케이션의 다양한 기능을 테스트할 수 있습니다. 페이지 로딩 속도, 자산 파일의 접근, 라우팅 등 모든 기능을 로컬 환경에서 검증할 수 있습니다.

 

 

Firebase Hosting 에뮬레이터를 사용하면 플러터 개발자들은 로컬 환경에서 안전하고 효율적으로 웹 애플리케이션을 호스팅하고 테스트할 수 있습니다. 에뮬레이터의 설치와 설정 방법을 통해 실제 Firebase 서비스에 영향을 미치지 않으면서도 효과적인 개발과 디버깅이 가능합니다. 이번 가이드가 여러분의 개발에 도움이 되기를 바랍니다!

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱