Azure Static Web Apps with GitHub Actions

Στον κόσμο του Cloud, έχουμε μυηθεί στη λέξη «Serverless». Μια Αρχιτεκτονική χωρίς διακομιστή επιτρέπει σε μια εφαρμογή να εκτελεί και να εκτελεί εργασίες μέσω κώδικα, χωρίς την πραγματική ανάγκη ενός διακομιστή όπως τον ξέρουμε.

Μια τέτοια υπηρεσία μπορεί να εξοικονομήσει κόστος και χρόνο ανάπτυξης, να κάνει τη διαχείριση και τη συντήρηση πολύ πιο εύκολη και γρήγορη, προσφέροντας μεγάλη επεκτασιμότητα και διαθεσιμότητα και μεταφέρει τις διαδικασίες ανάπτυξής μας σε ένα εντελώς νέο στάδιο. Όπως διαβάζουμε από την Τεκμηρίωση της Microsoft, οι Azure Static Web Apps είναι μια υπηρεσία που δημιουργεί και αναπτύσσει αυτόματα εφαρμογές web πλήρους στοίβας στο Azure από ένα αποθετήριο κώδικα.

Για μια ανάπτυξη Azure Static Web App εκτός από τον κώδικά μας, χρειαζόμαστε μια συνδρομή Azure και GitHub ή Azure Devops για να ξεκινήσουμε τη δημιουργία! Σε αυτό το εργαστήριο θα αναπτύξουμε έναν απλό ιστότοπο HTML με τη χρήση των Azure Static Web Apps και του GitHub, θα εκχωρήσουμε τον προσαρμοσμένο τομέα μας και θα περπατήσουμε στις επιλογές διαμόρφωσης μιας Static Web App.

Αυτό που χρειαζόμαστε:

Συνδρομής Azure
Λογαριασμός Github και ένα αποθετήριο
Visual Studio Code (ή το αγαπημένο σας πρόγραμμα επεξεργασίας πηγαίου κώδικα) με εγκατεστημένες τις ακόλουθες επεκτάσεις:

Azure Account, Azure Static Web Apps, Azure Resources or Azure Tools

Επίσης, οι επεκτάσεις Git ή το Github Desktop είναι εγκατεστημένα στον υπολογιστή σας.

Προετοιμασία

Εγκαταστήστε την επέκταση Azure Tools που περιλαμβάνει Azure Static Web Apps:

Μόλις είστε έτοιμοι ξεκινήστε προσθέτοντας ένα νέο κενό repo στο Github και κλωνοποιήστε το απευθείας από το VS Code.

Ανοίξτε τον Κώδικα VS και από το Source Control επιλέξτε για να κλωνοποιήσετε το Repo που δημιουργήσαμε νωρίτερα στο GitHub:

Μόλις επιλέξετε κλωνοποίηση, η Επιλογή "Κλωνοποίηση από το GitHub" θα εμφανιστεί στη Γραμμή εντολών και κάνοντας κλικ σε αυτήν θα εμφανιστούν όλα τα Repos σας. Επιλέξτε αυτό που δημιουργήσαμε.

Τώρα ας δημιουργήσουμε μια Στατική εφαρμογή Ιστού!

Ανάπτυξη

Από το εικονίδιο Azure στο VS Code (επέκταση λογαριασμού Azure) μπορούμε να δούμε την επιλογή στατικών εφαρμογών:

Συνεχίστε και δημιουργήστε την εφαρμογή επιλέγοντας την επιλογή Για προχωρημένους. Εισαγάγετε τις τιμές σας, επιλέξτε Ομάδα πόρων, όνομα της Στατικής εφαρμογής, το Δωρεάν επίπεδο για Στατικές Εφαρμογές, την περιοχή, επιλέξτε Προσαρμοσμένο για το πλαίσιο, αφήστε / για τη θέση της Στατικής εφαρμογής, διαγράψτε το api και διαγράψτε τις ρυθμίσεις κατασκευής στο 7ο και 8ο βήμα και το τελικό Το Enter θα ξεκινήσει τη δημιουργία της εφαρμογής, όπου μπορούμε να δούμε στο Azure Portal σε σύντομο χρονικό διάστημα.

Είναι καιρός να προσθέσουμε περιεχόμενο στην εφαρμογή μας και να το αναπτύξουμε! Ας ξεκινήσουμε δημιουργώντας ένα απλό αρχείο index.html και αντιγράψουμε μια εικόνα στο φάκελο του τοπικού μας αποθετηρίου, όπου θα δεσμεύσουμε και θα σπρώξουμε και θα τραβήξουμε, για να ενεργοποιήσουμε τη ροή εργασίας Git Hub Actions. Να θυμάστε πάντα Αποθηκεύστε πρώτα τα αρχεία σας!

Sample index.html :

<!DOCTYPE html>
<html>
<body>
<h1>Static App with GIT Actions</h1>
<h2>Images</h2>
<img src="image303.jpg" alt="Image" width="500" height="333">

</body>
</html>

Προσθέστε επίσης μια εικόνα στο τοπικό κλωνοποιημένο Repo με το όνομα αρχείου που δηλώνετε στο HTML.

Αποθηκεύστε τις αλλαγές και επιλέξτε Commit & Push και πληκτρολογήστε ένα μήνυμα για να επισημάνετε τη συγκεκριμένη ενέργεια σας, εδώ γράψαμε "Αρχείο ευρετηρίου" για να επισημάνουμε το βήμα δημιουργίας του αρχείου.

Αμέσως θα επιλέξουμε το Pull for Git Hub Actions για να ξεκινήσουμε τη ροή εργασίας στατικής εφαρμογής και να αναπτύξουμε στο Azure τη νέα κατάσταση.

Μόλις επιλέξουμε pull και πάμε στο Azure Static App, θα δούμε τα Commits μέχρι στιγμής με τα μηνύματα (Εδώ είχαμε γράψει Set1 & Set2) και τα Actions που ανέπτυξαν τον κώδικα στο Azure.

Επιλέξτε περιήγηση και εκεί έχετε τη Στατική εφαρμογή σας:

Μπορούμε να προσθέσουμε περισσότερο περιεχόμενο με αρχεία και φακέλους, για έναν σωστό ιστότοπο HTML, καθώς και να προσθέσουμε τον προσαρμοσμένο τομέα μας απευθείας από το Azure Portal.

Custom Domain

Από το Azure Management Portal επιλέξτε τη Static App που μόλις δημιουργήσατε και θα δείτε τη ρύθμιση Custom Domain. Είναι μια απλή διαδικασία όπου μπορείτε να προσθέσετε μια εγγραφή TXT ή CNAME στη ζώνη προσαρμοσμένου DNS ή Azure DNS.

Συνήθως η επικύρωση θα διαρκέσει μερικά λεπτά και μπορείτε να επαληθεύσετε τη διεύθυνση URL όταν ολοκληρωθεί με επιτυχία.

Περισσότερο Περιεχόμενο

Αυτό το παράδειγμα είναι πολύ απλό, αλλά ακόμη και ένας στατικός ιστότοπος HTML θα έχει μερικούς επιπλέον καταλόγους, συνδέσμους και εικόνες. Το Azure Static Web Apps προσφέρει έναν μεγάλο αριθμό επιλογών διαμόρφωσης και μόλις αρχίσετε να παίζετε, θα δείτε γιατί είναι μια εξαιρετική επιλογή να φιλοξενείτε τους ιστότοπούς σας!

Η διαμόρφωση που πρέπει να αναπτύξουμε βασίζεται σε ένα απλό αρχείο, επομένως επιστρέψτε στον κώδικα VS και προσθέστε το αρχείο staticwebapp.config.json στον κατάλογο ανάπτυξης, σε αυτήν την περίπτωση τον ριζικό του Ρεπό.

Αυτό το αρχείο ελέγχει:

Routing
Authentication
Authorization
Fallback rules
HTTP response overrides
Global HTTP header definitions
Custom MIME types
Networking

Ας προσπαθήσουμε να προσθέσουμε έναν φάκελο στο Repo μας, με το όνομα static με ένα index.html. Θα δούμε ότι ό,τι πληκτρολογήσουμε στη διεύθυνση URL, λαμβάνουμε ένα σφάλμα πίσω. Πρέπει να ορίσουμε τη δρομολόγηση στο αρχείο που μόλις προσθέσαμε για να εμφανιστούν πρόσθετες διαδρομές, οπότε επειδή είναι αρχείο json προσθέτουμε τον ακόλουθο κώδικα:

{
  "routes": [
    {
      "route": "/static*",
      "rewrite": "/static/index.html"
      
    }
  ],
    "navigationFallback": {
      "rewrite": "/index.html"
    }
}

Το αρχείο καθορίζει τη νέα διαδρομή φακέλου που προστέθηκε και όταν υποβάλλεται αίτημα στον φάκελο, το index.html εμφανίζεται στο πρόγραμμα περιήγησής μας (rewrite). Επίσης, σε οποιοδήποτε λάθος url, ή μη υπάρχουσα διαδρομή, εμφανίζεται το κύριο αρχείο index.html στην πρώτη σελίδα του Site μας!

Συνεχίστε και προσθέστε ένα απλό html κάτω από τον στατικό φάκελο, με το όνομα index.html και μια εικόνα στον ριζικό φάκελο:

<!DOCTYPE html>
<html>
<body>

<h1>Another Page</h1>
<img src="apps.jpg" alt="Image2" width="500" height="333">
</body>
</html>

Δέσμευση και ώθηση, συγχρονισμός αλλαγών και Τραβήξτε για να εμπλακούν οι Ενέργειες και ο Ιστότοπός μας τώρα έχει αρχίσει να δημιουργείται!

Παρόμοιες διαδρομές μπορούν να προστεθούν στο αρχείο staticwebapp.config.json καθώς και πρόσθετες παράμετροι για τον εμπλουτισμό της εφαρμογής Static Web. Μπορείτε επίσης να παρακολουθήσετε τις Ενέργειες Git κατά τη δημιουργία της εφαρμογής Static Web και να ελέγξετε τις ροές εργασίας. απλώς μεταβείτε στο Git Hub και επιλέξτε Ενέργειες στο Repo σας:

Θα επιστρέψουμε με την ενσωμάτωση του Azure Front Door, ώστε να μπορέσουμε να αναπτύξουμε το δικό μας πιστοποιητικό και να ενισχύσουμε την ασφάλεια της εφαρμογής Static Web μας, καθώς και να προσθέσουμε ένα API για να αξιοποιήσουμε στο έπακρο έναν απλό ιστότοπο!

Αναφορές: