Γεια σου Χαμπρ!
Σε αυτό το άρθρο, θα σας πω πώς να φιλοξενήσετε εύκολα και απλά έναν στατικό ιστότοπο χρησιμοποιώντας τεχνολογίες Yandex, συγκεκριμένα Αποθήκευση αντικειμένων.
Στο τέλος, θα έχετε έναν διαδικτυακό ιστότοπο που θα είναι προσβάσιμος μέσω ενός εξωτερικού συνδέσμου.
Αυτό το άρθρο θα είναι χρήσιμο εάν
- Ένας αρχάριος προγραμματιστής που μόλις μαθαίνει να προγραμματίζει.
- Ένας προγραμματιστής που έχει δημιουργήσει ένα χαρτοφυλάκιο και θέλει να το τοποθετήσει σε δημόσιο τομέα για να το δείξει σε φίλους και εργοδότες.
Δήλωση
Πρόσφατα, ανέπτυζα μια υπηρεσία SaaS, ένα είδος αγοράς όπου οι άνθρωποι βρίσκουν αθλητικούς προπονητές για προσωπική προπόνηση. Χρησιμοποίησε τη στοίβα Υπηρεσιών Ιστού της Amazon (εφεξής AWS). Αλλά όσο πιο βαθιά βούτηξα στο έργο, τόσο περισσότερες αποχρώσεις μάθαινα για τις διαφορετικές διαδικασίες οργάνωσης μιας startup.
Αντιμετώπισα τα εξής προβλήματα:
- Το AWS κατανάλωνε πολλά χρήματα. Έχοντας εργαστεί για 3 χρόνια σε εταιρείες Enterprise, συνήθισα σε χαρές όπως Docker, Kubernetes, CI/CD, blue green deployment και, ως επίδοξος προγραμματιστής startup, ήθελα να εφαρμόσω το ίδιο. Ως αποτέλεσμα, κατέληξα στο συμπέρασμα ότι το AWS κατανάλωνε 300-400 δολάρια μηνιαίως. Το Kubernetes αποδείχθηκε ότι ήταν το πιο ακριβό, περίπου 100 δολάρια, με ελάχιστο μισθό ένα σύμπλεγμα και έναν κόμβο.
Υ.Γ. Δεν χρειάζεται να το κάνετε αυτό στην αρχή. - Στη συνέχεια, σκεπτόμενος τη νομική πλευρά, έμαθα για τον νόμο 152-FZ, ο οποίος έλεγε κάτι σαν το εξής: "Τα προσωπικά δεδομένα των πολιτών της Ρωσικής Ομοσπονδίας πρέπει να αποθηκεύονται στο έδαφος της Ρωσικής Ομοσπονδίας", διαφορετικά πρόστιμα, που δεν ήθελα. Αποφάσισα να αντιμετωπίσω αυτά τα θέματα πριν μου έρθει από ψηλά :).
Εμπνευσμένος σχετικά με τη μετεγκατάσταση της υποδομής από τις υπηρεσίες Web της Amazon στο Yandex.Cloud, αποφάσισα να μελετήσω τη στοίβα Yandex με περισσότερες λεπτομέρειες.
Για μένα, τα βασικά χαρακτηριστικά του Yandex.Cloud ήταν τα εξής:
- 2-3 φορές φθηνότερα (σύμφωνα με το παραπάνω άρθρο και δημόσιους τιμοκαταλόγους)
- , που η μεγάλη Αμαζόνα δεν μπορεί ακόμη να πετύχει.
Μελέτησα άλλους ανταγωνιστές αυτής της υπηρεσίας, αλλά εκείνη την εποχή κέρδιζε η Yandex.
Σου είπα για μένα, για να ασχοληθούμε.
Βήμα 0. Προετοιμάστε την τοποθεσία
Πρώτον, χρειαζόμαστε έναν ιστότοπο που θέλουμε να τοποθετήσουμε στο Διαδίκτυο. Επειδή είμαι προγραμματιστής της Angular, θα φτιάξω ένα απλό πρότυπο εφαρμογής SPA, το οποίο στη συνέχεια θα δημοσιεύσω στο Διαδίκτυο.
Υ.Γ Ποιος καταλαβαίνει το Angular ή γνωρίζει την τεκμηρίωσή του , παω σε .
Ας εγκαταστήσουμε το Angular-CLI για να δημιουργήσουμε τοποθεσίες SPA στο Angular:
npm install -g @angular/cliΑς δημιουργήσουμε μια εφαρμογή Angular χρησιμοποιώντας την ακόλουθη εντολή:
ng new angular-habr-object-storageΣτη συνέχεια, μεταβείτε στο φάκελο της εφαρμογής και εκκινήστε τον για να ελέγξετε τη λειτουργικότητά του:
cd angular-habr-object-storage
ng serve --open
Η εφαρμογή έχει δημιουργηθεί, αλλά δεν είναι ακόμη έτοιμη για φιλοξενία. Ας συναρμολογήσουμε την εφαρμογή σε μια μικρή κατασκευή (Παραγωγή) για να αφαιρέσουμε όλα τα περιττά πράγματα και να αφήσουμε μόνο τα απαραίτητα αρχεία.
Στο Angular μπορείτε να το κάνετε αυτό με την ακόλουθη εντολή:
ng build --prodΩς αποτέλεσμα αυτής της εντολής, εμφανίστηκε ένας φάκελος στη ρίζα της εφαρμογής dist με την ιστοσελίδα μας.
Εργα. Τώρα ας περάσουμε στη φιλοξενία.
Βήμα 1.
Μεταβείτε στον ιστότοπο και κάντε κλικ στο κουμπί «Σύνδεση».
Σημείωση:
- Για να χρησιμοποιήσετε την υπηρεσία Yandex, μπορεί να χρειαστείτε αλληλογραφία Yandex (αλλά αυτό δεν είναι σίγουρο)
- Για ορισμένες λειτουργίες θα πρέπει να καταθέσετε χρήματα στον λογαριασμό σας στον προσωπικό σας λογαριασμό (τουλάχιστον 500 ρούβλια).
Μετά την επιτυχή εγγραφή και εξουσιοδότηση, βρισκόμαστε στον προσωπικό σας λογαριασμό.
Στη συνέχεια στα αριστερά στο μενού θα πρέπει να βρείτε την υπηρεσία «Αποθήκευση αντικειμένων», την οποία θα χρησιμοποιήσουμε για τη φιλοξενία του ιστότοπου.
Εν συντομία με όρους:
- Το Object Storage είναι ένας χώρος αποθήκευσης αρχείων συμβατός με την παρόμοια τεχνολογία AWS S3 της Amazon, η οποία έχει επίσης το δικό της API για τη διαχείριση της αποθήκευσης από κώδικα και, όπως το AWS S3, μπορεί να χρησιμοποιηθεί για τη φιλοξενία ενός στατικού ιστότοπου.
- Στο Object Storage δημιουργούμε «buckets» (buckets), που είναι ξεχωριστοί χώροι αποθήκευσης για τα αρχεία μας.
Ας δημιουργήσουμε ένα από αυτά. Για να το κάνετε αυτό, στην κονσόλα υπηρεσιών, κάντε κλικ στο κουμπί "Δημιουργία κάδου".
Η φόρμα για τη δημιουργία ενός κάδου έχει τα ακόλουθα πεδία, ας τα δούμε:
- Όνομα κάδου. Για απλότητα, ας ονομάσουμε το έργο το ίδιο με το Angular -
angular-habr-object-storage - Μέγιστη. Μέγεθος. Ποντάρουμε όσο ζυγίζει ο ιστότοπός μας, καθώς ο ιστότοπος δεν αποθηκεύεται δωρεάν και για κάθε gigabyte που διατίθεται, θα πληρώνουμε στο Yandex μια όμορφη δεκάρα.
- Πρόσβαση σε αντικείμενα ανάγνωσης. Το ορίζουμε σε «Δημόσιο», αφού ο χρήστης πρέπει να λαμβάνει κάθε αρχείο του στατικού μας ιστότοπου, ώστε να μπορεί να σχεδιαστεί σωστά η διάταξη σε αυτό, να γίνει επεξεργασία σεναρίων κ.λπ.
- Πρόσβαση στη λίστα αντικειμένων και Πρόσβαση στις ρυθμίσεις ανάγνωσης. Αφήστε το ως "Περιορισμένο". Αυτό είναι απαραίτητο για να χρησιμοποιήσετε τον κάδο ως εσωτερικό χώρο αποθήκευσης αρχείων για εφαρμογές.
- Κατηγορία αποθήκευσης. Αφήστε το ως "Τυπικό". Αυτό σημαίνει ότι ο ιστότοπός μας θα επισκέπτεται συχνά και επομένως τα αρχεία που απαρτίζουν τον ιστότοπο θα κατεβαίνουν συχνά. Επιπλέον, το στοιχείο επηρεάζει την απόδοση και την πληρωμή (εισαγωγή συνδέσμου).
Κάντε κλικ στο «Δημιουργία κάδου» και ο κάδος δημιουργείται.
Τώρα πρέπει να ανεβάσουμε τον ιστότοπό μας στον κάδο. Ο ευκολότερος τρόπος είναι να ανοίξετε έναν φάκελο κοντά dist τον ιστότοπό μας και σύρετέ τον απευθείας στη σελίδα χρησιμοποιώντας λαβές. Αυτό είναι πιο βολικό από το να κάνετε κλικ στο κουμπί "Φόρτωση αντικειμένων", επειδή σε αυτήν την περίπτωση οι φάκελοι δεν μεταφέρονται και θα πρέπει να τους δημιουργήσετε χειροκίνητα με τη σωστή σειρά.
Έτσι, ο ιστότοπος φορτώνεται στο χώρο αποθήκευσης, ώστε να μπορούμε να παρέχουμε στους χρήστες την ευκαιρία να έχουν πρόσβαση στο χώρο αποθήκευσης ως ιστότοπος.
Για να το κάνετε αυτό, στην αριστερή πλευρά του μενού, κάντε κλικ στην καρτέλα "Ιστότοπος".
Στη σελίδα για τη ρύθμιση ενός κάδου ως ιστότοπου, επιλέξτε την καρτέλα «Φιλοξενία». Εδώ υποδεικνύουμε την κύρια σελίδα του ιστότοπου, συνήθως index.html. Εάν έχετε μια εφαρμογή SPA, τότε πιθανώς όλα τα σφάλματα υποβάλλονται σε επεξεργασία στην κύρια σελίδα, επομένως θα υποδείξουμε επίσης το index.html στη σελίδα σφάλματος.
Βλέπουμε αμέσως από ποιον σύνδεσμο θα είναι προσβάσιμος ο ιστότοπός μας. Κάντε κλικ στην αποθήκευση.
Μετά από περίπου 5 λεπτά, κάνοντας κλικ στον σύνδεσμο, βλέπουμε ότι ο ιστότοπός μας είναι πλέον διαθέσιμος σε όλους.
Ευχαριστώ όλους όσους διάβασαν μέχρι το τέλος! Αυτό είναι το πρώτο μου άρθρο· σκοπεύω να περιγράψω περαιτέρω άλλες υπηρεσίες Yandex και την ενσωμάτωσή τους με τεχνολογίες frontend και backend.
Γράψτε στα σχόλια πόσο ενδιαφέρεστε να μάθετε για άλλες υπηρεσίες Yandex ή για τη χρήση του Angular στη σύγχρονη ανάπτυξη.
Πηγή: www.habr.com
