Firebase 응용 프로그램 관리 응용 프로그램. 여러 환경 및 데이터 마이그레이션에 대한 지원이 포함됩니다
곧 올 것입니다
기능을 추가하거나 기여하는 데 관심이 있습니까? 문제를 열어주세요!
이것은 소스 코드이므로 시작하기에 좋은 장소는 Fireadmin.io에서 사용할 수있는 호스팅 된 버전의 FIREADMIN을 확인하는 것입니다.
발전하는 동안 아마도 npm start
에 주로 의존 할 것입니다. 그러나 귀하의 처분에는 추가 스크립트가 있습니다.
yarn <script> | 설명 |
---|---|
start | localhost:3000 에서 앱을 제공합니다 |
start:dist | 응용 프로그램을 ./dist 로 구축하고 localhost:3000 에서 firebase serve 사용하여 제공합니다. |
functions:start | 로컬로 대체 기능을 실행합니다 ( firebase functions:shell 사용 |
functions:build | 클라우드 함수를 ./functions/dist 로 구축합니다 |
functions:test | Mocha와 함께 기능 단위 테스트를 실행합니다 |
build | 응용 프로그램을 ./dist 로 구축합니다 |
test | 사이프러스로 E2E 테스트를 실행합니다. 테스트를 참조하십시오 |
lint | 잠재적 오류를 위해 프로젝트를 선정합니다 |
lint:fix | 프로젝트를 줄이고 모든 수정 가능한 오류를 수정합니다 |
Husky는 prepush
후크 기능을 활성화하는 데 사용됩니다. prepush
스크립트는 현재 eslint
실행하여 코드에 보풀이 있으면 누르지 않도록합니다. 이를 비활성화하려면 package.json
에서 prepush
스크립트를 제거하십시오.
├── .github # Github Settings + Github Actions Workflows
│ ├── deploy.yml # Deploy workflow (called on merges to "master" and "production" branches)
│ └── verify.yml # Verify workflow (run when PR is created)
├── cypress # UI Integration Tests
├── docs # Docs application (built with Gatsby)
│ ├── content # Content of docs (written in markdown)
│ ├── components # React components used in docs app
│ ├── gatsby-config.js # Gatsby plugin settings
│ └── gatsby-node.js # Gatsby node definitions (how templates are combined with content)
│ └── package.json # Docs package file (docs specific dependencies)
├── functions # Cloud Functions (uses Cloud Functions for Firebase)
│ ├── src # Cloud Functions Source code (each folder represents a function)
│ └── index.js # Functions entry point
├── public # Public assets
│ ├── favicon.ico # Favicon
│ ├── firebase-messaging.sw.js # Messaging Service worker (loaded by Firebase SDK)
│ └── index.html # Main HTML page container for app
├── src # Application source code
│ ├── components # Global Reusable Presentational Components
│ ├── containers # Global Reusable Container Components
│ ├── layouts # Components that dictate major page structure
│ │ └── CoreLayout # Global application layout in which to render routes
│ ├── routes # Main route definitions and async split points
│ │ ├── index.js # Bootstrap main application routes with store
│ │ └── Home # Fractal route
│ │ ├── index.js # Route definitions and async split points
│ │ ├── assets # Assets required to render components
│ │ ├── components # Presentational React Components
│ │ ├── modules # Collections of reducers/constants/actions
│ │ └── routes ** # Fractal sub-routes (** optional)
│ ├── static # Static assets
│ └── utils # Application-wide utils (form validation etc)
├── .firebaserc # Firebase project settings (including settings for CI deployment)
├── cypress.json # Cypress Integration Test settings
├── database.rules.json # Firebase Real Time Database Rules
├── firebase.json # Firebase resource settings (including which folders are deployed)
├── firestore.indexes.json # Firestore Indexes
├── firestore.rules # Firestore Database Rules
└── storage.rules # Cloud Storage Rules
^10.18.0
(최신 클라우드 기능 런타임과 일치하기 위해 제안 된 노드 10)npm i -g firebase-tools
의존성 설치 : yarn install
프로젝트의 Firebase 콘솔 내에서 웹 앱 생성 (다음 단계에서 Config가 사용됩니다).
다음 형식을 가진 .env.local
을 만듭니다 (이전 단계에서 값을 채우면) :
REACT_APP_FIREBASE_apiKey= < - api key - >
REACT_APP_FIREBASE_authDomain= < - auth domain - >
REACT_APP_FIREBASE_databaseURL= < - database URL - >
REACT_APP_FIREBASE_projectId= < - project ID - >
REACT_APP_FIREBASE_storageBucket= < - storageBucket - >
REACT_APP_FIREBASE_messagingSenderId= < - message sender ID - >
REACT_APP_FIREBASE_appId= < - project app id - >
REACT_APP_FIREBASE_PUBLIC_VAPID_KEY= < - project app id - >
REACT_APP_ALGOLIA_APP_ID= < - - >
REACT_APP_ALGOLIA_API_KEY= < - - >
functions/.runtimeconfig.json
파일을 작성하십시오.
{
"algolia" : {
"api_key" : " <- your API KEY -> " ,
"app_id" : " <- your Algolia APP ID -> "
},
"gmail" : {
"email" : " <- gmail account for sending invite emails -> " ,
"password" : " <- password for ^ email -> "
},
"encryption" : {
"password" : " <- your own made up encryption password for service accounts -> "
}
}
함수 설정 구성 변수 방금 작성된 파일과 일치하도록 (배포 된 기능의 기능) :
firebase functions:config:set $( jq -r ' to_entries[] | [.key, (.value | tojson)] | join("=") ' < functions/.runtimeconfig.json )
빌드 프로젝트 : yarn build
FireBase에 배포 : firebase deploy
(배포, 클라우드 기능, 규칙 및 호스팅)
개발 서버 : npm start
참고 : yarn start:dist
firebase open hosting:site
참고 : 이에 대한 구성은 .github/workflows/app-deploy.yml
내에 있습니다. firebase-ci
.firebaserc
의 설정을 얻음으로써 CI 배포 프로세스를 단순화하기 위해 추가되었습니다. 필요한 것은 FireBase와 인증을 제공하는 것입니다.
사용할 준비가 된 2 개의 파이어베이스 프로젝트, 각 환경마다 하나씩 (준비 및 생산)
두 projects
, ci
및 targets
섹션에서 .firebaserc
내의 정보 교체
로그인 : firebase login:ci
인증 토큰을 생성합니다. 이 토큰은 CI 제공 업체가 귀하를 대신하여 배포 할 권한을 부여하는 데 사용됩니다. gitlab에 대한 설정이 제공되지만 모든 CI 제공 업체를 사용할 수 있습니다.
GitHub 조치 비밀 내에서 FIREBASE_TOKEN
환경 변수를 설정하십시오
다음 환경 변수를 GitHub Actions의 변수 ( /settings/ci_cd
내)에 추가하십시오.
FIREBASE_TOKEN ; // Used to deploy to Firebase (token generated in last step)
CYPRESS_RECORD_KEY ; // Record key for Cypress Dashboard
SERVICE_ACCOUNT ; // Used to authenticate with database to run hosted tests
코드를 GIT 리모컨으로 푸시하여 GitHub 작업에 대한 빌드를 실행하십시오 (대부분 GitHub).
CI 설정에 대한 자세한 옵션은 FireBase-CI 문서를 확인하십시오.
yarn build
firebase deploy
참고 : firebase serve
사용하여 FireBase에 배포 될 때 응용 프로그램의 작동 방식을 테스트 할 수 있지만 먼저 yarn build
실행해야합니다.문서는 FILEADMIN.IO/DOCS에서 확인할 수 있습니다
문서의 모든 소스 코드 및 콘텐츠는 docs
폴더 내에 있습니다. 문서는 gatsby-config.js
의 설정을 기반으로 Gatsby를 사용하여 Markdown에서 정적 파일로 생성됩니다.
자세한 내용은 Docs ReadMe를 방문하십시오.
참고 : CI 배포 설치가있는 경우 E2E 테스트 및 단위 테스트는 생산 빌드를 실행하기 전에 스테이징 환경에 대해 자동으로 실행할 수 있습니다.
클라우드 기능 단위 테스트는 이스탄불에서 생성 한 코드 적용 범위와 함께 모카로 작성됩니다. 이러한 테스트는 기능 환경 (종속성 포함)을 스터브하여 클라우드 기능에 의해 처리되는 "백엔드 기능"을 다룹니다.
cd functions
로 이동하십시오npm i
npm test
yarn test:cov
실행하십시오 End -in End 테스트는 Cypress를 사용하여 수행되며 cypress
폴더 내에 살고 있습니다. 이러한 테스트는 UI 기능을 다루며 호스팅 된 FILEADMIN 환경에서 직접 실행됩니다. 애플리케이션 엔드 - 엔드 테스트는 생산에 배포하기 전에 스테이징 환경에 배포 한 후 GitHub 동작에서 자동으로 실행됩니다.
Firebase 콘솔 내에서 서비스 계정을 만듭니다
서비스 계정을 프로젝트의 루트 내에서 serviceAccount.json
으로 저장하십시오.
Firebase 콘솔의 인증 탭에서 테스트하는 동안 사용하려는 사용자의 UID를 얻으십시오.
다음 형식으로 cypress.env.json
만듭니다.
{
"TEST_UID" : " <- user account's UID -> "
}
yarn emulators
실행하십시오. 이것은 에뮬레이터를 부팅합니다 (테스트 중에 지적)
다른 터미널 윤 yarn start:emulate
. 이렇게하면 응용 프로그램이 에뮬레이터를 가리 킵니다
다른 터미널 탭에서 실행 yarn test:emulate:run
. 이것은 에뮬레이터를 가리키는 사이프러스 통합 테스트를 실행합니다 (파종 및 검증 용).
Cypress의 로컬 테스트 러너 UI를 열려면 단일 테스트를 실행하거나 모든 테스트를 실행할 수 있습니다. yarn test:emulate
.
12
인가? 클라우드 기능 런타임은 최대 12
지원하므로 CI 빌드 버전에 사용되는 이유입니다. 함수 런타임이 업데이트 될 때 전환됩니다.