체크포인트
Register your app
/ 30
Set up authentication
/ 35
Add a customer page to your web app
/ 35
Firebase로 서버리스 웹 앱 빌드하기
- GSP643
- 개요
- 목표
- 작업 1. Firebase 환경 프로비저닝
- 작업 2. Firebase CLI 설치
- 작업 3. Firestore 데이터베이스 설정
- 작업 4. Firebase 프로젝트 만들기
- 작업 5. 앱 등록
- 작업 6. Firebase에 인증 및 배포
- 작업 7. 인증 및 데이터베이스 설정
- 작업 8. 시나리오: 애플리케이션 설정
- 작업 9. Firestore 인증 구성 및 웹 앱에 로그인 기능 추가
- 작업 10. 애플리케이션 배포
- 작업 11. 웹 앱에 고객 페이지 추가
- 작업 12. 사용자의 방문 예약 허용
- 작업 13. Firestore 실시간 업데이트 보기
- 수고하셨습니다
GSP643
개요
릴리는 12년 전에 Pet Theory 동물병원 체인을 시작했습니다. 지난 몇 년 동안 Pet Theory 동물병원은 급격히 성장했습니다. 기존의 일정 예약 시스템은 증가된 로드를 처리하거나 고객이 직접 방문 일정을 예약할 수 없으므로 릴리는 IT 부서의 패트릭과 컨설턴트인 루비에게 쉽게 확장 가능한 클라우드 기반 시스템을 빌드해 달라고 요청합니다. 이 실습에서는 사용자가 실시간으로 정보를 기록하고 방문 일정을 예약할 수 있는 완전한 Firebase 웹 앱을 빌드해 봅니다.
아키텍처
이 다이어그램은 사용할 서비스에 대한 개요와 이러한 서비스가 서로 연결되는 방식을 보여줍니다.
목표
이 실습에서는 다음 작업을 수행하는 방법을 배웁니다.
- Google Cloud 프로젝트에 Firebase API를 사용 설정합니다.
- Firebase 프로젝트를 만들고 구성합니다.
- Firestore 보안을 구성하여 서버 측 인증 및 승인을 자동화합니다.
- 웹 앱에 Google 로그인 기능을 추가합니다.
- 사용자가 연락처 정보를 추가할 수 있도록 데이터베이스를 구성합니다.
- 사용자가 방문 일정을 예약할 수 있게 하는 코드를 살펴보고 배포합니다.
- Firebase의 실시간 업데이트를 웹 앱에서 살펴봅니다.
기본 요건
이 실습은 중급 수준이며 Cloud 콘솔 및 셸 환경에 익숙하다는 가정하에 진행됩니다. Firebase 사용 경험이 있으면 도움이 되지만 필수는 아닙니다. 이 실습을 시작하기 전에 다음 실습을 완료하는 것이 좋습니다.
파일 편집에도 익숙해야 합니다. 자주 사용하는 텍스트 편집기(nano
, vi
등) 또는 상단 리본에서 찾을 수 있는 Cloud Shell의 코드 편집기를 실행할 수 있습니다.
준비가 되면 아래로 스크롤하여 아래 단계에 따라 실습 환경을 설정하세요.
작업 1. Firebase 환경 프로비저닝
루비가 패트릭에게 이메일을 보냅니다.
루비, 소프트웨어 컨설턴트 |
패트릭님, 안녕하세요. 지난주에는 정말 수고 많으셨습니다. 병원 데이터가 Firestore로 마이그레이션되었다니 기쁘네요. 이제 Firebase를 사용하여 Pet Theory 웹사이트를 호스팅해야 할 것 같습니다. 루비 |
패트릭, IT 관리자 |
루비님, 안녕하세요. Firebase 호스팅에 대해서는 들어본 적이 없는데 어떤 이점이 있나요? 어떻게 시작하면 되죠? 패트릭 |
루비, 소프트웨어 컨설턴트 |
패트릭님, 안녕하세요. Firebase 호스팅은 서버리스여서 관리할 인프라가 없다는 주요 이점이 있습니다. 보안 규칙도 애플리케이션에 기본 제공되므로 고객 데이터를 처리할 때 발생하는 문제를 최소화하기 위해 권한을 제한할 수 있죠. '사용한 만큼만 지불'하는 모델인 Firebase는 Pet Theory의 사용 사례에 적합한 포괄적인 모바일 개발 플랫폼입니다. 루비 |
패트릭, IT 관리자 |
루비님, 안녕하세요. Firebase를 사용하면 제가 맡고 있는 업무의 큰 부분인 보안 및 인프라 관리가 훨씬 쉬워질 것 같네요. 유휴 상태인 서버에는 비용이 청구되지 않는다는 점도 흥미롭고요. 패트릭 |
루비는 패트릭에게 이메일로 몇 가지 배경 정보를 보내고 두 사람은 회의를 열어 주요 활동을 결정합니다. 이 회의에서는 패트릭이 진행해야 할 다음 작업을 결정합니다.
- Firestore CLI를 Google Cloud 프로젝트에 추가합니다.
- Firestore 데이터베이스를 만듭니다.
- Firebase 프로젝트를 구성합니다.
- 보안 정책을 수립합니다.
다음으로, 패트릭을 도와 이러한 작업을 완료하세요.
작업 2. Firebase CLI 설치
-
'실습 세부정보' 패널에서 IDE 링크를 복사하고 새 브라우저 탭에 붙여넣어 Cloud Code를 엽니다.
-
터미널을 열어 명령줄에 액세스합니다. 왼쪽 패널에서 애플리케이션 메뉴() > 터미널 > 새 터미널을 클릭합니다.
-
명령줄에서 GitHub 저장소를 클론합니다.
-
왼쪽 패널에서 탐색기 아이콘을 클릭한 다음 폴더 열기 > pet-theory > lab02를 클릭합니다. 확인을 클릭합니다.
-
이 폴더의 파일 작성자를 신뢰하나요?
라는 팝업이 표시되면 체크박스를 선택하고 예, 작성자를 신뢰합니다를 클릭합니다. -
애플리케이션 메뉴() > 터미널 > 새 터미널을 클릭하여 터미널을 다시 엽니다.
-
필요한 노드 패키지를 설치합니다.
출력:
이제 Firestore 데이터베이스를 만들 준비가 되었습니다.
작업 3. Firestore 데이터베이스 설정
터미널에서 Firestore 데이터베이스를 사용할 환경을 준비합니다.
- Firestore 데이터베이스를 만듭니다.
gcloud firestore databases create --location={{{project_0.default_region|REGION}}}
이제 Firestore 프로젝트를 만들어 Google Cloud 계정에 연결할 준비가 되었습니다.
작업 4. Firebase 프로젝트 만들기
시크릿 창에서 Firebase Console을 엽니다.
-
페이지 오른쪽 상단의 계정 아이콘을 클릭하여 이 실습에 프로비저닝된 Qwiklabs 수강생 계정인지 확인합니다.
-
그런 다음 프로젝트 추가를 클릭합니다. 프로젝트 이름에 관한 메시지가 표시되면 드롭다운 메뉴의 프로젝트 ID를 사용합니다.
-
Firebase 약관에 동의하고 계속을 클릭합니다. '사용한 만큼만 지불' 요금제를 확인합니다.
-
계속을 클릭하고 다음 페이지에서 Firebase 프로젝트의 Google 애널리틱스를 사용 중지합니다.
-
그런 다음 Firebase 추가를 클릭합니다. 새 프로젝트가 준비되었다는 메시지가 표시되면 계속을 클릭합니다.
완료된 작업 테스트하기
내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.
작업 5. 앱 등록
마지막 단계를 완료하면 Firebase Console로 이동하게 됩니다. 해당 페이지를 닫은 경우 다른 시크릿 탭을 열어서 Firebase Console 링크를 사용합니다.
- '앱에 Firebase를 추가하여 시작하기' 아이콘 목록에서 웹 아이콘(아래에 강조 표시됨)을 선택합니다.
-
'앱 닉네임'에 관한 메시지가 표시되면 Pet Theory를 입력합니다.
-
그런 다음 '이 앱의 Firebase 호스팅도 설정합니다' 옆의 체크박스를 선택합니다.
-
앱 등록 버튼을 클릭합니다.
-
다음 > 다음 > Console로 이동을 클릭합니다. 그러면 다음 페이지가 표시됩니다.
프로젝트에 대한 Firebase를 구성했습니다. 다음으로는 Firebase 호스트를 참조할 프로젝트를 초기화합니다.
완료된 작업 테스트하기
내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.
작업 6. Firebase에 인증 및 배포
IDE를 사용하여 Firebase에 연결하고 애플리케이션을 배포합니다. 편집기에서 사용 가능한 터미널에 명령을 입력합니다.
- Firebase에 인증합니다.
-
Firebase에서 오류 보고 정보를 수집할 수 있는지 묻는 메시지가 표시되면 Y를 입력하고 Enter 키를 누릅니다.
-
새 시크릿 모드 브라우저 탭에 생성된 URL을 복사하여 붙여넣고 Enter 키를 누릅니다(오류의 링크 결과 직접 클릭).
-
실습 계정을 선택한 다음 허용을 클릭합니다. 계속하려면 예, 방금 이 명령어를 실행했습니다를 클릭합니다. 그런 다음 예, 세션 ID입니다를 클릭하여 세션 ID를 확인합니다. 그러면 액세스 코드가 주어집니다.
-
액세스 코드를 복사하여 Cloud Shell 프롬프트 승인 코드 입력:에 붙여넣은 다음 Enter 키를 누릅니다. 다음과 유사한 응답이 출력됩니다.
출력:
- 이제 현재 작업 디렉터리에서 새 Firebase 프로젝트를 초기화합니다.
이 명령어를 실행하면 프로젝트 디렉터리와 Firebase 제품에 대한 단계별 설정 과정이 안내됩니다.
- 이 폴더에 설정하고 싶은 Firebase CLI 기능을 선택하라는 메시지가 표시됩니다. 화살표 키와 스페이스바를 사용하여 Firestore 및 호스팅을 선택합니다. 셸이 다음과 일치하는지 확인한 다음 Enter 키를 누릅니다.
- 그런 다음 나머지 단계에 따라 Firebase를 구성합니다.
- 아래쪽 화살표 키를 눌러 기존 프로젝트 사용으로 이동 후 Enter 키를 누릅니다.
- 목록에서 Qwiklabs 프로젝트 ID('qwiklabs-gcp-'로 시작되는 ID)를 선택한 다음 Enter 키를 누릅니다.
- Enter 키를 누른 다음 N을 눌러 firestore.rules 파일을 유지합니다.
- Enter 키를 누른 다음 Y를 눌러 firestore.indexes.json 파일을 유지합니다.
- 공개 디렉터리를 유지하기 위해 Enter 키를 누른 다음 /index.html 파일에 대한 다시 쓰기를 허용하지 않도록 N을 누릅니다.
- 'GitHub로 자동 빌드 및 배포를 설정하시겠습니까?'라는 메시지에서 Enter 키를 누른 다음 N을 누릅니다.
- 404.html 파일을 덮어쓸지에 관한 메시지가 나타나면 N을 입력합니다.
- index.html 파일을 덮어쓸지에 관한 메시지가 나타나면 N을 입력합니다.
다음과 같은 출력이 표시됩니다.
이제 로컬 구성이 완료되었습니다. 이제 서비스 간에 액세스를 제공하기 위해 데이터베이스 인증 단계가 요구됩니다.
작업 7. 인증 및 데이터베이스 설정
Firebase Console로 돌아가 이 단계를 완료합니다.
-
왼쪽 탐색 메뉴에서 프로젝트 개요 버튼을 클릭합니다.
-
인증 타일을 선택한 다음 시작하기를 클릭합니다.
-
로그인 방법을 클릭한 다음 Google 항목을 클릭합니다.
-
오른쪽 상단에서 사용 설정 전환 버튼을 클릭하고 프로젝트 지원 이메일의 드롭다운 목록에서 실습 계정을 선택합니다. 이제 다음과 유사한 페이지가 나타납니다.
- 위의 내용을 확인했으면 저장 버튼을 클릭합니다.
Firestore 인증을 설정했습니다. 다음 단계에서는 Firebase로 애플리케이션을 호스팅합니다.
완료된 작업 테스트하기
내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.
작업 8. 시나리오: 애플리케이션 설정
여러분은 패트릭을 도와 웹 개발자가 코드를 배포할 수 있는 Firebase 호스팅 환경을 설정했습니다. 하지만 패트릭은 Firebase 인증을 사용 설정하거나 Firebase에 코드를 배포해 본 적이 없어서 루비에게 도움을 요청하는 이메일을 보냅니다.
패트릭, IT 관리자 |
루비님, 안녕하세요. 알려주신 모든 팁에 감사드립니다. Firebase 환경 설정은 모두 완료된 것 같습니다. 다음으로 웹사이트 개발자의 코드를 배포해야 하는데요. 코드 배포에 필요한 게 무엇인지 그리고 이제 무엇을 해야 하는지 알려주실 수 있을까요? 패트릭 |
루비, 컨설턴트 |
패트릭님, 안녕하세요. 다행입니다. 애플리케이션을 실행하고 다음 기능을 추가하는 방법을 보내 드릴게요.
루비 |
패트릭, DevOps 엔지니어 |
루비님, 안녕하세요. 처리할 작업이 꽤 많겠네요. 새로운 기능을 추가할 때마다 구조적 변경이 필요할까요? 업데이트를 확인하는 데 걸리는 시간도 상당하겠네요. 패트릭 |
루비, 컨설턴트 |
패트릭님, 안녕하세요. 까다로운 작업은 대부분 Firebase 라이브러리로 처리할 수 있어요. 브라우저에서 업데이트를 확인하는 작업은 명령줄에서 변경과 배포를 진행한 후 웹사이트에서 변경사항을 확인하세요. 루비 |
패트릭, IT 관리자 |
루비님, 안녕하세요. 정말 안심이 되네요. Firebase 호스팅이 점점 좋아집니다. :-) 패트릭 |
패트릭이 필요한 작업을 잘 이해했으니 이제 패트릭을 도와 Pet Theory를 Firebase 애플리케이션으로 배포하세요.
작업 9. Firestore 인증 구성 및 웹 앱에 로그인 기능 추가
이 단계를 수행하려면 터미널로 돌아가야 합니다. 이전 Firebase 초기화에서 사용한 명령줄 세션이 아직 열려 있을 것입니다.
- 다음 명령어를 실행하여
lab02
디렉터리의 폴더와 파일을 나열합니다.
- 출력이 다음과 비슷한지 확인합니다.
- 코드 편집기를 사용하여
pet-theory/lab02/firestore.rules
를 엽니다.
작업 10. 애플리케이션 배포
모든 변경사항이 적용되면 애플리케이션을 배포할 수 있습니다. 아직 pet-theory/lab02 폴더에 있어야 합니다.
- 다음 명령어를 실행하여 Firebase 애플리케이션을 배포합니다.
출력:
- 다음 호스팅 URL(
[PROJECT-ID].web.app
과 유사해야 함)을 복사하여 새 탭에서 엽니다. - Google 계정으로 로그인 버튼을 클릭합니다.
- Google 계정을 선택합니다. 다음 페이지가 열립니다.
사용자가 Google 인증을 사용하여 예약 앱에 액세스할 수 있도록 코드를 배포했습니다.
작업 11. 웹 앱에 고객 페이지 추가
터미널로 돌아가서 편집기를 사용하여 public 폴더에서 파일을 봅니다.
-
customer.js
파일을 열고 다음 코드를 복사하여 붙여넣습니다.
-
styles.css
파일을 열고 다음 코드를 붙여넣습니다.
- 명령줄에서 다음 명령어를 실행합니다.
출력:
- 애플리케이션 탭에서 CMND+Shift+R(Mac) 또는 Ctrl+Shift+R(Windows) 키를 눌러 페이지를 강제로 새로고침합니다. 단순한 새로고침으로는 필요한 업데이트가 표시되지 않습니다. 고객 정보를 입력합니다. 가상의 이름과 전화번호를 입력한 다음 프로필 저장을 클릭합니다.
- Firebase Console로 돌아간 다음 빌드 > Firestore 데이터베이스를 클릭하여 저장된 프로필 정보를 봅니다.
- 웹 앱 페이지로 돌아가서 예약 링크를 클릭합니다. 아직 예약 코드를 배포하지 않았으므로 빈 페이지가 표시됩니다.
완료된 작업 테스트하기
내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.
작업 12. 사용자의 방문 예약 허용
사용자가 방문 일정을 예약할 수 있는 페이지를 빌드합니다.
-
'코드 편집기' 탭으로 돌아갑니다.
public
디렉터리의 파일 2개에 코드를 추가합니다. -
사이드 메뉴에서 appointments.html을 선택하고 다음 코드를 붙여넣습니다.
- 이제 appointments.js 파일을 열고 다음 코드를 붙여넣습니다.
- 파일이 빌드되었으니 변경사항을 확인합니다. Cloud Shell에서 다음 명령어를 실행하여 애플리케이션을 배포합니다.
출력:
- 이전에 빈 페이지가 표시되었던 웹 앱 탭을 새로고침합니다. 이제 방문 일정을 두어 개 예약해 봅니다.
-
이제 Firebase Console로 이동하여 빌드 > Firestore 데이터베이스를 클릭하고 사용자 아래에서 방금 생성한
appointments
모음을 선택합니다. -
다음과 유사한 예약 코드 모음이 표시됩니다.
작업 13. Firestore 실시간 업데이트 보기
Firestore는 실시간 데이터베이스입니다. 이를 활용할 수 있도록 애플리케이션에 실시간 업데이트를 추가합니다.
-
새 브라우저 탭을 열어 [프로젝트 ID].web.app을 마우스로 가리킨 다음 Google 버튼을 사용하여 로그인하고 예약을 클릭합니다.
-
두 브라우저 탭을 나란히 배치합니다. 첫 번째 브라우저 창에서 새 방문 일정을 예약합니다.
-
다른 브라우저 탭에서 새로고침하지 않아도 예약이 자동으로 추가된 것을 볼 수 있습니다.
정말 유용한 기능입니다. Firestore는 사용자가 새로고침하거나 다시 로드할 필요 없이 클라이언트(웹 앱 및 기본 모바일 앱)를 실시간으로 업데이트합니다.
- Firebase Console로 이동한 다음 Cloud Firestore에서 데이터 탭을 클릭하고 데이터를 편집합니다. 심지어 사용자 레코드에 있는
appointments
모음을 삭제할 수도 있습니다. 두 브라우저 창 모두 실시간으로 계속 업데이트됩니다.
수고하셨습니다
이번 실습에서는 Firebase를 사용하여 강력한 서버리스 웹 애플리케이션을 만들어 보았습니다. Firebase 프로젝트를 만들고 구성한 후 Firestore 보안을 추가하여 서버 측 인증 및 승인을 자동화했습니다. 그런 다음 웹 앱에 Google 로그인 기능을 추가하고 사용자가 연락처 정보와 예약을 추가할 수 있도록 데이터베이스를 구성했습니다. 마지막으로, 사용자가 방문 일정을 예약할 수 있게 하는 코드를 살펴본 후 배포했으며, 웹 앱에서 Firebase의 실시간 업데이트를 확인했습니다. 수강생 여러분은 이제 이 학습 경로에서 추가적인 실습을 진행할 준비가 되었습니다.
다음 단계/더 학습하기
- Google Cloud - 서버리스란?
Google Cloud 교육 및 자격증
Google Cloud 기술을 최대한 활용하는 데 도움이 됩니다. Google 강의에는 빠른 습득과 지속적인 학습을 지원하는 기술적인 지식과 권장사항이 포함되어 있습니다. 기초에서 고급까지 수준별 학습을 제공하며 바쁜 일정에 알맞은 주문형, 실시간, 가상 옵션이 포함되어 있습니다. 인증은 Google Cloud 기술에 대한 역량과 전문성을 검증하고 입증하는 데 도움이 됩니다.
설명서 최종 업데이트: 2024년 6월 24일
실습 최종 테스트: 2024년 6월 24일
Copyright 2024 Google LLC All rights reserved. Google 및 Google 로고는 Google LLC의 상표입니다. 기타 모든 회사명 및 제품명은 해당 업체의 상표일 수 있습니다.