Come ospitare un sito statico utilizzando Yandex.Cloud Object Storage

Ciao, Habr!

In questo articolo, ti spiegherò come è facile e semplice ospitare un sito statico utilizzando le tecnologie di Yandex, ovvero Object Storage.

Alla fine, avrai un sito online accessibile tramite un link esterno.

Questo articolo sarà utile se sei

• Un sviluppatore alle prime armi che sta imparando a programmare;
• Un sviluppatore che ha realizzato un portfolio e vuole pubblicarlo per mostrarlo a amici e datori di lavoro.

Su di me

Di recente, ho sviluppato un servizio SaaS, simile a un marketplace, dove le persone possono trovare allenatori sportivi per allenamenti personalizzati. Ho utilizzato il stack di Amazon Web Services (di seguito AWS). Ma più mi immergevo nel progetto, più dettagli scoprivo sui diversi processi di avvio di un'azienda.

Ho affrontato i seguenti problemi:

• AWS costava molto. Dopo aver lavorato per 3 anni in aziende Enterprise, mi ero abituato a vantaggi come Docker, Kubernetes, CI/CD, blue green deployment, e, come programmatore all'inizio della mia carriera da startup, desideravo implementare tutto ciò. Alla fine, mi sono reso conto che AWS costava tra i 300 e i 400 dollari al mese. Il costo maggiore era per Kubernetes, circa 100 dollari, con una minima configurazione di un cluster e un nodo.
  P.S. Non è necessario farlo così all'inizio.
• Dopo aver considerato l'aspetto legale, ho scoperto la legge 152-FZ, che diceva più o meno quanto segue: "I dati personali dei cittadini russi devono essere conservati nel territorio russo", altrimenti ci sono sanzioni, cosa che volevo evitare. Ho deciso di affrontare queste questioni prima che mi arrivasse un avviso dall'alto :).

Ispirato articolo al migrazione dell'infrastruttura da Amazon Web Services a Yandex.Cloud, ho deciso di approfondire lo stack di Yandex.

Per me, le caratteristiche chiave di Yandex.Cloud erano le seguenti:

• Più economico di 2-3 volte (secondo l'articolo sopra e i listini pubblici)
• Conservazione dei dati personali degli utenti nel territorio russo, cosa che il grande Amazon non può ancora fare.

Ho esaminato altri concorrenti di questo servizio, ma a quel tempo Yandex era vincente.

Parlato di me, possiamo passare all'azione.

Passo 0. Prepariamo il sito

Per cominciare, avremo bisogno di un sito che vogliamo pubblicare su Internet. Poiché sono uno sviluppatore Angular, creerò un semplice modello di applicazione SPA da pubblicare successivamente online.

P.S. Chi ha familiarità con Angular o conosce la sua documentazione https://angular.io/guide/setup-local, proceda al Passo 1.

Installeremo Angular-CLI per creare siti SPA in Angular:

npm install -g @angular/cli

Creiamo un'applicazione Angular con il seguente comando:

ng new angular-habr-object-storage

Poi passiamo alla cartella dell'applicazione e la avviamo per verificarne il funzionamento:

cd angular-habr-object-storage
ng serve --open

L'applicazione è stata creata, ma non è ancora pronta per essere pubblicata. Creiamo un piccolo build (Production) per rimuovere tutto il superfluo e mantenere solo i file necessari.
In Angular, ciò si può fare con il seguente comando:

ng build --prod

Di conseguenza, in cima all'applicazione è stata creata una cartella dist con il nostro sito.

Funziona. Ora passiamo all'hosting.

Passo 1.

Visitiamo il sito https://console.cloud.yandex.ru/ e clicchiamo sul pulsante "Collegati".

Nota:

• Per utilizzare il servizio di Yandex potrebbe essere necessaria un'email Yandex (ma non è sicuro).
• Per alcune funzionalità sarà necessario caricare fondi sul conto nel pannello personale (minimo 500 rubli).

Dopo una registrazione e un'autenticazione riuscite, siamo nel pannello personale.

Poi, a sinistra nel menu, dobbiamo trovare il servizio "Object Storage", che useremo per l'hosting del sito.

Brevemente sui termini:

• Object Storage — è uno storage di file compatibile con la stessa tecnologia di Amazon AWS S3, disponibile anche un'API per gestire lo storage tramite codice, e proprio come AWS S3, può essere utilizzato per ospitare un sito statico.
• In Object Storage creiamo dei "bucket" (bucket / Cestino), che sono archivi separati per i nostri file.

Creiamone uno. A tal fine, nella console del servizio premiamo il pulsante "Crea bucket".

Nella maschera di creazione del bucket ci sono i seguenti campi, passiamo in rassegna:

• Nome del bucket. Per semplicità, chiamiamolo allo stesso modo del progetto Angular — angular-habr-object-storage
• Dimensione massima. Impostiamo quanto pesa il nostro sito, dato che lo storage non è gratuito e per ogni gigabyte allocato, pagheremo un piccolo importo a Yandex.
• Accesso in lettura agli oggetti. Impostiamo "Pubblico", poiché l'utente deve poter ricevere ogni file del nostro sito statico, affinché il layout venga visualizzato correttamente e gli script funzionino, ecc.
• Accesso all'elenco degli oggetti e Accesso alla lettura delle impostazioni. Lasciamo su "Limitato". Questo è necessario per utilizzare il bucket come storage interno per i file delle applicazioni.
• Classe di archiviazione. Lasciamo "Standard". Questo significa che il nostro sito sarà visitato frequentemente e quindi i file che lo compongono saranno scaricati spesso. Inoltre, questo punto influisce sulle prestazioni e sul pagamento (inserire link).

Clicchiamo su "Crea bucket" e il bucket è stato creato.

Ora dobbiamo caricare il nostro sito nel bucket. Il modo più semplice è aprire una cartella affianco dist del nostro sito e trascinarla direttamente sulla pagina. È più comodo rispetto a cliccare su "Carica oggetti", perché in questo caso le cartelle non vengono trasferite e dovranno essere create manualmente nella sequenza corretta.

Quindi, il sito è caricato nell'archivio, e ora possiamo fornire agli utenti la possibilità di accedere all'archivio come a un sito.
Per fare ciò, sulla sinistra nel menu clicchiamo sulla scheda "Sito web".

Nella pagina delle impostazioni del bucket come sito, selezioniamo la scheda "Hosting". Qui indichiamo la pagina principale del sito, di solito è index.html. Se hai un'applicazione SPA, probabilmente tutti gli errori vengono gestiti anche sulla pagina principale, quindi indicheremo index.html anche nella pagina degli errori.

Vediamo subito tramite quale link sarà accessibile il nostro sito. Clicchiamo su salva.

Dopo circa 5 minuti, cliccando sul link, vediamo che ora il nostro sito è accessibile a tutti.

Grazie a tutti coloro che hanno letto fino alla fine! Questo è il mio primo articolo, e ho intenzione di descrivere ulteriormente altri servizi di Yandex e la loro integrazione con le tecnologie frontend e backend.

Scrivete nei commenti quanto vi interessa scoprire altri servizi di Yandex o l'uso di Angular nello sviluppo moderno.

Fonte: habr.com