on
Angular 및 Firebase Cloud 기능 간 공유 유형
Angular 및 Firebase Cloud 기능 간 공유 유형
반응형
저희 팀은 백엔드를 파이어베이스로 이전하고 있습니다. 이 과정에서 직면했던 과제 중 하나는 프런트 엔드 Angular 애플리케이션과 백엔드 Firebase Cloud Functions 프로젝트 간에 리소스(예: 유형, 클래스, 유틸리티 기능)를 효율적으로 공유하는 방법을 찾는 것이었습니다. 다음과 같은 두 가지 주요 요구사항이 있었습니다.
Angular AND Firebase 아키텍처로 작업 최소화 이 두 프레임워크는 상당히 고집이 세서, 우리는 우리의 필요에 따라 너무 많이 구부리기 보다는 그것에 맞춰 조정하는 것을 선호합니다.
개발자 친화적인 업무 공간. 모든 변경 사항에 따라 자동으로 재구성되는 Firebase의 클라우드 환경을 에뮬레이션하는 로컬 서버를 포함합니다.
이러한 요구를 충족시키기가 생각보다 어려웠기 때문에, 귀하에게도 도움이 될 수 있기를 바라며 저희 레시피를 공유합니다.
프로젝트의 전체 데모를 확인하십시오.
워크스페이스 생성
무엇보다도, 그것은 단조로운 일이 될 것이다. 이는 분명 복잡한 결정이지만, 멀티레포 프로젝트의 복잡성이 아니라 단일 리포의 단순성으로 인해 우리 사례의 규모가 확대되었습니다.
우리는 대부분 좋은 새것을 알고 있다. 그러나 이 repo는 최소 세 개의 프로젝트(Angular app| Cloud-Functions | Shared Library)를 지원해야 하므로, 잘 알려지지 않은 AngularCLI 구성 요소 중 하나를 사용하는 것이 좋습니다. 다중 프로젝트 작업 공간. 먼저 빈 작업 공간을 생성합니다.
ng new my-workspace --create-application false
이제 새로 생성된 작업 공간에 들어가거나 즐겨 찾는 IDE로 열고 첫 번째 프로젝트인 Angular 앱을 추가합니다.
cd my-workspace ng generate application my-first-app
적합한 CLI 마법사를 따르십시오. 작업이 완료되면 작업 공간 내에 프로젝트라는 폴더가 있고 그 안에는 다른 모든 기본 Angular 프로젝트의 컨텐츠인 my-firstapp이라는 폴더가 있습니다. 사실, 여러분은 전에 가졌던 많은 습관들을 쉽게 계속할 수 있습니다.
공유 라이브러리 생성
다음 단계에서는 ngenerate 라이브러리 my-lib를 사용하여 새 Angular 라이브러리를 만들고 싶은 분도 계실 것입니다. 당신은 그 충동을 참아야 해요. Angular 라이브러리에는 모든 종류의 Angular가 제공됩니다. Angular 구성 요소나 서비스를 공유하길 원하지만 클라우드 기능에는 전혀 쓸모가 없는 경우에는 매우 유용한 기능입니다. 따라서 다른 방법을 찾아야 합니다.
프로젝트 폴더에 새 라이브러리를 만드는 것부터 시작합니다.
cd projects mkdir my-lib cd my-lib
새 라이브러리 내에 index.ts라는 파일을 생성하고 다음 내용을 추가합니다.
export function foo() { return 'bar'; }
또한 다음 내용으로 tsconfig.json이라는 새 파일을 생성하십시오.
{ "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": true, "declarationMap": true, "sourceMap": true, "outDir": "../../dist/my-lib", "resolveJsonModule": true, "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": [ "**/*.ts", "./package.json" ] }
마지막으로, 라이브러리 폴더 내에 미니멀리스트 패키지를 생성해 보겠습니다.json 파일은 다음과 같습니다.
{ "name": "my-lib", "version": "0.0.1" }
이제 루트 패키지를 편집하십시오.json, 그리고 다음 스크립트를 추가합니다.
"scripts": { ... // existing angular scripts "build:my-lib": "cd projects/my-lib && tsc" },
작업 공간의 루트에서 다음 명령을 사용하여 새 스크립트를 실행합니다.
npm run build:my-lib
모든 것이 잘 작동한다면, 당신은 당신의 라이브러리의 컴파일된 버전을 /dist/my-lib 안에 볼 수 있을 것이다. 희망컨대 다음과 같다:
축하합니다. 방금 프로젝트의 새 라이브러리를 만들었습니다! �� 이제 사용을 시작하겠습니다.
Angular App에 라이브러리 추가
Angular 앱이 새 라이브러리가 존재하는지 확인하려면 root tsconfig.json을 통해 이를 알려야 합니다. 파일을 열고 다음 줄을 추가하십시오.
"compilerOptions": { ... // existing settings "paths": { "my-lib": [ "dist/my-lib" ] } },
이제 코드에 안전하게 사용할 수 있습니다. 프로젝트/my-first-app/src/app.component.ts를 열고 내용을 다음과 같이 바꿉니다.
import { Component, OnInit } from '@angular/core'; import { foo } from 'my-lib'; // Make sure your IDE can autocomplete this import, otherwise you might end up with relative imports (../../../yada/yada) which will cause plenty of problems down the road. @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'my-first-app'; ngOnInit() { const value = foo(); console.info(value); } }
nserve를 입력하고 http://localhost:4200으로 이동하여 콘솔에 다음과 같은 항목이 표시되는지 확인합니다.
�� 만세! Angular 앱에서 공유 라이브러리 구현을 방금 마쳤습니다. 계속하자.
파이어베이스 프로젝트 시작
이미 Firebase 프로젝트를 생성하고 Firebase CLI를 설치한 후 계정에 로그인했다고 가정할 때 작업 공간의 루트에 있는지 확인하고 다음 명령을 실행합니다.
firebase init
초기화 마법사의 지침을 따릅니다. 데모를 위해 다음 옵션을 선택하십시오.
기능 목록에서 Functions를 선택합니다.
적절한 파이어베이스 프로젝트를 선택하십시오.
Typescript를 선택합니다.
ESLint를 사용하지 마십시오. Angular의 라이닝과 함께 하는 것은 별도의 기사를 쓸 가치가 있다.
종속성을 설치합니다.
�� 완료! 이제 작업 공간에서 파이어베이스가 초기화되었습니다. 하지만 저처럼 강박장애를 좋아하는 사람이라면, 새로 만든 기능 폴더를 프로젝트 폴더 밖에 두는 것은 혐오스러운 일입니다. 바로 잡읍시다. 전체 기능 폴더를 프로젝트 폴더로 옮기면 다음과 같은 결과가 나타납니다.
새로운 장소를 파이어베이스에 알리는 것이 중요하니, 파이어베이스 문을 열어라.작업 공간의 루트에 json을 추가하고 소스 속성을 추가합니다.
{ "functions": { ...exiting code... "source": "projects/functions" } }
간단하죠? 익숙해지지 마세요. 이제 라이브러리를 Firebase 프로젝트에 추가하겠습니다. 가장 어려운 부분입니다. 심호흡을 해, 안으로 들어가자.
Firebase 클라우드 기능에 라이브러리 추가
Firebase Cloud Functions와 리소스를 공유할 때 가장 큰 문제는 Firebase가 Functions 폴더 외부에 배포하기를 거부한다는 것입니다. 따라서 당사의 목표는 기존의 Angular 앱의 종속성이나 아름다운 폴더 구조를 해치지 않고 어떻게든 기능 폴더로 라이브러리를 이전하는 것입니다. 다행히 Angular는 종속성이 어디인지에 관계없이 작동하므로 가장 간단한 해결책은 라이브러리를 함수 폴더에 빌드하는 것입니다.
프로젝트/my-lib/tsconfig.json을 다시 한 번 편집하고 대상 폴더를 변경하겠습니다.
// before: // "outDir": "../../dist/my-lib", // after: "outDir": "../functions/dist/my-lib"
다음으로 작업 공간에 라이브러리의 위치가 변경되었음을 알려야 합니다. 작업 공간의 root tsconfig.json을 열고 경로를 변경합니다.
"paths": { "my-lib": [ "projects/functions/dist/my-lib" ] }
이렇게 하면 이전 종속성이 제대로 작동하는지 확인할 수 있습니다. 회귀 분석을 생성하지 않았는지 확인하기 위해 작업 공간의 루트로 돌아가서 npm build:my-lib를 실행한 다음 serve를 다시 실행하고 막대가 콘솔에 여전히 인쇄되는지 확인하십시오. 모두 오키 도키인가요? 계속하자.
기능 폴더는 자체 tsconfig.json 파일과 함께 제공됩니다. 그래서 우리는 자원에 대해서도 알려야 한다. 프로젝트/함수/tsconfig.json을 편집하고 컴파일러 옵션 내에 다음 줄을 추가하십시오.
"compilerOptions": { ... // existing settings "baseUrl": "./", "paths": { "my-lib": [ "dist/my-lib"// the relative path to our generated library ] } },
하지만 당사의 Angular 앱과는 달리, 이 앱으로는 Cloud Functions 프로젝트에서 라이브러리를 사용할 수 없습니다. Firebase 배포 제한 사항으로 인해(누군가 설명해 주시면 감사하겠습니다) 리소스를 package.json에 명시적으로 추가해야 합니다. 프로젝트/기능/패키지를 열어보세요.json 및 다음 종속성 추가:
"dependencies": { ... "my-lib": "file:dist/my-lib" },
Functions 폴더 안에 npm install로 마무리합니다. 이는 npm에게 functions/dist/my-lib와 functions/node_modules/my-lib 사이에 심볼 링크를 생성하도록 지시하며, 이를 Firebase가 쉽게 처리할 수 있습니다.
프로젝트/함수/.gitignore를 편집하고 다음 줄을 추가하여 dist 폴더를 무시하도록 gitit에 지시합니다.
# Compiled shared resources dist/
이제 실제로 Firebase Cloud Functions 프로젝트 내에서 라이브러리를 사용할 준비가 되었습니다. 프로젝트/기능/src/index.ts를 열고 내용을 다음과 같이 바꿉니다.
import * as functions from "firebase-functions"; import { foo } from 'my-lib'; // Once more, it's super important this will point to the module and not the relative path. Make sure your IDE does this for you. export const helloWorld = functions.https.onRequest( (request, response) => { const value = foo(); functions.logger.info("Hello logs!", {structuredData: true}); response.send("Hello from Firebase!" + value); });
작동 상태를 살펴보겠습니다. functions 폴더에 있는지 확인하고 npm runserve를 실행합니다. 그러면 Firebase 에뮬레이터 제품군이 시작됩니다.
모든 것이 잘 작동했다면 �� 로컬 엔드포인트를 통해 helloWorld 기능으로 전화를 걸어 확인할 수 있을 것입니다.
또한 프로젝트 어디서나 파이어베이스 배포를 실행하면 전 세계 어디에서나 운영 환경의 새로운 클라우드 기능에 액세스할 수 있습니다.
�� 이제 좀 더 수월한 생활을 위해 몇 가지 추가 사항으로 마무리하겠습니다.
로컬 서버 자동 새로 고침
지금까지 이 가이드를 따랐다고 가정할 때, 다음 단계는 간단합니다. 무엇보다도 가장 공통적인 종속성, 즉 다른 모든 프로젝트가 의존하는 종속성, 즉 my-lib를 살펴봐야 합니다. 작업 공간의 루트로 이동하여 다음을 실행하십시오.
npm run build:my-lib -- --watch
이제 my-lib 내부의 모든 변화는 자동으로 라이브러리 재구축을 트리거합니다.
이제 Angular 앱을 실행해 보겠습니다(Library Watch가 계속 실행될 수 있도록 별도의 터미널에서 실행).
ng serve
http://localhost:4200/를 열고 콘솔을 확인하면 이전에 보았던 것과 동일한 막대가 생성됩니다. 이제 프로젝트/my-lib/index.ts로 이동하여 다음을 변경합니다.
export function foo() { return 'barbi'; }
라이브러리에 대한 변경 사항이 저장되면 Angular 앱의 재구축도 트리거됩니다. 따라서 브라우저를 수동으로 새로 고치지 않고 콘솔에 다음과 같은 내용이 표시됩니다.
그런 다음 새 터미널 창에서 기능 폴더로 전환하고 다음을 실행합니다.
npm run build -- --watch
그리고 또 다른 터미널(마지막 터미널)에서 Functions 폴더 안에서 다음을 실행합니다.
npm run serve
이전과 마찬가지로 helloWorld 로컬 엔드포인트가 터미널에 인쇄되어야 합니다. 브라우저에서 열면 다음과 같은 내용이 나타납니다.
이제 foo() 기능을 다시 변경하고 몇 초 동안 기다렸다가 클라우드 기능 페이지를 새로 고칩니다. 변화를 목격하고 �� 춤을 추십시오. 여러분의 환경은 준비되었습니다! 이제 다음과 같은 이점이 있습니다.
Angular 앱, Firebase Cloud Functions 및 공유 라이브러리를 포함한 모노레포 작업 공간.
자동 업데이트/교체를 "전파"하는 로컬 개발 서버
Angular CLI 및 Firebase CLI와 완벽하게 통합됩니다.
이게 우리의 함정이야 잘 되길 바라. NAT은 더 나은 방법과 관행을 모색하고 있으므로 이에 대한 귀하의 의견을 언제든지 공유해 주십시오.
from http://issue-disk.tistory.com/476 by ccl(A) rewrite - 2021-07-18 06:01:03