طلب لإدارة تطبيقات Firebase. يتضمن دعمًا لبيئات متعددة وترحيل البيانات
قريباً
هل أنت مهتم بإضافة ميزة أو مساهمة؟ الرجاء فتح مشكلة!
نظرًا لأن هذا هو الكود المصدري ، فإن مكانًا رائعًا للبدء هو التحقق من الإصدار المستضاف من FireAdMin المتاح على FireAdmin.io.
أثناء التطور ، من المحتمل أن تعتمد في الغالب على 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 مع Cypress. انظر الاختبار |
lint | يرتب المشروع للأخطاء المحتملة |
lint:fix | يرتب المشروع ويصلح جميع الأخطاء القابلة للتصحيح |
يستخدم Husky لتمكين قدرة خطاف prepush
. يقوم البرنامج النصي prepush
حاليًا بتشغيل eslint
، والذي سيمنعك من الضغط إذا كان هناك أي ترتيب داخل الكود الخاص بك. إذا كنت ترغب في تعطيل ذلك ، فقم بإزالة البرنامج النصي prepush
من package.json
.
├── .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 في مشروعك (سيتم استخدام التكوين في الخطوة التالية)
قم بإنشاء .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
(نشر ، وظائف السحابة ، والقواعد ، والاستضافة)
START Development Server: npm start
ملاحظة: يمكنك أيضًا استخدام yarn start:dist
لاختبار كيفية عمل التطبيق الخاص بك عند نشره على FireBase
عرض النسخة المنشورة من الموقع عن طريق تشغيل firebase open hosting:site
ملاحظة : يقع التكوين لهذا داخل .github/workflows/app-deploy.yml
. تمت إضافة firebase-ci
لتبسيط عملية نشر CI من خلال الحصول على إعدادات من .firebaserc
. كل ما هو مطلوب هو توفير المصادقة مع Firebase:
لديك مشروعين على الأقل من Firebase للاستعداد للاستخدام ، أحدهما لكل بيئة (التدريج والإنتاج)
استبدل المعلومات داخل .firebaserc
ضمن أقسام projects
، ci
، targets
تسجيل الدخول: firebase login:ci
لإنشاء رمز مصادقة. سيتم استخدام الرمز المميز هذا لإعطاء حقوق مزود CI للنشر نيابة عنك. يتم توفير الإعدادات لـ gitlab ، ولكن يمكن استخدام أي موفر CI.
تعيين متغير بيئة FIREBASE_TOKEN
ضمن أسرار إجراءات GitHub
أضف متغيرات البيئة التالية إلى متغيرات إجراءات github (داخل /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
قم بتشغيل إجراءات GitHub عن طريق دفع الكود إلى جهاز التحكم عن بُعد GIT (على الأرجح github)
لمزيد من الخيارات في إعدادات CI الخروج من مستندات Firebase-CI.
yarn build
firebase deploy
ملاحظة: يمكنك استخدام firebase serve
لاختبار كيفية عمل طلبك عند نشره على Firebase ، ولكن تأكد من تشغيل yarn build
أولاً.الوثائق متوفرة على FireAdmin.io/docs
يوجد جميع التعليمات البرمجية المصدر ومحتوى المستندات داخل مجلد docs
. يتم إنشاء مستندات من Markdown إلى ملفات ثابتة باستخدام Gatsby استنادًا إلى الإعدادات في gatsby-config.js
.
قم بزيارة Docs ReadMe لمزيد من المعلومات.
ملاحظة : إذا كان لديك نشر CI ، فيمكن أن يتم تشغيل اختبارات E2E واختبارات الوحدة تلقائيًا مقابل بيئة التدريج الخاصة بك قبل تشغيل بناء الإنتاج.
تتم كتابة اختبارات وحدة الوظائف السحابية في Mocha مع تغطية الكود التي تم إنشاؤها بواسطة Istanbul. تغطي هذه الاختبارات "وظائف الواجهة الخلفية" التي يتم التعامل معها بواسطة وظائف السحابة عن طريق تخفيف بيئة الوظائف (بما في ذلك التبعيات).
cd functions
npm i
npm test
yarn test:cov
تتم اختبارات النهاية إلى النهاية باستخدام Cypress ويعيشون داخل مجلد cypress
. تغطي هذه الاختبارات وظائف واجهة المستخدم ويتم تشغيلها مباشرة على البيئة المستضافة من FireAdmin. يتم تشغيل اختبارات التطبيق إلى النهاية تلقائيًا في إجراءات github بعد الانتشار في بيئة التدريج قبل الانتشار في الإنتاج.
قم بإنشاء حساب خدمة داخل وحدة التحكم Firebase
احفظ حساب الخدمة كخدمة serviceAccount.json
ضمن جذر المشروع
احصل على UID للمستخدم الذي تريد استخدامه أثناء الاختبار من علامة التبويب المصادقة لوحدة التحكم في Firebase إلى
إنشاء cypress.env.json
بالتنسيق التالي:
{
"TEST_UID" : " <- user account's UID -> "
}
تشغيل yarn emulators
. هذا سيؤدي تشغيل المحاكيات (المشار إليها أثناء الاختبار)
في محطة مختلفة yun yun yarn start:emulate
. سيؤدي هذا إلى تشغيل التطبيق إلى المحاكيات
في علامة تبويب طرفية مختلفة ، قم بتشغيل yarn test:emulate:run
. سيؤدي ذلك إلى تشغيل اختبارات تكامل السرو المشددة في المحاكيات (للبذر والتحقق)
لفتح واجهة مستخدم اختبار Cypress المحلية حيث يمكنك إجراء اختبارات واحدة أو جميع الاختبارات تستخدم yarn test:emulate
.
12
بدلا من إصدار أحدث؟ تدعم وظائف السحابة وقت التشغيل ما يصل إلى 12
، وهذا هو السبب في أن هذا هو ما يستخدم لإصدار بناء CI. سيتم تبديل هذا عند تحديث وقت تشغيل الوظائف