Πώς να φιλοξενήσετε έναν στατικό ιστότοπο στο Cloud σε τέσσερα βήματα

Οι στατικοί ιστότοποι μπορούν να φιλοξενήσουν κάθε είδους ιστότοπους από το προσωπικό σας χαρτοφυλάκιο, σε μια σελίδα προορισμού εταιρείας ή ακόμα και σε ένα blog.

Το κύριο πλεονέκτημα των στατικών ιστότοπων είναι ότι είναι εύκολο στη διαχείριση. Είναι επίσης πολύ οικονομικά. Και με στατικούς ιστότοπους, δεν χρειάζεστε σύνθετες υπηρεσίες διαχείρισης περιεχομένου (CMS) που εκτελούνται συνεχώς σε διακομιστές (ακόμα κι αν δεν έχετε κίνηση).

Σε αυτήν την ανάρτηση, θα μάθετε πώς να φιλοξενείτε έναν στατικό ιστότοπο στο σύννεφο AWS σε 4 βήματα, χρησιμοποιώντας το AWS Amplify και Route 53. Και το καλύτερο μέρος; Δεν θα σας κοστίσει σχεδόν τίποτα κάθε μήνα.

Τι είναι ένας στατικός ιστότοπος;

Οι στατικοί ιστότοποι είναι ιστότοποι που εξυπηρετούνται από διακομιστή αποθήκευσης ή δίκτυο διανομής περιεχομένου (CDN). Δεν χρειάζεται να υπάρχει ένας διακομιστής που εκτελεί τη δημιουργία των αρχείων HTML.

Αυτοί οι ιστότοποι είναι προεγκατεστημένοι ως αρχεία HTML που αποθηκεύονται κάπου στο Διαδίκτυο και στη συνέχεια εξυπηρετούνται κατά την κατασκευή τους.

Οι στατικοί ιστότοποι μπορούν να έχουν δυναμικό περιεχόμενο, αλλά αντιμετωπίζεται από την πλευρά του πελάτη χρησιμοποιώντας JavaScript ή ορισμένες ενσωματώσεις τρίτων με χρήση API.

Μερικά οφέλη από τη χρήση ενός στατικού ιστότοπου είναι:

  • Είναι εύκολο να κλιμακωθούν
  • Εάν χρησιμοποιείτε CDN, οι χρόνοι φόρτωσης είναι γρήγοροι
  • Είναι οικονομικά αποδοτικές
  • Είναι εύκολο να διατηρηθούν

Για παράδειγμα, ο προσωπικός μου ιστότοπος είναι ένα καλό παράδειγμα στατικού ιστότοπου:

Η προσωπική ιστοσελίδα της Marcia

Τι είναι το AWS;

Το AWS σημαίνει Amazon Web Services και είναι η πιο ευρέως υιοθετημένη πλατφόρμα cloud. Διαθέτει πολλές διαφορετικές υπηρεσίες για να σας βοηθήσει να αναπτύξετε και να φιλοξενήσετε τις εφαρμογές σας.

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

Χρησιμοποιώντας το cloud για τις εφαρμογές σας, θα μειώσετε το κόστος, θα σας βοηθήσουμε να γίνετε πιο ευέλικτοι και θα σας επιτρέψει να καινοτομήσετε γρηγορότερα από ό, τι αν χρησιμοποιούσατε τους δικούς σας διακομιστές εγκατάστασης.

Βήμα 1 - Ρυθμίστε τον λογαριασμό σας AWS

Το πρώτο βήμα σε αυτήν τη διαδικασία είναι να αποκτήσετε έναν λογαριασμό AWS. Πρόκειται να φιλοξενήσετε τη στατική σελίδα σας στο cloud και για αυτό πρέπει να έχετε έναν έγκυρο λογαριασμό AWS.

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

Για παράδειγμα, θα λάβετε 5 GB δωρεάν αποθηκευτικού χώρου. Αυτό είναι υπέροχο, καθώς χρειαζόμαστε χώρο αποθήκευσης για να αποθηκεύσουμε τον στατικό ιστότοπό μας στο cloud.

Λάβετε υπόψη ότι η κατοχή λογαριασμού AWS είναι δωρεάν εάν δεν χρησιμοποιείτε υπηρεσίες. Δεν θα χρεωθείτε για τη δημιουργία του λογαριασμού και εάν δεν χρησιμοποιήσετε τον λογαριασμό, δεν θα χρεωθείτε.

Για να δημιουργήσετε έναν λογαριασμό AWS μπορείτε να ακολουθήσετε τα βήματα σε αυτό το βίντεο:

Βήμα 2 - Δημιουργήστε τον στατικό σας ιστότοπο και διαμορφώστε τον με το AWS Amplify

Αμέσως μετά την ανάγνωση αυτού του τίτλου, ίσως αναρωτιέστε, τι είναι το AWS Amplify;

Το AWS Amplify είναι ένα πλαίσιο ανοιχτού κώδικα που παρέχει δυνατότητες που θα σας βοηθήσουν να δημιουργήσετε εφαρμογές ιστού και κινητής τηλεφωνίας. Διαθέτει 4 στοιχεία:

  • το Amplify CLI
  • τις βιβλιοθήκες ενίσχυσης
  • τα στοιχεία UI Amplify και
  • την κονσόλα Amplify.

Το Amplify CLI σάς βοηθά να ρυθμίσετε όλες τις υπηρεσίες που χρειάζεστε για να δημιουργήσετε ένα cloud backend στην εφαρμογή σας χρησιμοποιώντας τη διεπαφή της γραμμής εντολών.

Οι βιβλιοθήκες σας βοηθούν να ενσωματώσετε τις εφαρμογές των πελατών σας απευθείας με τις υπηρεσίες backend.

Τα συστατικά Amplify UI είναι βιβλιοθήκες UI ειδικά για React, React Native, Angular, Ionic και Vue που θα σας βοηθήσουν να αναπτύξετε εύκολα την εφαρμογή σας στο cloud.

Τέλος, η Amplify Console είναι μια υπηρεσία AWS που παρέχει μια ροή εργασίας βασισμένη στο git για συνεχή ανάπτυξη και για τη φιλοξενία εφαρμογών Ιστού και κινητών πλήρους στοίβας.

Σε αυτήν την ανάρτηση δεν πρόκειται να χρησιμοποιήσουμε όλες τις δυνατότητες του AWS Amplify, απλώς πρόκειται να χρησιμοποιήσουμε την Κονσόλα. Προτείνω όμως να ρίξετε μια ματιά σε μερικά μαθήματα σχετικά με τον τρόπο δημιουργίας πιο σύνθετων εφαρμογών χρησιμοποιώντας το AWS Amplify

Δημιουργήστε τον στατικό ιστότοπο

Τώρα, έχετε όλα όσα χρειάζεστε για να ξεκινήσετε με τον στατικό σας ιστότοπο. Για αυτό το demo, οποιοδήποτε στατικό HTML θα λειτουργήσει. Μόλις δημιούργησα ένα αρχείο που ονομάζεται index.html και πρόσθεσα αυτόν τον κώδικα μέσα του:

Hello Foobar

This is my super simple site

Ανεβάστε το στο AWS Amplify Console

Αφού έχουμε τον στατικό ιστότοπο, το επόμενο βήμα είναι να μεταβείτε στην υπηρεσία AWS Amplify στην κονσόλα AWS.

Εύρεση της υπηρεσίας AWS Amplify στην κονσόλα AWS

Στη συνέχεια, όταν ανοίξει αυτή η υπηρεσία, θα δείτε κάτι σαν αυτό:

AWS Amplify κονσόλα

Κάντε κλικ στο κουμπί Σύνδεση εφαρμογής και, στη συνέχεια, θα εμφανιστεί αυτή η σελίδα:

Επιλογές για την ανάπτυξη του υπάρχοντος έργου σας

Στη συνέχεια, μπορείτε να επιλέξετε Ανάπτυξη χωρίς πάροχο Git και να συνεχίσετε.

Θα εμφανιστεί μια σελίδα για να αναπτύξετε χειροκίνητα την εφαρμογή σας. Εκεί, επιλέγετε ένα όνομα εφαρμογής και ένα όνομα περιβάλλοντος και στη συνέχεια μπορείτε να σύρετε το φάκελο της εφαρμογής σας στο πρόγραμμα περιήγησης.

Έναρξη χειροκίνητης ανάπτυξης στο AWS Amplify

Όταν ολοκληρωθεί η μεταφόρτωση της εφαρμογής, θα δείτε ένα μήνυμα που λέει "Η ανάπτυξη ολοκληρώθηκε με επιτυχία".

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

Βήμα 3 - Αγοράστε έναν τομέα για τον ιστότοπό σας

Τώρα είναι καιρός να αποκτήσετε έναν τομέα για τον ιστότοπό σας. Η κοινή χρήση αυτού του συνδέσμου τομέα δεν είναι πολύ πρακτική και ένας τομέας μπορεί να είναι ένας απλούστερος τρόπος για να ονομάσετε τον ιστότοπό σας.

Για αυτό πρέπει να εισέλθετε στον λογαριασμό σας AWS σε μια υπηρεσία που ονομάζεται Route53.

Εύρεση της υπηρεσίας Route53 στην κονσόλα AWS

Στη συνέχεια, όταν ανοίξει η Διαδρομή 53, μπορείτε να μεταβείτε σε έναν σύνδεσμο που λέει Εγγραφή τομέα και εμφανίζεται μια σελίδα όπως αυτή

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

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

Βήμα 4 - Διαμορφώστε τον τομέα στην εφαρμογή AWS Amplify

Τώρα που έχετε τον τομέα, ήρθε η ώρα να επιστρέψετε στην εφαρμογή AWS Amplify - αυτή που μόλις διαμορφώσατε.

Στη συνέχεια, στα αριστερά, κάνετε κλικ στο σύνδεσμο Διαχείριση τομέα και ανοίγει αυτή η σελίδα:

Προσθήκη τομέα στον ιστότοπό σας

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

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

Τώρα τελειώσατε, ώστε να μπορείτε να μεταβείτε στον νέο σας τομέα και να δείτε τη στατική σελίδα σας.

Πώς να ενημερώσετε αυτόν τον ιστότοπο

Τώρα κάθε φορά που πρέπει να αλλάζετε κάτι στο στατικό σας ιστότοπο, πρέπει να μεταβείτε στο AWS Amplify και να ενημερώσετε τα αρχεία. Βασικά, απλώς θα αποθέσετε τον κατάλογο στην εφαρμογή Amplify.

Ενημέρωση του στατικού σας ιστότοπου

συμπέρασμα

Τώρα έχετε έναν στατικό ιστότοπο που φιλοξενείται στο cloud. Αυτός ο ιστότοπος είναι πολύ επεκτάσιμος και αξιόπιστος. Ο ιστότοπος φιλοξενείται χρησιμοποιώντας το AWS CDN που ονομάζεται AWS CloudFormation, οπότε αυτό θα κάνει τον ιστότοπό σας πολύ γρήγορο για τους χρήστες σας.

Το συνολικό κόστος της φιλοξενίας αφού ο λογαριασμός σας AWS είναι παλαιότερος από 12 μήνες θα είναι περίπου 0,50 $ έως 4 $ USD ανά μήνα, ανάλογα με το μέγεθος του ιστότοπού σας και την επισκεψιμότητα που λαμβάνετε.

Το άλλο ετήσιο κόστος που θα έχετε είναι ο τομέας που μπορεί να ξεκινά από 9 $ USD ανά έτος.

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

Ευχαριστώ για την ανάγνωση.

Είμαι η Marcia Villalba, Δικηγόρος προγραμματιστή για το AWS και ο οικοδεσπότης ενός καναλιού YouTube που ονομάζεται FooBar, όπου έχω πάνω από 250 εκπαιδευτικά βίντεο σχετικά με πρακτικές χωρίς διακομιστές, AWS και μηχανικούς λογισμικού.

  • Twitter: //twitter.com/mavi888uy
  • Youtube: //youtube.com/foobar_codes