Διευκολύνετε τα δεινά σας στην παραγωγή και την εγκατάσταση με έναν αγωγό CI/CD που φροντίζει για την επίπονη λεπτομέρεια.

Η ανάπτυξη εφαρμογών Ιστού στο Firebase Hosting μπορεί να είναι μια ταλαιπωρία. Ωστόσο, χρησιμοποιώντας ενέργειες GitHub μπορείτε να απλοποιήσετε και να εξορθολογίσετε τη διαδικασία ανάπτυξης και να κάνετε είναι απίστευτα εύκολο να διαχειριστείτε τις ροές εργασιών ανάπτυξης καθ' όλη τη διάρκεια ζωής ενός λογισμικού έργο.

Με μερικά απλά βήματα, μπορείτε να ρυθμίσετε μια ροή εργασιών ανάπτυξης για να αυτοματοποιήσετε τη διαδικασία. Αυτό περιλαμβάνει την παρακολούθηση νέων αλλαγών σε υποκαταστήματα και την καταγραφή τυχόν σφαλμάτων. Διαβάστε παρακάτω για να μάθετε πώς να αναπτύξετε μια εφαρμογή React στην υπηρεσία φιλοξενίας του Firebase.

Τι είναι ένας αγωγός CI/CD;

Ένας αγωγός CI/CD (Συνεχής Ενσωμάτωση/Συνεχής Παράδοση) είναι ένα σύνολο αυτοματοποιημένων διαδικασιών που υλοποιούνται για να είναι δυνατή η συνεχής δημιουργία, δοκιμή και ανάπτυξη εφαρμογών.

Με απλά λόγια, δημιουργείται ένας αγωγός CI/CD για την αυτοματοποίηση των διαδικασιών που εμπλέκονται στον κύκλο ζωής ανάπτυξης λογισμικού. Αυτό θα περιλαμβάνει την πραγματική ανάπτυξη, δοκιμές, εκδόσεις (beta, alpha και τελική έκδοση), διορθώσεις σφαλμάτων, ακόμη και ενημερώσεις λειτουργιών. Ουσιαστικά, αυτή η διαδικασία καθιστά δυνατή την εύκολη και γρήγορη αποστολή λογισμικού ποιότητας.

instagram viewer

Ένας αγωγός CI/CD συνήθως καλύπτει δύο στάδια, τα οποία περιλαμβάνουν:

  1. Στάδιο πηγής: Αυτή η φάση καλύπτει την πραγματική ανάπτυξη και συντήρηση του κώδικα της εφαρμογής με ένα εργαλείο ελέγχου έκδοσης όπως το Git.
  2. Στάδιο δημιουργίας: Αυτό το βήμα συγκεντρώνει τον πηγαίο κώδικα με όλες τις εξαρτήσεις του σε μια εκτελέσιμη μορφή.
  3. Δοκιμαστικό στάδιο: Αυτό το στάδιο ενσωματώνει αυτοματοποιημένες δοκιμές για την επικύρωση της ποιότητας του λογισμικού. Ο τελικός στόχος είναι ο εντοπισμός και η διόρθωση τυχόν σφαλμάτων. Μπορείτε να πραγματοποιήσετε διαφορετικούς τύπους δοκιμών σε αυτό το στάδιο και μόλις ο κώδικας περάσει τις δοκιμές, είναι έτοιμος για ανάπτυξη.
  4. Ανάπτυξη: Αυτό το στάδιο αυτοματοποιεί τη διαδικασία ανάπτυξης στο περιβάλλον παραγωγής.

Ο αγωγός θα πρέπει να παρακολουθεί κάθε στάδιο για να διασφαλίσει ότι δεν υπάρχουν σφάλματα και να βελτιώσει ολόκληρη τη διαδικασία για μελλοντικές εκδόσεις.

Τι είναι το GitHub Actions;

Το GitHub Actions είναι μια δυνατότητα που παρέχεται από το GitHub για την αυτοματοποίηση των διαδικασιών ροής εργασίας ανάπτυξης ενός λογισμικού στις αγωγές CI/CD. Καθιστά δυνατό τον καθορισμό και την αυτοματοποίηση των ροών εργασιών ανάπτυξης απευθείας από το αποθετήριο GitHub του έργου σας.

Το GitHub Actions έχει πολλά πλεονεκτήματα:

  1. Εύκολο στη χρήση: Το GitHub Actions παρέχει μια φιλική προς το χρήστη διεπαφή και μια απλή σύνταξη για τη ρύθμιση ροών εργασιών ανάπτυξης. Μπορείτε εύκολα και γρήγορα να ορίσετε τις ροές εργασίας του έργου σας χρησιμοποιώντας τον ενσωματωμένο επεξεργαστή στο GitHub.
  2. Native Integration: Το GitHub Actions είναι μέρος του GitHub, διευκολύνοντας τη ρύθμιση, τη διαχείριση και τη συνεργασία σε ροές εργασίας παράλληλα με τον κώδικα του έργου σας.
  3. Ευέλικτο και προσαρμόσιμο: Το GitHub Actions παρέχει μια ευέλικτη και προσαρμόσιμη πλατφόρμα που διασφαλίζει ότι μπορείτε να δημιουργήσετε ροές εργασίας που ταιριάζουν στις συγκεκριμένες ανάγκες σας. Επιπλέον, υποστηρίζει πολλές γλώσσες προγραμματισμού. Δηλαδή, μπορείτε να το χρησιμοποιήσετε με όποια τεχνολογία προτιμάτε.

Ρυθμίστε ένα έργο Firebase και τον πελάτη React

Για να ξεκινήσετε, κατευθυνθείτε στο Firebase και συνδεθείτε με τον λογαριασμό σας Google. Στη σελίδα επισκόπησης της κονσόλας, κάντε κλικ Δημιουργία έργου για να δημιουργήσετε ένα νέο έργο και να δώσετε το όνομα του έργου.

Επόμενο, δημιουργήστε μια εφαρμογή React και εγκαταστήστε τα εργαλεία γραμμής εντολών Firebase:

npm install -g firebase-tools

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό Αποθετήριο GitHub.

Συνδεθείτε στο Firebase από το τερματικό σας χρησιμοποιώντας τα διαπιστευτήρια του λογαριασμού σας Firebase.

Είσοδος firebase: ci

Αυτό θα ενεργοποιήσει τη ροή ελέγχου ταυτότητας Firebase, η οποία θα σας ζητήσει να εισαγάγετε τα στοιχεία σύνδεσής σας εάν δεν είστε ήδη συνδεδεμένοι. Μόλις το Firebase ελέγξει την ταυτότητα σας, θα εκτυπώσει ένα διακριτικό. Αντιγράψτε αυτό το διακριτικό. θα το χρησιμοποιήσετε για να εκτελέσετε εντολές Firebase στη ρύθμιση των ενεργειών GitHub.

Τέλος, δημιουργήστε μια έκδοση της εφαρμογής σας έτοιμη για παραγωγή:

npm εκτέλεση κατασκευής

Αυτή η εντολή δημιουργεί τα απαραίτητα αρχεία και στοιχεία, μέσα σε έναν νέο φάκελο «build» στον ριζικό κατάλογο, που απαιτούνται για την ανάπτυξη της εφαρμογής.

Αρχικοποιήστε το Firebase στην εφαρμογή React σας

Εκτελέστε αυτήν την εντολή για να αρχικοποιήσετε το Firebase στον φάκελο του έργου σας:

firebase init

Στη συνέχεια, επιβεβαιώστε ότι θέλετε να αρχικοποιήσετε το Firebase στο έργο σας και προχωρήστε και επιλέξτε Φιλοξενία: Διαμόρφωση αρχείων για το Firebase Hosting και (προαιρετικά) ρύθμιση ανάπτυξης GitHub Actionαπό τη λίστα επιλογών.

Καθορίστε ότι θέλετε να χρησιμοποιήσετε ένα υπάρχον έργο και επιλέξτε το όνομα του έργου που δημιουργήσατε αρχικά στην κονσόλα προγραμματιστή του Firebase.

Στη συνέχεια, καθορίστε το φάκελο "build" ως το δημόσιο κατάλογο, επιλέξτε Οχι για να ξαναγράψετε όλες τις διευθύνσεις URL στην επιλογή /index.html, επιλέξτε Οχι στην επιλογή ρύθμισης αυτόματων εκδόσεων και ανάπτυξης από το GitHub και, τέλος, Επιλέξτε Ναί για να αντικαταστήσετε την επιλογή αρχείου build/index.html.

Αφού κάνετε τις παραπάνω αλλαγές, το CLI θα δημιουργήσει ένα αρχείο firebase.json στον ριζικό κατάλογο. Αυτό το αρχείο περιέχει όλες τις ρυθμίσεις παραμέτρων φιλοξενίας που θα απαιτήσει η ροή εργασίας GitHub Actions.

Τέλος, πριν ρυθμίσετε τη ροή εργασίας GitHub Actions, δημιουργήστε ένα αποθετήριο στο GitHubκαι σπρώξτε τα αρχεία του έργου σε αυτό.

Ρύθμιση ενεργειών GitHub

Στο αποθετήριο του έργου σας στο GitHub, επιλέξτε Ρυθμίσεις > Μυστικά και Μεταβλητές > Ενέργειες. Στη μυστική σελίδα του αποθετηρίου, πληκτρολογήστε FIREBASE_TOKEN ως όνομα του μυστικού και επικολλήστε το διακριτικό Firebase που αντιγράψατε στο Μυστικά χωράφια.

Ρυθμίστε τη ροή εργασίας ανάπτυξης

Κάντε κλικ στην καρτέλα Ενέργειες στο αποθετήριο του έργου σας και επιλέξτε Διαμόρφωση Nodejs ροή εργασιών στο Συνεχής ενσωμάτωση Ενότητα.

Στη συνέχεια, μετονομάστε το όνομα του αρχείου σε firebase.yml, διαγράψτε τον κωδικό του boilerplate στο πρόγραμμα επεξεργασίας και προσθέστε τον παρακάτω κώδικα:

# Αυτή η ροή εργασίας θα πραγματοποιήσει μια καθαρή εγκατάσταση εξαρτήσεων κόμβων,
# προσωρινή αποθήκευση/επαναφορά τους, κατασκευή του πηγή κωδικοποιήστε και εκτελέστε δοκιμές σε διάφορα
# εκδόσεις του κόμβου
# Για περισσότερες πληροφορίες δείτε:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
όνομα: Firebase CI


επί:
 Σπρώξτε:
 υποκαταστήματα: [ κύρια ]
 pull_request:
 υποκαταστήματα: [κύριος]


θέσεις εργασίας:
 χτίζω:


 runs-on: ubuntu-latest


 στρατηγική:
 μήτρα:
 κόμβος-έκδοση: [14.x]

 βήματα:
 - χρήσεις: actions/checkout@v2
 - name: Χρησιμοποιήστε το Node.js ${{ matrix.node-version }}
 χρήσεις: actions/setup-node@v1
 με:
 node-version: ${{ matrix.node-version }}
 - εκτέλεση: npm εγκατάσταση -g npm
 - όνομα: npm εγκατάσταση, κατασκευή και δοκιμή
 τρέξιμο: |
 npm εγκατάσταση
 npm εκτέλεση κατασκευής
 - όνομα: Δημιουργία αρχείου
 χρήσεις: actions/upload-artifact@v2
 με:
 όνομα: κατασκευή
 μονοπάτι: κατασκευή

 αναπτύσσω:
 όνομα: Ανάπτυξη
 ανάγκες: κατασκευή
 runs-on: ubuntu-latest
 βήματα:
 - χρήσεις: actions/checkout@v2
 - όνομα: Λήψη Build
 χρήσεις: actions/download-artifact@v2
 με:
 όνομα: κατασκευή
 μονοπάτι: κατασκευή
 - όνομα: Ανάπτυξη στο Firebase
 χρησιμοποιεί: w9jds/firebase-action@master
 με:
 args: ανάπτυξη --μόνο φιλοξενία
 env:
 FIREBASE_TOKEN: ${{ μυστικά. FIREBASE_TOKEN }}

Ακολουθούν μερικές από τις βασικές ιδιότητες που εξηγούνται:

  1. Επί: Συμβάντα που ενεργοποιούν τις ενέργειες σε αυτήν τη ροή εργασίας.
  2. Θέσεις εργασίας: Καθορίζει τις εργασίες που πρέπει να εκτελεστεί μια συγκεκριμένη ενέργεια. Σε αυτήν την περίπτωση, υπάρχουν δύο εργασίες: κατασκευή και ανάπτυξη.
  3. Εκτελούνται: το μηχάνημα στο οποίο πρέπει να εκτελεστεί αυτή η ενέργεια.
  4. Βήματα: Καθορίζει μια ακολουθία βημάτων για την εκτέλεση της Ενέργειας για μια συγκεκριμένη εργασία.
  5. Με: Καθορίζει τυχόν ορίσματα που απαιτούνται από τις Ενέργειες για εκτέλεση.
  6. Ονομα: Όνομα ενός συγκεκριμένου βήματος για μια θέση εργασίας.

Τέλος, πραγματοποιήστε τις αλλαγές που έγιναν σε αυτό το αρχείο. Το GitHub θα ενεργοποιήσει αυτόματα αυτήν τη ροή εργασίας, δημιουργώντας και αναπτύσσοντας την εφαρμογή React στην υπηρεσία φιλοξενίας του Firebase. Μπορείτε να ελέγξετε για τη ζωντανή διεύθυνση URL της εφαρμογής στα αρχεία καταγραφής ανάπτυξης.

Ανάπτυξη εφαρμογών με χρήση ενεργειών GitHub

Το GitHub Actions παρέχει μια βελτιωμένη προσέγγιση ανάπτυξης. Διασφαλίζει ότι μπορείτε να αναπτύξετε εφαρμογές με συνέπεια και αξιοπιστία, ανεξάρτητα από την τεχνολογία στην οποία τις κατασκευάζετε.

Επιπλέον, μπορείτε εύκολα να προσαρμόσετε τη ροή εργασιών ανάπτυξης χρησιμοποιώντας τα ενσωματωμένα εργαλεία ανάπτυξης για να καλύψετε τις συγκεκριμένες ανάγκες σας για τη διοχέτευση CI/CD.