Beranda>Kode sumber PHP>Kategori lainnya
Unduh

fireadmin

Aplikasi untuk Mengelola Aplikasi Firebase. Termasuk dukungan untuk beberapa lingkungan dan migrasi data

Daftar isi

  1. Fitur
  2. Memulai
  3. Skrip NPM
  4. Struktur aplikasi
  5. Jalankan sendiri
  6. Persyaratan
  7. Sebelum memulai
  8. Pengujian
  9. Unit fungsi cloud
  10. Aplikasi E2E
  11. Penyebaran
  12. FAQ

Fitur

  • Kelola beberapa lingkungan sebagai satu proyek
  • Berbagi Proyek (Undang melalui Email Segera Hadir)
  • "Runner Tindakan" untuk tindakan proyek umum seperti migrasi data, dan menghasilkan laporan
  • Fitur aksi termasuk dukungan untuk:
    • Beberapa langkah yang memungkinkan banyak tindakan dalam satu lari
    • Fase cadangan (untuk memudahkan data cadangan sebelum menjalankan tindakan Anda)
  • Pelacakan level proyek tindakan yang telah dijalankan melalui Action Runner
  • Dapat/atur CORS CONFIG dari Bucket Penyimpanan
  • Pengujian untuk Aplikasi React (Cypress) dan Fungsi Cloud (MOCHA)

segera hadir

  • Dukungan untuk Menyalin Dokumen Firestore Tunggal dalam Tindakan Salin
  • Tindakan peta - Untuk memetakan setiap item dalam koleksi baik di RTDB dan Firestore
  • Panel Permintaan Google API yang diotorisasi
  • Undang pengguna baru melalui email
  • Manajer Pengguna (termasuk penugasan peran)
  • Penampil data

Tertarik untuk menambahkan fitur atau berkontribusi? Harap buka masalah!

Memulai

Karena ini adalah kode sumber, tempat yang bagus untuk memulai adalah memeriksa versi fireadmin yang di -host yang tersedia di fireadmin.io.

Skrip NPM

Saat berkembang, Anda mungkin akan mengandalkan sebagian besar pada npm start ; Namun, ada skrip tambahan yang Anda inginkan:

yarn <script> Keterangan
start Melayani aplikasi Anda di localhost:3000
start:dist Membangun aplikasi untuk ./dist dan menyajikannya di localhost:3000 menggunakan firebase serve
functions:start Runs Functions Rept Secara Lokal (Menggunakan firebase functions:shell
functions:build Membangun fungsi cloud untuk ./functions/dist
functions:test Menjalankan fungsi unit tes dengan mocha
build Membangun aplikasi ke ./dist
test Menjalankan tes E2E dengan cypress. Lihat Pengujian
lint Memberlok proyek untuk kesalahan potensial
lint:fix Memberlok proyek dan memperbaiki semua kesalahan yang dapat diperbaiki

Husky digunakan untuk mengaktifkan kemampuan kait prepush . Skrip prepush saat ini menjalankan eslint , yang akan membuat Anda tidak mendorong jika ada serat dalam kode Anda. Jika Anda ingin menonaktifkan ini, hapus skrip prepush dari package.json .

Struktur aplikasi 

 ├── .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

Jalankan sendiri

Persyaratan

  • Node ^10.18.0 (Node 10 disarankan agar sesuai dengan runtime fungsi cloud terbaru)

Sebelum memulai

  1. Pastikan Anda telah mengaktifkan penagihan pada akun Firebase Anda - Komunikasi API eksternal memerlukan pengaturan metode pembayaran (Anda hanya dibebankan berdasarkan penggunaan)
  2. Buat akun di Algolia - Buat aplikasi baru, Anda akan memerlukan kunci API nanti
  3. Instal Firebase Command Line Tools: npm i -g firebase-tools

Pengaturan Lingkungan Lokal

  1. Instal Ketergantungan: yarn install

  2. Buat aplikasi web di dalam konsol firebase proyek Anda (konfigurasi akan digunakan pada langkah berikutnya)

  3. Buat .env.local yang memiliki format berikut (dengan nilai -nilai Anda diisi dari langkah sebelumnya): 

    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= < - - >

  4. Buat functions/.runtimeconfig.json file yang terlihat seperti: 

    {
  "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 -> "
  }
}

  5. Setel fungsi variabel konfigurasi agar sesuai dengan file yang baru saja Anda buat (untuk versi fungsi Anda yang digunakan): 

    firebase functions:config:set $( jq -r ' to_entries[] | [.key, (.value | tojson)] | join("=") ' < functions/.runtimeconfig.json )

  6. Proyek Bangun: yarn build

  7. Deploy to Firebase: firebase deploy (penyebaran, fungsi cloud, aturan, dan hosting)

  8. Mulai Pengembangan Server: npm start Catatan: Anda juga dapat menggunakan yarn start:dist untuk menguji bagaimana aplikasi Anda akan bekerja saat digunakan ke Firebase

  9. Lihat versi situs yang digunakan dengan menjalankan firebase open hosting:site

Penyebaran

CI Deploy (disarankan)

Catatan : Config untuk ini terletak di dalam .github/workflows/app-deploy.yml . firebase-ci telah ditambahkan untuk menyederhanakan proses penyebaran CI dengan mendapatkan pengaturan dari .firebaserc . Yang diperlukan hanyalah menyediakan otentikasi dengan firebase:

  1. Memiliki setidaknya dua proyek Firebase untuk siap digunakan, satu untuk setiap lingkungan (pementasan dan produksi)

  2. Ganti info di dalam .firebaserc di bawah kedua projects , ci , dan targets bagian

  3. Login: firebase login:ci untuk menghasilkan token otentikasi. Token ini akan digunakan untuk memberikan hak penyedia CI untuk digunakan atas nama Anda. Pengaturan disediakan untuk GitLab, tetapi penyedia CI apa pun dapat digunakan.

  4. Atur variabel lingkungan FIREBASE_TOKEN dalam rahasia tindakan gitub

  5. Tambahkan variabel lingkungan berikut ke variabel tindakan GitHub (di dalam /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

  6. Jalankan Tindakan Build on GitHub dengan mendorong kode ke remote git Anda (kemungkinan besar GitHub)

Untuk lebih banyak opsi di Pengaturan CI, periksa dokumen Firebase-CI.

Deploy manual

  1. Proyek Bangun: yarn build
  2. Deploy to firebase: firebase deploy Catatan: Anda dapat menggunakan firebase serve untuk menguji bagaimana aplikasi Anda akan bekerja saat digunakan ke firebase, tetapi pastikan Anda menjalankan yarn build terlebih dahulu.

Dokumen

Dokumentasi tersedia di fireadmin.io/docs

Semua kode sumber dan konten untuk dokumen terletak di dalam folder docs . Dokumen dihasilkan dari markdown ke file statis menggunakan Gatsby berdasarkan pengaturan di gatsby-config.js .

Kunjungi Docs Readme untuk info lebih lanjut.

Pengujian

Catatan : Jika Anda memiliki pengaturan CI pengaturan, tes E2E dan tes unit dapat secara otomatis berjalan melawan lingkungan pementasan Anda sebelum menjalankan pembangunan produksi.

Tes unit fungsi cloud

Tes Unit Fungsi Cloud ditulis dalam mocha dengan cakupan kode yang dihasilkan oleh Istanbul. Tes -tes ini mencakup "Backend Functionity" yang ditangani oleh fungsi cloud dengan mematahkan lingkungan fungsi (termasuk dependensi).

Jalankan secara lokal
  1. Masuk ke folder fungsi: cd functions
  2. Konfirmasikan Anda memiliki dependensi yang diinstal: npm i
  3. Jalankan Tes Unit: npm test
  4. Untuk juga menghasilkan cakupan saat pengujian, jalankan yarn test:cov

Tes App UI

Tes ujung ke ujung dilakukan dengan menggunakan Cypress dan mereka hidup di dalam folder cypress . Tes -tes ini mencakup fungsionalitas UI dan dijalankan langsung pada lingkungan yang di -host fireadmin. Tes aplikasi ujung ke ujung dijalankan secara otomatis dalam tindakan github setelah digunakan ke lingkungan pementasan sebelum digunakan untuk produksi.

Jalankan secara lokal

  1. Buat Akun Layanan di dalam Konsol Firebase

  2. Simpan Akun Layanan sebagai serviceAccount.json dalam akar proyek

  3. Dapatkan UID dari pengguna yang ingin Anda gunakan saat menguji dari tab otentikasi konsol firebase ke

  4. Buat cypress.env.json dengan format berikut: 

    {
  "TEST_UID" : " <- user account's UID -> "
}

  5. Jalankan yarn emulators . Ini akan mem -boot emulator (diarahkan selama pengujian)

  6. Di terminal yang berbeda, Yun yarn start:emulate . Ini akan mem -boot aplikasi menunjuk ke emulator

  7. Dalam tab terminal yang berbeda, jalankan yarn test:emulate:run . Ini akan menjalankan uji integrasi Cypress yang diarahkan pada emulator (untuk penyemaian dan verifikasi)

Untuk membuka UI Tes Runner Lokal Cypress di mana Anda dapat menjalankan tes tunggal atau semua tes menggunakan yarn test:emulate .

FAQ

  1. Mengapa simpul 12 bukan versi yang lebih baru? Runtime Fungsi Cloud mendukung hingga 12 , itulah sebabnya itulah yang digunakan untuk versi CI Build. Ini akan diaktifkan saat runtime fungsi diperbarui
  2. Mengunggah akun layanan? Kemana mereka pergi dan bagaimana akun layanan saya disimpan? Saat mengunggah akun layanan, pertama -tama masuk ke ember penyimpanan cloud Google yang memiliki aturan keamanan dan tidak memiliki akses CORS. Fungsi cloud CopyServiceAccounttofirestore mengubahnya menjadi string terenkripsi, menyimpannya di dalam firestore, kemudian menghapus file asli dari penyimpanan cloud. Aturan Firestore menjaga siapa pun yang bukan kolaborator di proyek Anda menggunakan atau membaca akun layanan. Karena dikaitkan dengan lingkungan tertentu, Anda kemudian dapat membatasi akses ke apa yang dapat dilakukan dengan tepat di tab Pengguna/Izin Fireadmin.
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua