= Node.js 및 Cloud Firestore DB를 사용하여 Google Firebase에서 동적 웹사이트 호스팅 =

투샤르 카푸어: (httpswww.tusharck.com/)
데모 Git URL: httpsgithub.com/tusharck/firebase-demo
= 왜 Firebase 호스팅인가? =
Firebase는 GoogleâÃÂÃâ의 인프라를 기반으로 구축된 포괄적인 앱 플랫폼이므로 안전하고 빠르며 무료(추가 ​​리소스에 대한 유료 옵션도 사용 가능) 및 쉽게 콘텐츠를 호스트할 수 있는 방법을 제공합니다. 웹 또는 모바일 애플리케이션

== 프리 티어의 주요 기능 및 이점: ==
- 커스텀 도메인을 무료로 제공합니다.&
SSL(SSL은 https연결을 위한 표준 보안 계층을 제공합니다.

- Cloud Firestore: 클라이언트 앱에서 실시간 데이터 동기화를 위한 유연하고 확장 가능한 데이터베이스

- 기타 기능: Cloud Functions, Cloud Messaging(FCM), Crashlytics, Dynamic Links, Hosting, ML Kit, Storage, Performance Monitoring, Predictions 및 Test Lab(이러한 제품의 기능 및 리소스는 유료 요금제를 구매하여 늘릴 수 있지만 무료 등급 서비스는 매우 좋습니다. 요금제를 보려면 Firebase 가격을 확인하세요.)

- 자원의 자동 스케일링

= Firebase에서 동적 웹사이트를 호스팅하는 단계 =
== 요구사항 ==
**1. Google 계정**Google 계정이 없다면 가입해야 합니다. httpsaccounts.google.com/SignUp으로 이동하면 됩니다. **2. Node.js 및 npm** Mac/Windowshttpsnodejs.org/en/download/에서 설치 프로그램을 다운로드할 수 있습니다. 리눅스
Node.js를 설치하려면 아래 단계를 따르세요.
1. 터미널 열기
2. 다음 명령을 실행합니다.
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs **사용했습니다 참고: ** **
setup_13.x튜토리얼 당시 최신 버전이
**13**httpsnodejs.org/en/로 이동하여 최신 릴리스를 확인할 수 있습니다.

Node.js 및 npm이 성공적으로 설치되었는지 확인하려면 다음 명령을 실행하면 설치된 버전이 출력됩니다.
노드 -v
npm -v
**삼. Firebase-CLI(명령줄 인터페이스Firebase 프로젝트를 관리, 보기 및 배포하기 위한 도구입니다.

npm 설치 -g firebase-tools
= 1단계: Firebase 프로젝트 만들기 =
- httpsfirebase.google.com으로 이동하여
오른쪽 상단에서 로그인

- 클릭
오른쪽 상단에서 콘솔로 이동

- 그런 다음 클릭
아래와 같이 프로젝트 생성

4. 다음은 프로젝트 이름을 입력하고 계속을 누르는 것입니다.

5. 계속을 눌러 Firebase 프로젝트에 Google Analytics를 활성화합니다(원하지 않는 경우 비활성화를 선택하십시오).
6. Google Analytics에 가장 가까운 위치를 선택하십시오.

7. 클릭
**프로젝트를 생성하고 로드될 때까지 기다립니다. 그러면 아래와 같은 것이 보일 것입니다.
= 2단계: Firebase 로그인 초기화 =
- 명령줄/터미널을 연 다음 새 디렉터리를 만들고 이동합니다.

mkdir my-firebase-projectcd 내-firebase-프로젝트
2. Firebase에서 웹사이트를 호스팅하려면 다음 명령을 사용하여 Firebase에 로그인합니다. 명령을 실행하면 Google 자격 증명을 사용하여 firebase에 로그인하라는 브라우저 창이 열립니다. 여기에 자격 증명을 입력하면 Firebase가 시스템에 로그인합니다.

Firebase 로그인

= 3단계: 시스템에 Firebase 프로젝트 초기화 =
- 이제 Firebase 콘솔에서 생성한 프로젝트를 시스템에 초기화해야 합니다. 아래 명령을 실행하려면

파이어베이스 초기화
2. 아래로 키를 누른 다음 선택
**두 가지 **스페이스 바 키를 눌러 **
- 기능
- 호스팅
그 다음에
**계속하려면 Enter 키를 누르세요**

3. 그런 다음 선택
그런 다음 Enter 키를 누릅니다

**기존 프로젝트 사용**
4. 엔터를 누릅니다.
**my-firebase-project** **또는 사용한 프로젝트 이름 또는 사용한 프로젝트 이름

5. 선택
**자바스크립트**를 입력하고 Enter 키를 누릅니다.

6. 당신은 말할 수 있습니다
**아니오** ESLint를 사용하여 가능한 버그를 포착하고 스타일을 적용하시겠습니까?
7. 유형
**예** npm으로 종속성을 설치하는 경우

8. 여기서 우리는 두 가지 작업을 수행해야 합니다.
- 웹사이트와 자산이 상주할 디렉토리를 선택해야 합니다. 기본적으로
pubic계속하려면 Enter 키를 누르거나 원하는 디렉터리 이름으로 변경할 수 있습니다.

- 종류
동적 URL이 적절한 대상으로 리디렉션될 수 있도록 단일 앱 페이지의 경우 예

9. 다음 명령을 실행하여 로컬 시스템에서 firebase 앱을 테스트합니다. 그런 다음
**httplocalhost:5000** 실행 중인 기본 웹사이트 보기

firebase serve --호스팅만, 기능
다음을 열면 아래와 같은 것을 볼 수 있습니다.
**httplocalhost:5000** URL

10. 터미널에서 서버를 닫습니다.

= 4단계: 동적 웹사이트용 패키지 설치 및 뷰 디렉토리 생성 =
- 여기에서 함수 디렉토리 내부로 전환하여 사용합니다.

CD 기능
**2. 익스프레스 설치**최소하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다.

npm i 익스프레스 --save
**삼. 핸들 바 설치**웹 사이트의 동적 프런트 엔드에 사용되는 Node.js용 템플릿 엔진입니다.

npm i 핸들바 --저장
**4. 통합 설치**
npm i 통합 --save
5. 이름이 지정된 폴더를 만듭니다.
모든 프런트엔드 코드를 저장할 **functions** 폴더 내의 **views**

mkdir
견해
6. 다음 명령을 실행하여 기본 디렉터리로 다시 전환합니다.
CD .

= 5단계: Firestore 설정(클라우드 데이터베이스) =

== 데이터베이스 구성 ==
- httpsconsole.firebase.google.com/으로 이동합니다.

- 프로젝트 선택

- 고르다
왼쪽 창에서 데이터베이스
4. 클릭
**데이터베이스 생성**
5. 그렇지 않으면 시스템에서 데이터베이스에 액세스할 수 없으므로 테스트 모드에서 시작을 선택합니다. 웹사이트 개발이 완료되면 이 설정을 변경하겠습니다.

그런 다음 클릭
**다음** 그렇게 한 후

6. Firestore DB의 위치를 ​​선택합니다.

**이 위치를 설정한 후에는 나중에 변경할 수 없습니다. 메모: **
== CreateData ==
- 수집 시작을 클릭합니다.

2. 입력
**지금은 샘플링할 수 있는 컬렉션 ID

3. 샘플 데이터를 입력합니다. 입력하다
**sample_doc **는 **문서 ID입니다. **필드 안에 **제목**을 입력합니다. 저는 **값 안에 있는 Cloud**를 좋아합니다. 그런 다음 **저장**을 클릭합니다.

= 6단계: 웹사이트의 동적 콘텐츠 구축 =
이 부분을 두 부분으로 나눌 것입니다. 첫 번째 부분에서는 Firestore에서 데이터를 가져와서 웹 사이트에서 사용하는 방법을 살펴보겠습니다. 두 번째 부분에서는 양식 데이터를 제출하는 방법을 살펴보겠습니다.

**먼저 Firestore에 액세스하기 위한 자격 증명을 다운로드합니다**
2. 클릭
**설정** 왼쪽 창에서 **프로젝트 설정**으로 이동

3. 로 이동
**서비스 계정**으로 이동하고 **새 개인 키 생성을 클릭합니다.
4. 클릭
**Generate Key 키를 다운로드하라는 팝업이 뜹니다. 웹사이트의 **functions** 폴더에 키를 저장합니다.

== Firestore에서 가져오기 ==
- 열려 있는
functionsfolder 내부의 index.js

2. 애플리케이션에서 사용하려는 일부 라이브러리를 정의해야 합니다. 이전에 설치한 것과 동일한 라이브러리입니다.

const functions = require('firebase-functionsconst express = require('expressconst engines = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3. 여기서 몇 가지를 설정합니다.
- 익스프레스를 사용하여 앱 초기화

- 엔진을 핸들 바로 설정합니다.

- 그런 다음 프런트 엔드 코드가 views 폴더 안에 있을 것이라고 익스프레스에 알립니다.

const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. Firestore DB에 액세스할 수 있도록 애플리케이션에 권한 부여

*메모:*
1. 변경
**YOUR_SDK_NAMEjson과 Firestore2에 액세스하기 위한 **자격 증명용으로 다운로드한 파일. 데이터베이스 URL을 데이터베이스 URL로 변경하십시오. URL을 보려면 **설정 >서비스 계정**으로 이동할 수 있습니다.

var serviceAccount = 요구
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Firestore에서 데이터를 가져오는 기능

- 컬렉션 ID는
견본
- 문서 ID는
sample_doc

샘플 데이터를 입력하면서 위와 같이 정의했습니다.

비동기 함수 getFirestoreconst firestore_con = 대기 admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(문서 =>{
if (!doc.exists) { console.log('해당 문서 없음 }
그렇지 않으면 {doc.data 반환
.catch(err =>{ console.log('문서 가져오기 오류', errreturn writeResult
}
**참고 사항: ** **비동기**를 사용합니다. 데이터베이스와 웹 사이트 간에 약속 작업이 완료될 때까지 기다려야 하기 때문입니다.

6. 경로를 만들고 결과를 프런트 엔드로 보냅니다.

app.getasync (요청, 응답) var db_result = await getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. 만들기
**views** 폴더 안에 있는 **index.hbs**. hbs는 handelbars 파일입니다. 참고: **
8. 내부에 이 기본 HTML 코드를 작성합니다.
가져온 결과를 보기 위한 **index.hbs**


  


" method="post" >


Sample Form
First name:
  
 Last name: