Vue.js 및 Firestore로 실행하기

Google Firebase에는 Firebase 실시간 데이터베이스 의 성공을 기반으로 하지만 몇 가지 멋진 기능이 추가된 'Firestore'(현재 베타 단계)라는 새로운 데이터 저장 가능성이 있습니다. 이 기사에서는 Vue.js와 Firestore를 사용하여 웹 앱의 기본 사항을 설정합니다.

당신이 새로운 제품에 대한 훌륭한 아이디어를 가지고 있다고 가정해 봅시다. 시작하려면 이 제품의 프로토 타입 또는 최소 실행 가능한 제품( MVP )을 만들고 싶습니다. 목표는 가능한 한 빨리 앱의 핵심을 구축하여 사용자에게 보여주고 피드백을 받고 사용을 분석할 수 있도록 하는 것입니다. 개발 속도와 빠른 반복에 중점을 둡니다.

그러나 우리가 구축을 시작하기 전에 우리의 놀라운 제품에는 이름이 필요합니다. "어메이즈볼"이라고 부르자. 그것은 전설 이 될 것입니다 - 그것을 기다리십시오 - 자기 !

다음은 내가 구상하는 방법입니다.

물론 Amazeballs 앱은 소위 Balls에서 친구와 개인 생활에 대한 진부한 정보를 공유하는 것입니다. 상단에는 공을 게시하기 위한 양식이 있고 그 아래에는 친구의 공이 있습니다.

MVP를 구축할 때 핵심 기능을 신속하게 구현할 수 있는 능력과 나중에 기능을 신속하게 추가 및 변경할 수 있는 유연성을 제공하는 도구가 필요합니다. Firebase 제품군(Google 제공)과 Firestore라는 새로운 실시간 데이터베이스가 지원하는 자바스크립트 렌더링 프레임워크인 Vue.js를 선택했습니다.

Firestore는 일반 HTTP 방법을 사용하여 직접 액세스할 수 있으므로 자체 서버를 관리할 필요가 없지만 여전히 온라인으로 데이터를 저장하는 완전한 서비스로서의 백엔드 솔루션입니다.

강력하고 두려운 것처럼 들리지만 땀을 흘리지 마십시오. 이 새로운 웹 앱을 만들고 호스팅하는 단계를 안내해 드리겠습니다. 이 페이지에서 스크롤바가 얼마나 큰지 확인하십시오. 많은 단계가 필요하지 않습니다. 또한 코드 저장소에서 각 코드 조각을 어디에 둘지 알고 싶다면 github에서 완전히 실행되는 Amazeballs 버전을 볼 수 있습니다.

시작하자

우리는 Vue.js로 시작합니다. HTML로 시작하여 점차적으로 HTML에 논리를 추가할 때 Javascript 초보자에게 좋습니다. 그러나 과소평가하지 마십시오. 그것은 많은 강력한 기능을 포함합니다. 이 조합으로 인해 프론트 엔드 프레임워크에 대한 첫 번째 선택이 되었습니다.

Vue.js에는 스캐폴딩 프로젝트를 위한 명령줄 인터페이스(CLI)가 있습니다. 이를 사용하여 기본 설정을 빠르게 수행합니다. 먼저 CLI를 설치한 다음 이를 사용하여 "webpack-simple" 템플릿을 기반으로 새 프로젝트를 생성합니다.

 npm install -g vue-cli vue init webpack-simple amazeballs

화면의 단계( npm install 및 npm run dev )를 따르면 큰 Vue.js 로고와 함께 브라우저가 열립니다.

축하 해요! 그것은 쉽다.

다음으로 Firebase 프로젝트를 만들어야 합니다. https://console.firebase.google.com/으로 이동하여 프로젝트를 만듭니다. 프로젝트는 제한된 데이터베이스(1GB 데이터, 하루 50K 읽기) 및 1GB 호스팅을 제공하는 무료 Spark 플랜에서 시작됩니다. 이것은 MVP에 충분하며 앱이 관심을 끌 때 쉽게 업그레이드할 수 있습니다.

'웹 앱에 Firebase 추가'를 클릭하여 필요한 구성을 표시합니다. 애플리케이션에서 이 구성을 사용하지만 공유 상태를 사용하는 멋진 Vue.js 방식으로 사용합니다.

먼저 npm install firebase firebase 하고 src/store.js 라는 파일을 만듭니다. 이것은 각 Vue.js 구성 요소가 구성 요소 트리와 독립적으로 액세스할 수 있도록 공유 상태를 넣을 지점입니다. 아래는 파일 내용입니다. 현재 상태에는 일부 자리 표시자만 포함되어 있습니다.

 import Vue from 'vue'; import firebase from 'firebase/app'; import 'firebase/firestore'; // Initialize Firebase, copy this from the cloud console // Or use mine :) var config = { apiKey: "AIzaSyDlRxHKYbuCOW25uCEN2mnAAgnholag8tU", authDomain: "amazeballs-by-q42.firebaseapp.com", databaseURL: "https://amazeballs-by-q42.firebaseio.com", projectId: "amazeballs-by-q42", storageBucket: "amazeballs-by-q42.appspot.com", messagingSenderId: "972553621573" }; firebase.initializeApp(config); // The shared state object that any vue component can get access to. // Has some placeholders that we'll use further on! export const store = { ballsInFeed: null, currentUser: null, writeBall: (message) => console.log(message) };

이제 Firebase 부분을 추가하겠습니다. Firestore에서 데이터를 가져오는 한 가지 코드:

 // a reference to the Balls collection const ballsCollection = firebase.firestore() .collection('balls'); // onSnapshot is executed every time the data // in the underlying firestore collection changes // It will get passed an array of references to // the documents that match your query ballsCollection .onSnapshot((ballsRef) => { const balls = []; ballsRef.forEach((doc) => { const ball = doc.data(); ball.id = doc.id; balls.push(ball); }); store.ballsInFeed = balls; });

그런 다음 writeBall 함수를 실제로 쓰기를 실행하는 함수로 바꿉니다.

 writeBall: (message) => ballsCollection.add({ createdOn: new Date(), author: store.currentUser, message })

이 둘이 어떻게 완전히 분리되었는지 주목하십시오. 컬렉션에 삽입하면 항목을 삽입했기 때문에 onSnapshot 이 트리거됩니다. 이렇게 하면 상태 관리가 훨씬 쉬워집니다.

이제 모든 Vue.js 구성 요소가 쉽게 액세스할 수 있는 공유 상태 개체가 있습니다. 잘 활용해봅시다.

물건을 게시하십시오!

먼저 현재 사용자가 누구인지 알아봅시다.

Firebase에는 사용자를 알아가는 작업에 도움이 되는 인증 API가 있습니다. 인증 → 로그인 방법 에서 Firebase 콘솔의 적절한 항목을 활성화합니다. 지금은 Google 로그인을 사용할 것입니다.

Firebase는 인터페이스 도움말을 제공하지 않으므로 "Google/Facebook/Twitter로 로그인" 버튼 및/또는 사용자 이름/비밀번호 입력 필드를 직접 만들어야 합니다. 로그인 구성 요소는 다음과 같이 보일 것입니다.

 <template> <div> <button @click.prevent="signInWithGoogle">Log in with Google</button> </div> </template> <script> import firebase from 'firebase/app'; import 'firebase/auth'; export default { methods: { signInWithGoogle() { var provider = new firebase.auth.GoogleAuthProvider(); firebase.auth().signInWithPopup(provider); } } } </script>

이제 로그인 퍼즐의 한 조각이 더 있습니다. 스토어에서 currentUser 변수를 가져오는 것입니다. 다음 행을 store.js 에 추가하십시오.

 // When a user logs in or out, save that in the store firebase.auth().onAuthStateChanged((user) => { store.currentUser = user; });

이 세 줄로 인해 현재 로그인한 사용자가 변경(로그인 또는 로그아웃)할 때 store.currentUser 도 변경됩니다. 몇 가지 공을 게시하자!

입력 양식은 다음과 같이 스토어의 writeBall 함수에 연결된 별도의 Vue.js 구성 요소입니다.

 <template> <form @submit.prevent="formPost"> <textarea v-model="message" /> <input type="submit" value="DUNK!" /> </form> </template> <script> import { store } from './store'; export default { data() { return { message: null, }; }, methods: { formPost() { store.writeBall(this.message); } }, } </script>

엄청난! 이제 사람들은 로그인하여 공 게시를 시작할 수 있습니다. 하지만 승인이 누락되었습니다. 우리는 당신이 볼을 직접 게시할 수 있기를 원하며, 이것이 Firestore 규칙 이 들어오는 곳입니다. 그들은 데이터베이스에 대한 액세스 권한을 정의하는 Javascript-ish 코드로 구성됩니다. Firestore 콘솔을 통해 입력할 수 있지만 Firebase CLI를 사용하여 디스크의 파일에서 설치할 수도 있습니다. 다음과 같이 설치하고 실행합니다.

 npm install -g firebase-tools firebase login firebase init firestore

앱에 대한 권한 부여를 추가할 수 있는 firestore.rules 라는 파일을 받게 됩니다. 우리는 모든 사용자가 자신의 공을 삽입할 수 있기를 원하지만 다른 사람의 공을 삽입하거나 편집할 수는 없습니다. 아래 예는 훌륭하게 수행됩니다. 모든 사람이 데이터베이스의 모든 문서를 읽을 수 있지만 로그인한 경우에만 삽입할 수 있으며 삽입된 리소스에는 현재 로그인한 사용자와 동일한 "author" 필드가 있습니다.

 service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read: if true; allow create: if request.auth.uid != null && request.auth.uid == request.resource.data.author; } } }

몇 줄의 코드처럼 보이지만 매우 강력하고 매우 빠르게 복잡해질 수 있습니다. Firebase는 이 부분에 대해 더 나은 도구를 사용하기 위해 노력하고 있지만 현재로서는 원하는 대로 작동할 때까지 시행착오입니다.

firebase deploy 를 실행하면 Firestore 규칙이 배포되고 몇 초 안에 프로덕션 데이터를 보호합니다.

서버 로직 추가

홈페이지에서 친구의 볼이 있는 타임라인을 보고 싶습니다. 사용자가 볼 볼을 결정하는 방법에 따라 데이터베이스에서 직접 이 쿼리를 수행하면 성능 병목 현상이 발생할 수 있습니다. 대안은 게시된 모든 공에서 활성화되고 모든 작성자의 친구의 벽에 추가되는 Firebase Cloud Function 을 만드는 것입니다. 이 방법은 비동기적이고 비차단적이며 궁극적으로 일관성이 있습니다. 또는 다른 말로하면 거기에 도달 할 것입니다.

예제를 단순하게 유지하기 위해 생성된 Ball을 듣고 메시지를 수정하는 간단한 데모를 수행하겠습니다. 이것이 특히 유용하기 때문이 아니라 클라우드 기능을 시작하고 실행하는 것이 얼마나 쉬운지 보여주기 위한 것입니다.

 const functions = require('firebase-functions'); exports.createBall = functions.firestore .document('balls/{ballId}') .onCreate(event => { var createdMessage = event.data.get('message'); return event.data.ref.set({ message: createdMessage + ', yo!' }, {merge: true}); });

오, 잠깐, 이 코드를 어디에 작성해야 하는지 알려주는 것을 잊었습니다.

 firebase init functions

이렇게 하면 index.js 가 있는 functions 디렉토리가 생성됩니다. 그것은 당신이 당신의 자신의 Cloud Functions 를 작성할 수 있는 파일입니다. 또는 당신이 그것에 깊은 인상을 받았다면 내 것을 복사하여 붙여넣으십시오.

Cloud Functions 는 애플리케이션의 여러 부분을 분리하고 비동기식으로 통신할 수 있는 좋은 지점을 제공합니다. 또는 건축 도면 스타일:

마지막 단계: 배포

Firebase에는 이를 위해 사용할 수 있는 호스팅 옵션이 있으며 Firebase CLI를 통해 사용할 수 있습니다.

 firebase init hosting

dist 를 공용 디렉토리로 선택한 다음 '예'를 선택하여 모든 URL을 index.html 로 다시 작성합니다. 이 마지막 옵션을 사용하면 vue-router를 사용하여 앱 내에서 예쁜 URL을 관리할 수 있습니다.

이제 작은 장애물이 있습니다. dist 폴더에는 코드의 올바른 빌드를 가리키는 index.html 파일이 없습니다. 이 문제를 해결하려면 package.json 에 npm 스크립트를 추가하세요.

 { "scripts": { "deploy": "npm run build && mkdir dist/dist && mv dist/*.* dist/dist/ && cp index.html dist/ && firebase deploy" } }

이제 npm deploy 를 실행하기만 하면 Firebase CLI가 호스팅 코드의 URL을 표시합니다!

이 아키텍처를 사용하는 경우

이 설정은 MVP에 적합합니다. 세 번째로 이 작업을 수행하면 무료로 호스팅되는 확장 가능한 데이터베이스가 지원하는 작동하는 웹 앱을 몇 분 안에 갖게 될 것입니다. 기능 구축을 즉시 시작할 수 있습니다.

또한 성장할 여지가 많습니다. Cloud Functions 가 충분히 강력하지 않은 경우 예를 들어 Google Cloud의 docker에서 실행되는 기존 API로 대체할 수 있습니다. 또한 vue-router 및 vuex 로 Vue.js 아키텍처를 업그레이드하고 vue-cli 템플릿에 포함된 webpack의 기능을 사용할 수 있습니다.

하지만 무지개와 유니콘이 전부는 아닙니다. 가장 악명 높은 경고는 클라이언트가 즉시 데이터베이스와 대화하고 있다는 사실입니다. 원시 데이터를 클라이언트가 더 쉽게 사용할 수 있는 형식으로 변환하는 데 사용할 수 있는 미들웨어 계층은 없습니다. 따라서 클라이언트 친화적 인 방식으로 저장해야 합니다. 클라이언트가 변경을 요청할 때마다 Firebase에서 데이터 마이그레이션을 실행하는 것이 매우 어렵다는 것을 알게 될 것입니다. 이를 위해서는 모든 레코드를 읽고, 변환하고, 다시 쓰는 커스텀 Firestore 클라이언트를 작성해야 합니다.

데이터 모델을 결정할 시간을 가지십시오. 나중에 데이터 모델을 변경해야 하는 경우 데이터 마이그레이션이 유일한 옵션입니다.

"

그렇다면 이러한 도구를 사용하는 프로젝트의 예는 무엇입니까? Vue.js를 사용하는 큰 이름 중에는 Laravel, GitLab 및 (네덜란드의 경우) nu.nl이 있습니다. Firestore는 아직 베타 버전이므로 아직 활성 사용자가 많지 않지만 Firebase 제품군은 이미 National Public Radio , Shazam 등에서 사용되고 있습니다. 저는 동료들이 처음 5일 동안 백만 번 이상 다운로드된 Unity 기반 게임 Road Warriors용 Firebase를 구현하는 것을 보았습니다. 상당한 부하가 걸릴 수 있으며 웹, 기본 모바일, Unity 등을 위한 클라이언트에서 매우 다재다능합니다.

가입은 어디서 하나요?!

자세히 알아보려면 다음 리소스를 고려하세요.

• 위의 모든 코드를 포함하는 작업 샘플
• Vue.js, vue-router, vue-cli에 대한 문서
• Firebase에 대한 문서
• Firebase에 대해 더 잘 알 수 있는 재미있는 방법 — YouTube 블로그

즐거운 코딩!