Υπάρχουν 2 πιο δημοφιλείς πλατφόρμες σήμερα για τη φιλοξενία στατικών ιστοτόπων: Netlify και Google App Engine (GAE)

Το Netlify απέκτησε μεγάλη δημοτικότητα πρόσφατα επειδή παρέχει ολοκληρωμένη εμπειρία με την κατασκευή και την ανάπτυξη στατικών ιστότοπων - όλοι στην ίδια πλατφόρμα

Η GAE είναι πιο ευέλικτη από την άποψη ότι υποστηρίζει και μη στατικές ιστοσελίδες, αλλά σίγουρα δεν έχει το επίπεδο ενοποίησης που παρέχει η Netlify. Γιατί λοιπόν θα εξακολουθούσα να χρησιμοποιώ το GAE σε πολλές περιπτώσεις; Η απάντηση είναι απλή - συχνά η GAE παρέχει καλύτερες επιλογές τιμολόγησης. Ταυτόχρονα, σας επιτρέπει να έχετε όλες τις δυνατότητες του Netlify και πολλά άλλα χρησιμοποιώντας λίγα απλά εργαλεία (GitHub Actions και Reliza Hub) που θα περιγράψω σε αυτό το άρθρο

 Τιμολόγηση
Επιτρέψτε μου να καλύψω πρώτα τα σενάρια τιμολόγησης όταν ο συνδυασμός GAE + GitHub Actions έχει πιο νόημα. Το βασικό σημείο είναι τα λεπτά κατασκευής. Η δωρεάν βαθμίδα του Netlify δίνει μόνο 300 λεπτά κατασκευής το μήνα, κάτι που δεν είναι πολύ για κανέναν λογαριασμό. Εάν χρησιμοποιείτε κάτι σαν το node.js app made static και οι εκδόσεις σας χρειάζονται 2-3 λεπτά κατά μέσο όρο, λαμβάνετε μόνο περίπου 100+ εκδόσεις το μήνα στο Netlify, κάτι που μπορεί εύκολα να μην είναι αρκετό. Ειδικά αν έχετε περισσότερους από έναν ιστότοπους

Εάν χρειάζεστε περισσότερα λεπτά κατασκευής στο Netlify, είτε πληρώστε 7 $ ανά 500 επιπλέον λεπτά είτε μετακινηθείτε στο επόμενο επίπεδο που περιλαμβάνει 1000 λεπτά, αλλά κοστίζει 45 $/μήνα. Από την άλλη, στο GitHub Actions λαμβάνετε 2000 λεπτά δημιουργίας δωρεάν για ιδιωτικά αποθετήρια και απεριόριστα λεπτά κατασκευής για δημόσια. Ας υποθέσουμε ότι δημιουργείτε έναν ιστότοπο τεκμηρίωσης και αποφασίζετε να τον κάνετε δημόσια στο GitHub. λαμβάνετε απεριόριστα λεπτά δημιουργίας στο GitHub Actions και αυτό κάνει τεράστια διαφορά

Το επόμενο ζήτημα είναι το κόστος κυκλοφορίας. Το Netlify παρέχει έξοδο εύρους ζώνης 100 GB ανά μήνα που περιλαμβάνεται στη δωρεάν βαθμίδα του, κάτι που είναι γενναιόδωρο. Η Google προσφέρει δωρεάν έξοδο 1 GB ανά ημέρα, γεγονός που το κάνει περίπου 30 GB το μήνα. Έτσι, εάν η έξοδος σας είναι μεταξύ 30 GB και 100 GB, μπορεί να έχετε καλύτερη προσφορά στο Netlify. Ωστόσο, μόλις ξεπεράσετε τα 100 GB, το Netlify σας χρεώνει 20 $ για τα επόμενα 100 GB αυτόν τον μήνα αμέσως. Η Google έχει πολιτική τιμολόγησης ανά έξοδο GB που κοστίζει 0,12 $. Αυτό σημαίνει ότι πληρώνετε 12 $/100 GB έναντι 20/100 GB στο Netlify

Έτσι, ανάλογα με την κίνηση, μπορεί να είστε καλύτεροι είτε στο Netlify είτε στο GAE από την προοπτική εξόδου. Αλλά σε πολλές περιπτώσεις η GAE θα παρείχε καλύτερη αξία και εδώ
Τελευταία λέξη για την τιμολόγηση. Εάν χρησιμοποιείτε κάτι όπως το GitHub Actions ή το CircleCI για τις εκδόσεις σας, θα μπορούσατε ακόμα να αναπτύξετε στο Netlify. Πιο ευέλικτο σύστημα GitHub Actions

 Διαμόρφωση Google App Engine Project
Ξεκινάμε μεταβαίνοντας στη διεύθυνση httpsconsole.cloud.google.com/appengine και δημιουργούμε ένα νέο έργο. Εάν είχατε ήδη ένα, κάντε πρώτα κλικ στο όνομα του έργου σας στην κορυφή και μετά κάντε κλικ στο
**ΝΕΟ ΕΡΓΟ**

Εισαγάγετε το όνομα του έργου, σημειώστε εδώ το αναγνωριστικό έργου που λαμβάνετε (θα το χρειαστείτε αργότερα) ñ στην περίπτωσή μου είναι
*âÃÂÃÂevie-landing-tutorialâÃÂÃÂ* âÃÂàκαι κάντε κλικ στο **ΔΗΜΙΟΥΡΓΙΑ Στη συνέχεια μεταβείτε στο αυτό το έργο από τον επιλογέα έργου στο επάνω μέρος της σελίδας

Κάντε κλικ στο
**Δημιουργήστε Εφαρμογή** και επιλέξτε την περιοχή που θέλετε. Στη συνέχεια, για στατική εφαρμογή επιλέξτε Python και Standard περιβάλλον (το δωρεάν επίπεδο ισχύει μόνο για το Standard περιβάλλον). Σε αυτό το σημείο η αίτησή σας είναι έτοιμη για τα επόμενα βήματα

Για να κατευθύνετε το όνομα τομέα σας σε αυτήν την εφαρμογή, μεταβείτε στη διεύθυνση httpsconsole.cloud.google.com/appengine/settings/domains

και κάντε κλικ
**Προσθήκη προσαρμοσμένου τομέα Ακολουθήστε τις οδηγίες και τοποθετήστε το DNS από τον τομέα σας στις παρεχόμενες εγγραφές της Google. Όταν γίνει αυτό, η Google θα κατευθύνει αυτόματα τον τομέα σας σε αυτήν την εφαρμογή και θα διαχειρίζεται επίσης το πιστοποιητικό SSL

Τέλος, πρέπει να προετοιμάσουμε λογαριασμό υπηρεσίας που θα είναι υπεύθυνος για τις αυτόματες αναπτύξεις. Μεταβείτε στη διεύθυνση httpsconsole.cloud.google.com/iam-admin/serviceaccounts?project=your_project_id (αντικαταστήστε
*your_project_id *σε αυτόν τον σύνδεσμο με το πραγματικό αναγνωριστικό του έργου σας, στην περίπτωσή μου αυτό θα ήταν *evie-landing-tutorial Θα μεταβείτε στην ακόλουθη σελίδα μενού:
Κάντε κλικ στο εικονίδιο με τις 3 κουκκίδες στη στήλη Ενέργειες κοντά στον προεπιλεγμένο λογαριασμό υπηρεσίας του App Engine. Και επιλέξτε
Επιλογή **Δημιουργία κλειδιού** από το αναπτυσσόμενο μενού

Επιλέξτε JSON ως τύπο κλειδιού και κάντε κλικ
**ΔΗΜΙΟΥΡΓΙΑ Αυτό θα κατεβάσει το αρχείο .json στον υπολογιστή σας. Το τελευταίο πράγμα που πρέπει να κάνουμε εδώ είναι να κωδικοποιήσουμε αυτό το αρχείο σε μορφή base64 - θα το χρειαστούμε αργότερα όταν μεταβούμε στο GitHub Actions

Αυτό μπορεί να γίνει χρησιμοποιώντας τη γραμμή εντολών ως εξής:
base64 your_json_file.json >key.base64
Τότε το αρχείο key.base64 θα έχει το κωδικοποιημένο κλειδί base64

**Σημείωση ασφαλείας εδώ, αυτά τα αρχεία κλειδιών json και base64 επιτρέπουν τον έλεγχο του έργου GAE, επομένως αφού τα προσθέσετε στο GitHub Actions (όπως θα δείξω παρακάτω), συνιστάται να τεμαχίσετε διαγράψτε αυτά τα αρχεία. Αυτό μπορεί να γίνει από το cli ως εξής:
τεμαχίστε το όνομα_αρχείου_κλειδιού&& rm κλειδί_όνομα_αρχείου
Μόλις ληφθεί το κλειδί, πρέπει να ενεργοποιήσουμε τα API του Google App Engine âÃÂàγια να το κάνετε, επισκεφθείτε τη σελίδα httpsconsole.developers.google.com/apis/api/appengine .googleapis.com/overview και κάντε κλικ
**ΕΠΙΤΡΕΠΩ**

 Ρύθμιση του αποθετηρίου GitHub και των ενεργειών GitHub
Τέλος, ήρθε η ώρα να προετοιμάσουμε το αποθετήριο GitHub. Αυτό το σεμινάριο καλύπτει τη ρύθμιση του θέματος Evie από την Undraw. (Αυτό είναι το θέμα που χρησιμοποιώ αυτήν τη στιγμή για τη σελίδα προορισμού Reliza Hub!) Το αρχικό θέμα Evie φιλοξενείται εδώ, αλλά θα χρησιμοποιήσω το πιρούνι του Reliza σε αυτό το αποθετήριο

Όπως ανέφερα ήδη σε άλλα άρθρα, η φιλοσοφία κατασκευής μου αυτές τις μέρες είναι να δεσμεύω τα πάντα και να τα χρησιμοποιώ
docker build ως ενοποιημένο περιβάλλον κατασκευής CI σε πολλές πλατφόρμες. Επομένως, πρόσθεσα το Dockerfile, τη διαμόρφωση nginx και επίσης ενημέρωσα τις εκδόσεις npm σε σχέση με το αρχικό θέμα Evie για να έχω μια λειτουργική έκδοση με dockerized

Τώρα αν το κάνουμε
εντολή build docker στα περιεχόμενα του αποθετηρίου Evie του Reliza, θα δημιουργήσει μια εικόνα βασισμένη στο nginx που θα εξυπηρετεί το θέμα Evie χωρίς τεκμηρίωση στη θύρα 80

Τώρα είναι ώρα να προετοιμάσετε το σενάριο ενεργειών GitHub. Θα χρησιμοποιήσουμε actions-hub/gcloud@master action που κάνει την όλη διαδικασία απλή

Ξεκινάμε ορίζοντας 2 μυστικά GitHub Actions που απαιτούνται για τη δράση. Μεταβείτε στις Ρυθμίσεις ->Μυστικά μέσα στο αποθετήριο GitHub και κάντε κλικ
**Νέο μυστικό** για να ορίσετε τα ακόλουθα 2 μυστικά:
- GCLOUD_PROJECT_ID âÃÂàτο όρισε στο αναγνωριστικό έργου που σημειώθηκε όταν δημιουργούσατε το έργο σας: evie-landing-tutorial στην περίπτωσή μου

- GOOGLE_APPLICATION_CREDENTIALS âÃÂàορίστε το στα περιεχόμενα του αρχείου κλειδιού json με κωδικοποίηση base64 που αποκτήθηκε για τον λογαριασμό υπηρεσίας Google παραπάνω

Τώρα στο αποθετήριο δημιουργώ τον κατάλογο .github και μετά τον κατάλογο ροών εργασιών μέσα σε αυτόν. Και μέσα σε αυτό δημιουργώ το gae_build.yml. Επίσης πρέπει να προσθέσουμε αρχείο app.yaml που περιέχει διαμόρφωση GAE και θα ήταν πολύ απλό για την περίπτωση χρήσης στατικής εφαρμογής που έχω

Αφού πατήσετε αυτόν τον κώδικα, θα ενεργοποιήσει τη δημιουργία GitHub Actions, η οποία θα κάνει μια ανάπτυξη στην εφαρμογή σας GAE και οι υπηρεσίες σας θα γίνουν ζωντανές! Κάθε επόμενη ώθηση στο GitHub θα ενεργοποιεί αυτόματα μια νέα έκδοση του GitHub Actions και θα ενημερώνει αυτόματα την εφαρμογή στο GAE

Τώρα έχετε έτοιμο τον βασικό αγωγό CICD για τον στατικό ιστότοπό σας! Μπορείτε να σταματήσετε εδώ ή μπορείτε να συνεχίσετε να διαβάζετε πώς μπορείτε να προσθέσετε λειτουργίες προβολής έγκρισης και ανάπτυξης χρησιμοποιώντας το Reliza Hub

 BONUS: Προσθήκη εγκρίσεων και ορατότητας χρησιμοποιώντας το Reliza Hub

Ας υποθέσουμε ότι δεν θέλουμε κάθε νέα κατασκευή να πηγαίνει αυτόματα στην παραγωγή. Αντίθετα, θέλουμε να αναπτυχθούν πρώτα κάπου που δεν είναι παραγωγή και, στη συνέχεια, αν μας αρέσουν, εσείς ή ο εγκρίνοντάς σας (ας πούμε, ο διευθυντής μάρκετινγκ) πρέπει να κάνετε κλικ σε ένα κουμπί και προώθηση στην παραγωγή  Εδώ είναι πώς μπορεί να επιτευχθεί αυτό με το Reliza Hub πάνω από τη διαμόρφωση που περιέγραψα μέχρι τώρα   1 Μεταδεδομένα κυκλοφορίας ροής στο Reliza Hub Πρώτα, μεταβείτε στη διεύθυνση httpsapp.relizahub.com, ελέγξτε την ταυτότητα με το GitHub και δημιουργήστε τον οργανισμό σας, στην περίπτωσή μου θα χρησιμοποιήσω *âÃÂÃÂEvie Landing TutorialâÃÂÃÂ* ως όνομα οργανισμού. Κάντε κλικ στο στοιχείο μενού **VCS** και, στη συνέχεια, στο εικονίδιο συν-κύκλου για να προσθέσετε ένα αποθετήριο VCS  Επικολλήστε το URI του αποθετηρίου GitHub στην είσοδο και το Reliza Hub θα το αναλύσει αυτόματα  Κάντε κλικ **Υποβάλετε και αυτό θα δημιουργήσει το αποθετήριο σας. Προχωρήστε στο μενού Έργα και κάντε κλικ στο εικονίδιο συν-κύκλου για να δημιουργήσετε ένα έργο. Εισαγάγετε το όνομα του έργου σας (θα χρησιμοποιήσω το σχήμα έκδοσης *Evie Landing Set σε Single Component (Major) âÃÂàεπειδή το GAE χρησιμοποιεί τη δική του έκδοση που αποτελείται από ένα στοιχείο Âàτο οποίο θα χρησιμοποιήσουμε στο Reliza Hub ως έχει. Επιλέξτε το αποθετήριο VCS για να είναι αυτό που μόλις δημιουργήσατε στο προηγούμενο βήμα  Και κάντε κλικ **Υποβολή Αυτό θα δημιουργήσει νέο έργο. Στη συνέχεια, κάντε κλικ σε αυτό το όνομα του έργου που δημιουργήθηκε πρόσφατα και κάντε κλικ στο εικονίδιο κλειδώματος για να δημιουργήσετε το κλειδί api του έργου  Όταν δείτε το API ID και το κλειδί API που δημιουργούνται για το έργο σας, δημιουργήστε 2 νέα μυστικά στο GitHub Actions âÃÂàRELIZA_API_PROJECT_ID και RELIZA_API_PROJECT_KEY με τις αντίστοιχες τιμές  Τώρα, ήρθε η ώρα να ενημερώσουμε το σενάριο gae_build.yml για να μεταδώσετε τις λεπτομέρειες της κατασκευής σε ροή στο Reliza και επίσης να μεταβείτε στη λειτουργία χωρίς προώθηση. Αυτό σημαίνει ότι σε κάθε ώθηση git, θα δημιουργείται μια ανάπτυξη στο GAE, αλλά η Google δεν θα αλλάξει την κυκλοφορία σε αυτήν τη νέα ανάπτυξη παρά μόνο κάποιο μη αυτόματο βήμα αργότερα  Το ενημερωμένο σενάριο περιλαμβάνει αναφορές παρακολούθησης χρόνου κατασκευής στο Reliza Hub και θα έχει επίσης URI για κάθε μη προωθούμενη ανάπτυξη στο GAE. Μπορείτε να βρείτε την περιγραφή των διαφόρων σημαιών που χρησιμοποιούμε στο αποθετήριο GitHub του Reliza Go Client  Αφού ολοκληρωθεί το GitHub Actions κατά την ώθηση, μπορείτε να πλοηγηθείτε στη σελίδα της κυκλοφορίας σας στο Reliza Hub και να δείτε την ακόλουθη εικόνα:  Σημειώστε ότι κάνοντας κλικ στο Ο σύνδεσμος **Τελικό σημείο δοκιμής** θα σας μεταφέρει στην πραγματική έκδοση ανάπτυξης στο GAE που αντιστοιχεί σε αυτήν την καταχώριση πηγαίου κώδικα, αλλά δεν έχει ακόμη προωθηθεί για την εξυπηρέτηση της κυκλοφορίας  Μπορείτε επίσης να προσθέσετε slack ενσωμάτωση ακολουθώντας τον οδηγό εδώ για να λαμβάνετε ειδοποιήσεις για κάθε νέα κυκλοφορία στο Reliza Hub   2 Προσθήκη εγκρίσεων Μεταβείτε στη σελίδα Ρυθμίσεις του Reliza Hub και στο κάτω μέρος της διαμορφώστε τον πίνακα έγκρισης για το περιβάλλον ΠΑΡΑΓΩΓΗΣ. Στην περίπτωσή μου, θα χρειαστώ μόνο έγκριση από το MARKETING για να προωθηθεί μια κυκλοφορία στην παραγωγή. Ως εξής:  Κάντε κλικ στο **Αποθήκευση Matrix**  Στη συνέχεια εγκαθιστώ την εφαρμογή Reliza GitHub και ακολουθώ το σεμινάριο. Έχω γράψει νωρίτερα για να το εγγράψω για το έργο  Τέλος, μια νέα ροή εργασίας GitHub Actions που θα ενεργοποιηθεί με εγκρίσεις από το Reliza Hub. Μπορείτε να το δείτε εδώ. Ουσιαστικά, αυτή η ροή εργασίας ρωτά το Reliza Hub για την πιο πρόσφατη έκδοση που έχει εγκριθεί από την παραγωγή και, στη συνέχεια, ζητά από το Google App Engine να αλλάξει την επισκεψιμότητα σε αυτήν την έκδοση  Το μόνο πράγμα που απαιτεί διαμόρφωση σε αυτό το σενάριο είναι η μεταβλητή περιβάλλοντος RELIZA_PROJECT_ID âÃÂÃÂ, η οποία πρέπει να οριστεί σε UUID προβολής που λαμβάνεται στη σελίδα του έργου στο Reliza Hub:  Τώρα, η τελευταία έκδοση του έργου με έγκριση από το MARKETING θα προωθείται αυτόματα από την πλευρά του Google App EngineΓια λεπτομέρειες, πώς μπορείτε να προσθέσετε εγκρίσεις στον οργανισμό, παρακολουθήστε το εκπαιδευτικό μου βίντεο σχετικά με τις εγκρίσεις3 âÃÂàΠροσθήκη ορατότητας για το τι αναπτύσσεται ότανΤέλος, θέλουμε να προσθέσουμε ορατότητα στο Reliza Hub ως προς το ποια έκδοση αναπτύσσεται πραγματικά και πότεΓια να το κάνετε αυτό, μεταβείτε πρώτα στις Παρουσίες στο Reliza Hub και κάντε κλικ στο εικονίδιο συν-κύκλου για να δημιουργήσετε νέα instanceΣτη συνέχεια εισάγω το URI της παρουσίας μου και επιλέγω το περιβάλλον να είναι PRODUCTION âÃÂàαφού έχω μόνο περιβάλλον παραγωγής σε αυτόν τον στατικό ιστότοπο.Κάνοντας κλικ στο**Υποβολή** δημιουργεί το νέο μου στιγμιότυποΣτη συνέχεια επιλέγω αυτό το στιγμιότυπο που δημιουργήθηκε πρόσφατα και κάνω κλικ στο εικονίδιο κλειδώματος για να δημιουργήσω το κλειδί apiΌταν δημιουργηθούν το αναγνωριστικό API και το κλειδί API, δημιουργήστε 2 νέα μυστικά στις Ενέργειες GitHub ñ RELIZA_API_INSTANCE_ID και RELIZA_API_INSTANCE_KEY με τις αντίστοιχες τιμέςΜε αυτό ενημερώνω πρώτα το σενάριο ανάπτυξης κατά την έγκριση για να προσθέσω ενότητα για να ελέγξω για ανάπτυξη στο GAE και να το μεταδώσω στο Reliza Hub.Και προσθέτω επίσης μια ροή εργασίας Cron GitHub Actions για να επαληθεύσω την κατάσταση της εφαρμογής GAE μουΜετά την εκτέλεση οποιασδήποτε από αυτές τις ροές εργασίας, θα λάβουμε το στιγμιότυπο ανάπτυξης της εφαρμογής GAE στο Το Reliza Hub στην περίπτωσή μας προβάλλει ως εξής:ΠερίληψηΑυτό είναι, τώρα έχουμε μια πλήρη γραμμή CI CD με κουμπιά με GitHub Actions που αναπτύσσονται στο GAE και εγκρίσεις και ορατότητα διαχειρίζεται η Reliza Hub.Μπορούμε επίσης να έχουμε ειδοποιήσεις Slack και τον υπεύθυνο μάρκετινγκ να βλέπει τις αλλαγές και να πατά κουμπιά για να τις προωθήσει στην παραγωγή χωρίς να ρωτήσει το τεχνικό προσωπικό.Πόσο ωραίο είναι αυτό;
Εάν θέλετε να μιλήσετε μαζί μου και να συζητήσετε περαιτέρω αυτήν ή άλλη ροή εργασίας, κάντε κράτηση για μια επίδειξη διάρκειας 30 λεπτών χωρίς συμβολοσειρές του Reliza Hub, καλέστε με. ÃÂ και θα προσπαθήσω όσο μπορώ να βοηθήσω.