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

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

Firebase Data Connect 시작하기

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

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

기본 요건

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

Linux, macOS 또는 Windows
Visual Studio Code

Firebase 프로젝트에 연결

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

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

참고: Cloud SQL 프로비저닝을 완료하는 데 최대 15분이 걸릴 수 있습니다. PostgreSQL 인스턴스. 데이터 연결 설정 흐름을 확인할 수 있습니다. Google Cloud 콘솔의 Google Cloud 콘솔.

개발 환경 선택 및 설정

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

Kotlin Android 또는 웹 개발자라면 VS 코드를 사용할 수 있습니다. 개발을 통해 Google Cloud에 연결하는 동안 스키마와 작업의 프로토타입을 PostgreSQL용 Cloud SQL 인스턴스에 연결할 수 있습니다
웹 개발자는 IDX 개발을 사용하여 프로토타입을 제작할 수 있습니다. PostgreSQL과 사전 구성된 IDX 템플릿을 사용하여 IDX 작업공간에서 Data Connect 에뮬레이터를 사용한 VS Code 확장 프로그램 및 빠른 시작 코드 설정할 수 있습니다 자세한 내용은 Project IDX 사이트.

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

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

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

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

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

로컬 프로젝트 설정

일반 안내에 따라 CLI를 설치합니다. npm이 있는 경우 이미 설치된 경우 다음 명령어를 실행합니다.

npm install -g firebase-tools

프로젝트 디렉터리 설정

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

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

Firebase 확장 프로그램 UI에서:

로그인되어 있는지 확인합니다.
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") 지시어를 통해 수행할 수 있습니다.

이메일

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

# 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 패널에서 배포.
스키마 변경사항을 검토하고 잠재적으로 파괴적인 항목을 승인해야 할 수 있습니다. 있습니다. 다음 작업을 수행하라는 메시지가 표시됩니다. <ph type="x-smartling-placeholder">
- firebase dataconnect:sql:diff를 사용하여 스키마 변경사항 검토
- 변경사항이 만족스러우면 다음을 사용하여 변경사항을 적용합니다. firebase dataconnect:sql:migrate

표에 데이터 추가

VS Code 편집기 패널에서 화면의 왼쪽 상단에 CodeLens 버튼이 /dataconnect/schema/schema.gql의 GraphQL 유형 GKE 클러스터를 데이터 추가 및 실행 (프로덕션) 버튼은 백엔드의 데이터베이스에 데이터를 추가합니다.

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

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

쿼리 정의

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

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

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

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

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

여기서 정말 흥미로운 기능은 데이터베이스의 관계를 분석하는 것입니다. Email에는from 사용자는 필드에 중첩하여 사용자에 대한 정보를 다시 얻을 수 있습니다.

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

개발 반복 작업을 수행했습니다. 이제 GCP 콘솔에서 스키마, 데이터, 쿼리를 Firebase 확장 프로그램 UI 또는 Firebase CLI에 연결할 수 있습니다. 스키마에서 했던 것처럼.

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:15 이미지, PostgreSQL 15.x와 벡터를 모두 지원합니다.
Linux: 이전 이미지와 함께 Docker를 사용하는 것이 좋지만 인기 배포에 관한 다른 안내를 따르세요.

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

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

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

로컬 PostgreSQL 인스턴스 사용

기존 로컬 PostgreSQL 인스턴스를 사용하려면 Data Connect 에뮬레이터 설정

firebase setup:emulators:dataconnect

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

연결 문자열에 대한 자세한 내용은 PostgreSQL 문서

로컬 PostgreSQL 인스턴스에 연결

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

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