Google I/O 2022에서 Firebase의 새로운 기능을 확인하세요. 자세히 알아보기

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Firebase Data Connect 시작하기

이 빠른 시작에서는 다음과 같은 방법을 학습합니다.

Firebase 프로젝트에 Firebase Data Connect를 추가합니다.
프로덕션 인스턴스에서 작동하도록 Visual Studio Code 확장 프로그램을 포함한 개발 환경을 설정합니다.
그리고 다음 작업을 수행하는 방법을 보여드리겠습니다. <ph type="x-smartling-placeholder">
- 이메일 앱에 대한 스키마를 만들고 프로덕션에 배포합니다.
- 스키마의 쿼리 및 변형을 정의합니다.
- 최종 스키마, 쿼리, 데이터를 프로덕션에 배포합니다.

기본 요건

이 빠른 시작을 사용하려면 다음이 필요합니다.

Linux, macOS 또는 Windows
Visual Studio Code

Firebase 프로젝트에 연결

아직 Firebase 프로젝트가 없는 경우 프로젝트를 만드세요.
1. Firebase 콘솔에서 프로젝트 추가를 클릭한 다음 화면에 표시된 안내를 따릅니다.
프로젝트를 Blaze 요금제로 업그레이드합니다. 이렇게 하면 SQL을 사용하여 사용할 수 있습니다

참고: Blaze 업그레이드에서 결제를 설정하더라도 Data Connect 또는 PostgreSQL용 기본 Cloud SQL 구성 미리 볼 수 있습니다.
Firebase 콘솔의 Data Connect 섹션으로 이동합니다. 제품 설정 워크플로를 따릅니다
PostgreSQL용 CloudSQL 데이터베이스의 위치를 선택하세요.
나중에 확인할 수 있도록 프로젝트, 서비스, 데이터베이스 이름과 ID를 기록해 둡니다.
나머지 설정 단계를 수행한 후 완료를 클릭합니다.

참고: PostgreSQL용 Cloud SQL 인스턴스 프로비저닝을 완료하는 데 최대 15분이 걸릴 수 있습니다. Google Cloud 콘솔을 사용하여 데이터베이스 프로비저닝을 비롯한 Data Connect 설정 흐름이 완료되었는지 확인할 수 있습니다.

개발 환경 선택 및 설정

Data Connect는 프로토타입 제작을 위한 두 가지 개발 환경을 지원합니다.

Kotlin Android, iOS 또는 웹 개발자인 경우 VS Code 개발을 사용하여 PostgreSQL용 Cloud SQL 인스턴스에 연결하는 동안 로컬에서 스키마와 작업을 설계하고 테스트할 수 있습니다.
웹 개발자인 경우 IDX 개발을 사용하여 PostgreSQL과 사전 구성된 IDX 템플릿을 사용하여 IDX 작업공간에서 Data Connect 에뮬레이터와 빠른 시작 코드가 포함된 VS Code 확장 프로그램 설정할 수 있습니다 자세한 내용은 Project IDX 사이트를 참고하세요.

이 빠른 시작에서는 VS Code 확장 프로그램 개발 흐름에 중점을 둡니다. 계속하려면 다음 안내를 따르세요.

로컬 프로젝트의 새 디렉터리를 만듭니다.
새 디렉터리에서 VS Code를 엽니다.
Firebase 저장소에서 VSIX 패키지로 번들된 확장 프로그램을 다운로드합니다.

참고: VSIX 패키지를 더블클릭하여 확장 프로그램을 설치할 수 없습니다. 다음 몇 단계에 따라 올바르게 설치하세요.
VS Code의 View 메뉴에서 Extensions를 선택합니다.
Extensions 패널 제목 표시줄에서 메뉴 아이콘 more_horiz를 클릭한 다음 VSIX에서 설치...를 따릅니다.

참고: 확장 프로그램에는 Marketplace GraphQL 구문 강조 표시가 포함되어 있습니다. 확장자가 포함됩니다. 설치하는 다른 GraphQL 확장 프로그램과 충돌할 수 있습니다. GraphQL 지원은 VSIX 파일에 번들로 포함되어 있습니다.

필요한 경우 로컬 개발을 위해 로컬 PostgreSQL 데이터베이스를 설치할 수 있습니다. Data Connect 에뮬레이터에서 실행됩니다. 이 설정은 이 빠른 시작 가이드를 참조하세요.

로컬 프로젝트 설정

일반 안내에 따라 CLI를 설치합니다. npm이 이미 설치되어 있으면 다음 명령어를 실행합니다.

npm install -g firebase-tools

프로젝트 디렉터리 설정

로컬 프로젝트를 설정하려면 프로젝트 디렉터리를 초기화합니다.

VS Code 왼쪽 패널에서 Firebase 아이콘을 클릭하여 Firebase VS Code 확장 프로그램 UI를 엽니다.

Firebase 확장 프로그램 UI에서:

로그인되어 있는지 확인합니다.
Run firebase init 버튼을 클릭합니다.
VS Code 하단 패널의 Terminal 탭에서 프롬프트를 확인합니다.
이 디렉터리에서 사용할 기능으로 데이터 연결을 선택하세요.
메시지가 표시되면 Data Connect 프로젝트를 만듭니다.

스키마 만들기

Firebase 프로젝트 디렉터리의 /dataconnect/schema/schema.gql 파일에서 사용자와 이메일이 포함된 GraphQL 스키마를 정의합니다.

사용자

Data Connect에서 GraphQL 필드는 열에 매핑됩니다. 사용자에게 uid, name, 이메일 address이 있습니다. Data Connect는 여러 기본 데이터 유형(String 및 Date)을 인식합니다.

다음 스니펫을 복사하거나 파일에서 해당하는 줄의 주석 처리를 삭제합니다.

# File `/dataconnect/schema/schema.gql`

type User @table(key: "uid") {
   uid: String!
   name: String!
   address: String!
}

기본적으로 Firebase Data Connect는 UUID id 키가 제공되지 않으면 이 키를 추가합니다. 그러나 이 경우에는 uid를 기본 키로 지정하려고 합니다. @table(key: "uid") 지시어를 통해 수행할 수 있습니다.

이메일

이제 사용자가 있으므로 이메일을 모델링할 수 있습니다. 여기에서 이메일 데이터의 일반적인 필드(또는 열)를 추가할 수 있습니다. 이번에는 기본 키 추가를 생략합니다. Data Connect를 통해 관리할 수 있기 때문입니다.

# File `/dataconnect/schema/schema.gql`

type Email @table {
   subject: String!
   sent: Date!
   text: String!
   from: User!
}

from 필드는 User 유형에 매핑됩니다. Data Connect는 Email와 User 간의 관계임을 인식하고 이 관계를 대신 관리합니다.

프로덕션에 스키마 배포

Firebase VS Code 확장 프로그램을 사용하여 프로덕션 데이터베이스를 사용하는 경우 계속하기 전에 스키마를 배포해야 합니다. 후(After) 프로덕션 데이터베이스에 스키마를 배포하면 확인할 수 있습니다

Firebase VS Code 확장 프로그램을 사용하여 배포할 수 있습니다.
- 확장 프로그램 UI의 Firebase Data Connect 패널에서 배포.
스키마 변경사항을 검토하고 잠재적으로 파괴적인 수정사항을 승인해야 할 수도 있습니다. 다음과 같은 메시지가 표시됩니다.
- firebase dataconnect:sql:diff를 사용하여 스키마 변경사항 검토
- 변경사항이 만족스러우면 다음을 사용하여 변경사항을 적용합니다. firebase dataconnect:sql:migrate

표에 데이터 추가

VS Code 편집기 패널에서 화면의 왼쪽 상단에 CodeLens 버튼이 /dataconnect/schema/schema.gql의 GraphQL 유형 스키마를 프로덕션에 배포했으므로 데이터 추가 및 실행(프로덕션) 버튼을 사용하여 백엔드의 데이터베이스에 데이터를 추가할 수 있습니다.

User 및 Email 테이블에 레코드를 추가하려면 다음 안내를 따르세요.

schema.gql에서 User 유형 위에 있는 데이터 추가 버튼을 클릭합니다. 선언
생성된 User_insert.gql 파일에서 필드 3개가 있습니다.
실행 (프로덕션) 버튼을 클릭합니다.
이전 단계를 반복하여 Email 테이블에 레코드를 추가합니다. 사용자를 uid fromUid 필드에 입력합니다. Email_insert 변형을 생성합니다.

쿼리 정의

이제 재미있는 부분은 쿼리입니다. 개발자라면 SQL을 작성하는 데 익숙해져 있고 왜냐하면 처음에는 약간 다르게 느껴질 수 있습니다. 그러나 GraphQL은 원시 SQL보다 훨씬 간결하고 유형 안전합니다. VS Code 확장 프로그램을 사용하면 개발 환경이 간소화됩니다.

/dataconnect/connector/queries.gql 파일 수정을 시작합니다. 원하는 경우 모든 이메일을 가져오려면 다음과 같은 쿼리를 사용합니다.

# File `/dataconnect/connector/queries.gql`

query ListEmails @auth(level: NO_ACCESS) {
  emails {
    id, subject, text, sent
    from {
      name
    }
  }
}

근처의 CodeLens 버튼을 사용하여 쿼리를 실행합니다.

여기서 정말 흥미로운 기능은 데이터베이스의 관계를 그래프처럼 취급할 수 있다는 점입니다. Email에는from 사용자는 필드에 중첩하여 사용자에 대한 정보를 다시 얻을 수 있습니다.

스키마 및 쿼리를 프로덕션에 배포

개발 반복 작업을 수행했습니다. 이제 GCP 콘솔에서 스키마, 데이터, 쿼리를 Firebase 확장 프로그램 UI 또는 Firebase CLI(스키마에서 한 것처럼) (#deploy-schema)

Firebase VS Code 확장 프로그램을 사용하여 배포하는 경우 배포 버튼을 클릭합니다.

배포가 완료되면 콘솔에서도 작업을 보고 실행할 수 있습니다. Data Connect 서비스에서 작업을 처리할 준비가 됩니다. 않습니다 PostgreSQL용 Cloud SQL 인스턴스가 완전히 배포되어 생성된 스키마 및 데이터를 볼 수 있습니다

(선택사항) PostgreSQL 로컬 설치

PostgreSQL을 로컬에 설치하고 에뮬레이터와 통합하면 프로토타입을 제작하고 있습니다.

PostgreSQL의 새 인스턴스를 설치하거나 기존 인스턴스를 사용할 수 있습니다.

PostgreSQL 설치

플랫폼에 맞는 안내에 따라 PostgreSQL 버전 15.x를 설치합니다.

macOS Postgres.app을 다운로드 및 설치합니다.
Windows: PostgreSQL 다운로드 페이지에서 EDB 설치 프로그램을 사용합니다.
Docker: Dockerfile을 가져와서 pgvector/pgvector:pg15 이미지, PostgreSQL 15.x와 벡터를 모두 지원합니다.
Linux: 이전 이미지와 함께 Docker를 사용하는 것이 좋지만 인기 배포에 관한 다른 안내를 따르세요.

호스트 이름, 포트, 사용자 이름 및 비밀번호와 관련 매개변수 출력을 기록해 두세요. 설치 시퀀스입니다.

PostgreSQL 인스턴스에 연결하려면 에뮬레이터에 다음이 필요합니다.

이러한 설정 구성 매개변수
dataconnect.yaml의 데이터베이스 이름 및 이에 상응하는 이름의 로컬 인스턴스에서 초기화됩니다.

로컬 PostgreSQL 인스턴스 사용

Data Connect 에뮬레이터 설정을 업데이트하여 기존 로컬 PostgreSQL 인스턴스를 사용할 수 있습니다.

firebase setup:emulators:dataconnect

메시지가 표시되면 PostgreSQL 연결 문자열을 postgresql://postgresusername:postgrespassword@localhost:5432/postgresdatabase?sslmode=disable 형식으로 입력합니다.

연결 문자열에 관한 자세한 내용은 PostgreSQL 문서를 참고하세요.

로컬 PostgreSQL 인스턴스에 연결

이 구성을 완료한 후 로컬 데이터베이스에 연결하려면 다음 단계를 따르세요.

VS Code의 왼쪽 패널에서 Firebase 아이콘을 클릭하여 Firebase VS Code 확장 프로그램 UI를 엽니다.
로컬 PostgreSQL에 연결 버튼을 클릭합니다.