Πώς να αναπτύξετε συνεχώς έναν στατικό ιστότοπο με χρήση των GitHub και AWS

Σε αυτή την ανάρτηση πρόκειται να μάθουμε πώς να χρησιμοποιούμε το AWS CodePipeline και το CodeDeploy για την αυτόματη ανάκτηση του πηγαίου κώδικα για μια στατική ιστοσελίδα από το GitHub και την ανάπτυξη αυτού του ιστότοπου στο S3.

Θα ρυθμίσουμε την εγκατάσταση ώστε να συμβεί σε οποιαδήποτε νέα δέσμευση στον κύριο μας κλάδο.

Ξεκινάμε δημιουργώντας έναν αγωγό κώδικα με ένα στάδιο πηγής συνδεδεμένο με το αποθετήριο GitHub. Όταν μια νέα δέσμευση πιέζεται στο κύριο κατάστημά μας, ο αγωγός ελέγχει αυτόματα τον τελευταίο κώδικα. Στη συνέχεια, μπορούμε να ενεργοποιήσουμε ένα βήμα κατασκευής στον αγωγό μας. Αυτό το βήμα μπορεί να εγκαταστήσει εξαρτήσεις, να εκτελέσει δοκιμές και να συσκευάσει τον ιστότοπό μας για ανάπτυξη. Το τελευταίο μας βήμα μεταφέρει στη συνέχεια τον στατικό ιστότοπό μας στον Στατικό ιστό ιστοτόπου S3.

Τώρα που ξέρουμε τι πρόκειται να οικοδομήσουμε, ας πηδήξουμε και να μάθουμε ακόμα περισσότερα, οικοδομώντας το έξω.

AWS CodePipeline Προϋποθέσεις

Για να αντέξουμε ένα AWS CodePipeline στον λογαριασμό μας που επικοινωνεί με το αποθετήριο GitHub μας, υπάρχουν ορισμένες προϋποθέσεις που πρέπει να προσέξετε.

  1. Πρέπει να έχετε ήδη δημιουργήσει έναν λογαριασμό AWS.
  2. Πρέπει να έχετε ρυθμίσει την πρόσβαση CLI για το λογαριασμό σας.
  3. Ο στατικός ιστότοπός σας θα πρέπει ήδη να φιλοξενείται από το AWS S3. Αν όχι, δείτε αυτό το σύνδεσμο.

Ρύθμιση επικοινωνίας GitHub και AWS

Για να μπορέσει το AWS να κάνει δημοσκόπηση για αλλαγές στο κύριο κατάστημά μας στο GitHub, πρέπει να είμαστε σε θέση να δημιουργήσουμε ένα αναγνωριστικό πρόσβασης για το αποθετήριο GitHub. Μπορούμε να δημιουργήσουμε ένα προσωπικό διακριτικό πρόσβασης συμπληρώνοντας τα παρακάτω βήματα από το GitHub.

  1. Ενώ είστε συνδεδεμένοι στο GitHub, κάντε κλικ στη φωτογραφία προφίλ σας επάνω δεξιά και, στη συνέχεια, κάντε κλικ στην επιλογή Ρυθμίσεις.
  2. Αριστερά, κάντε κλικ στην επιλογή Ρυθμίσεις προγραμματιστή.
  3. Αριστερά, κάντε κλικ στην επιλογή Δημόσιες προσφορές.
  4. Κάντε κλικ στο Δημιουργία νέου διακριτικού και εισαγάγετε AWSCodePipeline για το όνομα.
  5. Για δικαιώματα, επιλέξτε repo.
  6. Κάντε κλικ στο Δημιουργία διακριτικού.
  7. Αντιγράψτε το διακριτικό κάπου έτσι ώστε να το χρησιμοποιήσουμε αργότερα.

Δημιουργώντας το χέρι μας

Το πρώτο πράγμα που πρέπει να προβλέψουμε είναι το CodePipeline. Ο αγωγός μας θα αποτελείται από δύο στάδια, ένα στάδιο πηγής που συνδέεται με το GitHub και ένα στάδιο κατασκευής που αναπτύσσει τον στατικό ιστότοπό μας.

Ας πάμε μπροστά και δημιουργούμε το CodePipeline μας μέσω της κονσόλας AWS:

  1. Πλοηγηθείτε στο CodePipeline στην κονσόλα AWS.
  2. Κάντε κλικ στην επιλογή Δημιουργία αγωγού.
  3. Καταχωρίστε ένα όνομα για τον αγωγό σας.
  4. Επιλέξτε GitHub ως τον παροχέα πηγής.
  5. Κάντε κλικ στην επιλογή Σύνδεση στο GitHub. Αυτό θα ανοίξει ένα ξεχωριστό παράθυρο όπου θα συνδεθείτε στο λογαριασμό σας στο GitHub. Αφού συνδεθείτε, πρέπει να χορηγήσετε πρόσβαση στο δίκτυο AWS CodePipeline. Αυτός είναι ο σύνδεσμος επικοινωνίας μεταξύ του GitHub repo και του CodePipeline.
  6. Επιλέξτε το αποθετήριο που θέλετε να χρησιμοποιήσετε σε αυτόν τον αγωγό.
  7. Εισαγάγετε τον κύριο ή το προεπιλεγμένο σας κλάδο στην είσοδο του Υποκαταστήματος.
  8. Κάντε κλικ στο κουμπί Επόμενο.
  9. Για τον προμηθευτή Build θα επιλέξουμε το AWS CodeBuild.
  10. Επιλέξτε Δημιουργία νέου έργου δημιουργίας.
  11. Καταχωρίστε ένα όνομα για το έργο Build.
  12. Για την εικόνα περιβάλλοντος θα χρησιμοποιήσουμε μια εικόνα που παρέχεται από το AWS CodeBuild.
  13. Επιλέξτε το Ubuntu ως λειτουργικό σύστημα.
  14. Επιλέξτε Node.js ως Runtime και nodejs: 6.3.1 ως έκδοση.
  15. Αφήστε τις προδιαγραφές κατασκευής ως την επιλογή buildspec.yml.
  16. Στην ενότητα ρόλου υπηρεσιών CodeBuild, θέλουμε να δημιουργήσουμε ένα νέο ρόλο υπηρεσίας.
  17. Εισαγάγετε ένα όνομα για το ρόλο υπηρεσίας που θα χρησιμοποιήσει το CodeBuild.
  18. Αφήστε τις υπόλοιπες τιμές στις προεπιλεγμένες ρυθμίσεις τους.
  19. Κάντε κλικ στο κουμπί Αποθήκευση δημιουργίας έργου και στη συνέχεια κάντε κλικ στο κουμπί Επόμενο
  20. Για τον παροχέα υλοποίησης δεν θέλουμε καμία ανάπτυξη.
  21. Κάντε κλικ στο κουμπί Επόμενο.

Ποιος θέλει να πατήσει κουμπιά; Οχι εγώ.

Αυτό ήταν ένα μεγάλο πλήκτρο κλικ δεξιά; Θα μπορούσατε να το κάνετε ξανά χωρίς να δείτε όλα τα 21 βήματα; Ξέρω ότι δεν μπορούσα.

Καλα ΝΕΑ! Υπάρχει ένας πολύ καλύτερος τρόπος για τη δημιουργία και τη διαχείριση των αγωγών σας κώδικα ή οποιαδήποτε AWS υποδομή για το θέμα αυτό. Μπορεί να έχετε ακούσει για τον όρο Υποδομή-ως-Κώδικας και είναι σχεδόν ακριβώς όπως ακούγεται. Αντιπροσωπεύετε την υποδομή σας ως κώδικα, ώστε να μπορείτε να δημιουργείτε, να συντηρείτε και να την καταστρέφετε χωρίς να ανοίγετε ποτέ γραφικό περιβάλλον.

Δεν υπάρχει τίποτα λανθασμένο να ξεκινάτε με το GUI εάν είστε νέοι στο AWS ή σε οποιονδήποτε νέο παροχέα σύννεφων. Αλλά θέλουμε να επιδιώξουμε την αυτοματοποίηση καθώς κλιμακώνουμε.

Υπάρχουν πολλά εργαλεία εκεί έξω που κάνουν αυτό πολύ εύκολο να το κάνουμε. Το AWS παρέχει το CloudFormation, το οποίο σας επιτρέπει να καθορίσετε τους πόρους σας μέσα στα πρότυπα JSON ή YAML.

Το CloudFormation είναι υπέροχο, αλλά υπάρχουν και άλλα εργαλεία εκεί έξω. Έχω χρησιμοποιήσει πολύ πρόσφατα Terraform. Είναι agnostic provider cloud και υποστηρίζει μια ποικιλία παρόχων μέσω ενοτήτων που αναπτύσσονται από την κοινότητα.

Για αυτήν την ανάρτηση ιστολογίου, έβαλα μαζί ένα γρήγορο πρότυπο Terraform που προβλέπει την υποδομή μας AWS.

Ας κάνουμε ένα γρήγορο ταξίδι μέσα από αυτό που κάνει αυτό το πρότυπο.

Στην κορυφή, ορίζουμε τις μεταβλητές που πρέπει να μεταφερθούν στο πρότυπο. Για την παροχή των πόρων, πρέπει να περάσουμε τα εξής:

  • όνομα του αγωγού μας
  • το όνομα χρήστη GitHub
  • το διακριτικό GitHub από προηγούμενες
  • το αποθετήριο GitHub που θέλουμε να συνδέσουμε με τον αγωγό μας

Στη συνέχεια, καθορίζουμε ότι θέλουμε να χρησιμοποιήσουμε το AWS ως παροχέα μας με την περιοχή που μεταφέρθηκε ως μεταβλητή. Όπως θα δούμε σε ένα λεπτό, αυτό φορτώνει έναν πάροχο από το Terraform που υποστηρίζει τους περισσότερους πόρους του AWS. Μπορείτε να ελέγξετε τι υποστηρίζει ο AWS πόροι Terraform εδώ.

Το επόμενο σύνολο πόρων που δημιουργούμε είναι για το AWS CodePipeline.

  • Δημιουργούμε έναν κάδο S3 που θα κρατά τα αντικείμενα / εξόδους από κάθε στάδιο στον αγωγό μας.
  • Πρέπει να δημιουργήσουμε μια πολιτική IAM που να επιτρέπει στο CodePipeline να αναλάβει ένα ρόλο που δημιουργούμε εδώ στο πρότυπό μας, codepipeline_role. Αυτός ο ρόλος έχει μια πολιτική που συνδέεται με αυτό, attach_codepipeline_policy. Η πολιτική παρέχει πρόσβαση στις υπηρεσίες AWS που πρέπει να καλέσουμε κατά την επίκληση του αγωγού μας.
  • Διαμορφώνουμε τους πόρους που απαιτούνται για να λειτουργήσει το CodeBuild όπως αναμένεται. Ορίζουμε μια πολιτική ανάληψης ρόλου που επιτρέπει στο CodeBuild να αναλάβει ρόλο και πρόσβαση σε υπηρεσίες μέσω του codebuild_policy.
  • Δημιουργούμε το πραγματικό έργο CodeBuild, build_project, το οποίο τρέχει το στάδιο κατασκευής του CodePipeline. Παρατηρήστε εδώ να καθορίσουμε την πηγή που πρέπει να είναι codepipeline και buildspec μας να είναι buildspec.yml.

Για την παροχή του CodePipeline, αναθέτουμε στον κατάστημα τεχνημάτων να είναι ο κουβάς S3 που προβλέψαμε νωρίτερα. Ο ρόλος είναι ο ρόλος codepipeline που ορίσαμε και νωρίτερα. Το στάδιο προέλευσης χρησιμοποιεί τον παροχέα GitHub και το διακριτικό που δημιουργήσαμε στο GitHub. Θέλουμε να στείλουμε την έξοδο αυτού του σταδίου σε μια ετικέτα που ονομάζεται κώδικας μέσω της ιδιότητας output_artifacts.

Το τελευταίο στάδιο στον πόρο CodePipeline είναι το στάδιο Build. Εδώ ο παροχέας είναι CodeBuild και έχουμε ορίσει ότι τα input_artifacts μας είναι το code output_artifacts από το στάδιο Source. Στη συνέχεια, καθορίζουμε το ProjectName για το έργο CodeBuild που θα είναι υπεύθυνο για την εκτέλεση της φάσης Build.

Όλα αυτά που χρειαζόμαστε για την παροχή του συνεχούς αγωγού ανάπτυξης είναι σε αυτό το πρότυπο. Εάν απλώς ψάχνετε να ξεκινήσετε να λειτουργείτε με AWS, τότε η ρύθμιση με το χέρι μπορεί να είναι ταχύτερη από τη σύνταξη του πρώτου προτύπου Terraform. Αλλά μακροπρόθεσμα, ο ορισμός της υποδομής σας ως κώδικας έχει τεράστια οφέλη:

  • Ο ορισμός της υποδομής σας ζει σε έλεγχο πηγής. Μπορεί να επαναληφθεί ως κώδικας θα ήταν.
  • Η υποδομή σας είναι τώρα επαναλαμβανόμενη. Εάν πρέπει να μετακινήσετε σε άλλη περιοχή AWS, μπορείτε να εκτελέσετε το πρότυπο σε αυτήν την περιοχή.
  • Μπορείτε γρήγορα να κάνετε αλλαγές αλλάζοντας το πρότυπο και εφαρμόζοντας ενημερώσεις.

Τώρα που ξέρουμε τι κάνει αυτό το πρότυπο και έχουμε εγκαταστήσει το Terraform, μπορούμε να εκτελέσουμε αυτό το πρότυπο από τη γραμμή εντολών.

Αρχικά τρέχουμε terraform init από τον κατάλογο όπου ζει το πρότυπο μας. Αυτό τραβάει τις εξαρτήσεις Terraform πρέπει να τρέξει το πρότυπο.

Μόλις αρχικοποιηθεί το πρότυπό μας Terraform, μπορούμε να χρησιμοποιήσουμε την εντολή "σχέδιο" για να δούμε τι ακριβώς πρόκειται να δημιουργηθεί.

Παρατηρήστε τα πάντα με πράσινο χρώμα; Αυτοί είναι οι πόροι που θα δημιουργηθούν. Αν υπήρχαν κίτρινοι πόροι, αυτοί θα ήταν πόροι που επρόκειτο να ενημερωθούν. Στη συνέχεια, εάν υπήρχαν κόκκινοι πόροι, θα διαγραφούν.

Στη συνέχεια, μπορείτε να εκτελέσετε την εντολή apply για να δημιουργήσετε τα πάντα στο πρότυπο. Υπάρχει μια ερώτηση επιβεβαίωσης, απλά πληκτρολογήστε ναι.

Μόλις ολοκληρωθεί το πρότυπο, θα πρέπει να δούμε ότι όλοι οι πόροι του AWS έχουν δημιουργηθεί για να υποστηρίξουν τον αγωγό συνεχούς ανάπτυξης.

Περιμένετε, τι κάναμε;

Αυτά είναι πολλά βήματα και αρκετές υποδομές που βρισκόμαστε στο AWS. Ας περάσουμε λοιπόν σε υψηλό επίπεδο αυτό που μόλις δημιουργήσαμε.

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

Όταν αρχίσει μια νέα κατασκευή, ο αγωγός μας ελέγχει τις τελευταίες δεσμεύσεις από τον κύριο κλάδο. Μόλις οι αλλαγές αποκαλυφθούν, μεταβιβάζονται στο επόμενο βήμα στον αγωγό μας, το βήμα Build. Για αυτό το βήμα, χρησιμοποιούμε μια άλλη υπηρεσία AWS, CodeBuild. Έχουμε ρυθμίσει το πρόγραμμά μας CodeBuild για να χρησιμοποιήσουμε μια εικόνα Node.js που παρέχεται από την Amazon. Αυτή η εικόνα έρχεται με το Node.js εγκατεστημένο έτσι ώστε η μηχανή κατασκευής που δημιουργεί το αποθετήριο μας να έχει πρόσβαση σε αυτό.

Αλλά πώς το AWS CodeBuild γνωρίζει πώς να χτίσει το αποθετήριο μας; Εκεί έρχεται το buildspec.yml. Πρόκειται για ένα ειδικό αρχείο που θα τοποθετήσουμε στη ρίζα του αποθετηρίου μας. Σε αυτό ρυθμίζουμε διαφορετικές φάσεις της διαδικασίας δημιουργίας όπως pre_install, build και post_build. Για την περίπτωση χρήσης μας πρόκειται απλώς να διαμορφώσετε τη διαδικασία δημιουργίας στο αρχείο buildspec. Αυτό θα αποτελείται από την αντιγραφή των περιεχομένων από την πηγή μας στον κάδο ιστότοπου S3, με την αποτελεσματική ανάπτυξη του στατικού ιστότοπού μας.

Ας πηδήσουμε στο static repository του ιστοτόπου μας και να διαμορφώσουμε το αρχείο buildspec.

Ρύθμιση του αρχείου buildspec

Θα ξεκινήσουμε προσθέτοντας ένα αρχείο buildspec.yml στη ρίζα της στατικής ιστοσελίδας μας.

Αυτό το αρχείο θα είναι το πρότυπο που χρησιμοποιεί το AWS CodeBuild για την κατασκευή και, στην περίπτωσή μας, θα αναπτύξει τον στατικό ιστότοπό μας. Αποτελείται από στάδια προ-εγκατάστασης, εγκατάστασης, κατασκευής και μετά την κατασκευή. Για τη χρήση μας, πρόκειται να αξιοποιήσουμε το στάδιο κατασκευής.

Αυτό που κάνουμε στην παραπάνω προδιαγραφή κατασκευής είναι αρκετά απλή, είναι μόνο μια γραμμή στην πραγματικότητα. Λαμβάνουμε τα περιεχόμενα της στατικής ιστοσελίδας μας και την αντιγράφουμε στον κάδο S3 που φιλοξενεί τον ιστότοπό μας μέσω της διεπαφής γραμμής εντολών AWS. Για τα άλλα βήματα, επαναλαμβάνουμε ποιο βήμα έτρεξε στη διαδικασία κατασκευής μας.

Φυσικά θα μπορούσαμε να κάνουμε ακόμα περισσότερα εδώ αν είχαμε ανάγκη να το κάνουμε. Για παράδειγμα, εάν χρειαζόταν να εκτελέσουμε μια διαδικασία δημιουργίας στο πακέτο package.json, τότε τα βήματα build και post_build θα έμοιαζαν έτσι:

Τώρα τρέχουμε npm build μέσα στο βήμα κατασκευής μας και αποθηκεύοντας την εντολή s3 sync για το post build βήμα μας. Το buildspec μας δίνει τη δυνατότητα να δημιουργούμε σενάριο όχι μόνο για την ανάπτυξη του ιστοτόπου μας, αλλά και για τον τρόπο με τον οποίο κατασκευάζονται και δοκιμάζονται. Θα μπορούσαμε επίσης να αξιοποιήσουμε τα υπόλοιπα στάδια, όπως την εγκατάσταση, για να προσθέσουμε τυχόν εξαρτήσεις που χρειάζεται η διαδικασία κατασκευής μας.

Προς το παρόν ας κολλήσουμε με το αρχικό αρχείο buildspec που αντιγράφει τον στατικό ιστότοπό μας στο S3. Βεβαιωθείτε ότι βρίσκεται στη ρίζα του αποθετηρίου σας, καθώς εδώ θα το αναζητήσει το CodeBuild. Ελέγξτε την στην αποθήκη σας, ώστε να μπορέσουμε να ενεργοποιήσουμε το CodePipeline.

Ενεργοποίηση του CodePipeline

Νωρίτερα συνδέσαμε το στάδιο προέλευσης του CodePipeline με το αποθετήριο GitHub της στατικής ιστοσελίδας μας. Είναι ρυθμισμένο να παρακολουθεί τις αλλαγές στον κύριο κλάδο. Έτσι, τυχόν νέες αλλαγές που ωθούνται σε αυτό το υποκατάστημα ενεργοποιούν μια νέα λειτουργία CodePipeline. Όπως μόλις ελέγξαμε στο αρχείο buildspec.yml, θα πρέπει τώρα να δούμε μια κλήση του CodePipeline που τρέχει.

Βλέπουμε εδώ ότι το στάδιο πηγής μας έχει χρησιμοποιηθεί λόγω των νέων αλλαγών στον κύριο κλάδο του αποθετηρίου μας. Αυτό ολοκληρώθηκε και έστειλε τα τεχνουργήματα της στο στάδιο της κατασκευής. Το στάδιο κατασκευής πήρε αυτά τα αντικείμενα και έτρεξε το αρχείο buildspec.yml για να τα χρησιμοποιήσει στον κάδο μας S3.

Αν κάναμε κλικ στον σύνδεσμο λεπτομερειών στο στάδιο DeployToS3, μπορούμε να δούμε τα αρχεία καταγραφής που εξάγει η διαδικασία δημιουργίας.

Μόλις ολοκληρωθεί η φάση DeployToS3 θα πρέπει να μπορέσουμε να φορτώσουμε ξανά τη στατική ιστοσελίδα μας στο πρόγραμμα περιήγησης και να δούμε τις αλλαγές μας.

Μπαμ! Έχουμε συνεχή ανάπτυξη

Προωθώντας την εσωτερική μου Emeril εδώ, τώρα έχουμε συνεχή ανάπτυξη για τη στατική ιστοσελίδα μας. Με οποιαδήποτε νέα δέσμευση στον κύριο κλάδο μας, ενεργοποιείται μια νέα λειτουργία CodePipeline. Αυτό ελέγχει τον τελευταίο κώδικα από το GitHub και το διαβιβάζει στο CodeBuild. Το project build μας εκτελεί τότε αυτό που υπάρχει στο αρχείο buildspec.

Προς το παρόν, το αρχείο buildspec απλά αντιγράφει τα περιεχόμενα της στατικής ιστοσελίδας στον κάδο S3. Αλλά, θα μπορούσαμε να επεκτείνουμε αυτό για να κάνουμε περισσότερα πράγματα. Θα μπορούσαμε να εκτελέσουμε εργασίες npm για να δημιουργήσουμε τον ιστότοπό μας ή να εκτελέσουμε δοκιμές. Εάν χρησιμοποιούμε επίσης το CloudFront μπροστά από τον στατικό ιστότοπό μας, μπορούμε να εκδώσουμε ένα αίτημα ακυρώσεως όταν αναπτύσσουμε τον νέο μας ιστότοπο.

Υπάρχουν τόσα πολλά πράγματα που μπορείτε να μάθετε με την κατάδυση και στην πραγματικότητα χρησιμοποιώντας το AWS. Μια στατική ιστοσελίδα μπορεί να φαίνεται σαν μια απλή περίπτωση χρήσης, αλλά είναι φοβερό για την εκμάθηση μιας ευρείας ποικιλίας πράγματα.

Πειναστείτε να μάθετε περισσότερα Amazon Web Services;

Έχω χρησιμοποιήσει το AWS για πάνω από έξι χρόνια τώρα και μαθαίνω πάντα νέες υπηρεσίες και νέους τρόπους για να χρησιμοποιήσω τις υπάρχουσες. Είναι μια τεράστια πλατφόρμα με πολλή τεκμηρίωση. Αλλά, υπάρχουν στιγμές που η τεκμηρίωση μπορεί να αισθάνεται σαν μια τεράστια θάλασσα πληροφοριών. Μέχρι το σημείο όπου θα χαθείτε μέσα σε αυτό.

Εμπνευσμένο από αυτό το πρόβλημα, κυκλοφόρησα πρόσφατα μια σειρά μαθημάτων ebook και βίντεο που περικλείει τη θάλασσα πληροφοριών. Επικεντρώνεται στη φιλοξενία, τη διασφάλιση και την ανάπτυξη στατικών ιστοτόπων στο AWS. Ο στόχος είναι να μάθετε υπηρεσίες που σχετίζονται με αυτό το πρόβλημα καθώς τις χρησιμοποιείτε. Εάν θέλετε να μάθετε το AWS, αλλά δεν είστε σίγουροι από πού να ξεκινήσετε, τότε ελέγξτε την πορεία μου.

Εάν σας άρεσε αυτό, μην ξεχάσετε να προσφέρετε τα χτυπήματα για να δείξετε την υποστήριξή σας!