🥇Come ospitare un sito statico utilizzando Yandex.Cloud Object Storage

Ciao, Habr!

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

Alla fine avrete un sito web pubblicato, accessibile tramite un link esterno.

Questo articolo sarà utile se siete

Un programmatore alle prime armi che sta appena apprendendo la programmazione;
Un programmatore che ha creato un portfolio e vuole pubblicarlo per mostrarlo a amici e potenziali datori di lavoro.

Chi sono

Di recente ho sviluppato un servizio SaaS, simile a un marketplace, dove le persone trovano allenatori sportivi per allenamenti personali. Ho utilizzato il stack Amazon Web Services (d'ora in poi AWS). Ma più mi addentravo nel progetto, più scoprivo sfumature sui diversi processi di organizzazione di una startup.

Ho affrontato i seguenti problemi:

AWS costava molto. Dopo aver lavorato per 3 anni in aziende Enterprise, mi ero abituato a comfort come Docker, Kubernetes, CI/CD, blue green deployment, e, come programmatore alle prime armi in una startup, volevo realizzare le stesse cose. Alla fine sono arrivato al punto che AWS costava 300-400 dollari al mese. La spesa maggiore era per Kubernetes, circa 100 dollari, con una configurazione minima con un cluster e un nodo.
P.S. All'inizio non è necessario fare così.
Volgendo la mia attenzione agli aspetti legali, ho appreso della legge 152-FZ, che diceva circa quanto segue: “I dati personali dei cittadini russi devono essere conservati nel territorio della Federazione Russa”, altrimenti ci sarebbero multe, cosa che non desideravo. Ho deciso di occuparmi di queste questioni finché non mi è stato imposto dall'alto :).

Ispirato l'articolo alla migrazione dell'infrastruttura da Amazon Web Services a Yandex.Cloud, ho deciso di studiare più a fondo il 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 prezzi pubblici)
Conservazione dei dati personali degli utenti nel territorio della Federazione Russa, cosa che il grande Amazon non può ancora realizzare.

Ho esaminato altri concorrenti di questo servizio, ma in quel momento Yandex era in vantaggio.

Ho parlato di me, ora possiamo passare al sodo.

Passo 0. Prepariamo il sito

Innanzitutto abbiamo bisogno di un sito che vogliamo pubblicare su Internet. Poiché sono un sviluppatore Angular, creerò un semplice modello di applicazione SPA, che poi pubblicherò online.

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

Installiamo Angular-CLI per creare siti SPA con Angular:

npm install -g @angular/cli

Creiamo un'app Angular utilizzando il seguente comando:

ng new angular-habr-object-storage

Successivamente, ci spostiamo nella cartella dell'app e la avviamo per verificarne il funzionamento:

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

L'app è stata creata, ma non è ancora pronta per il deploy su hosting. Creeremo un piccolo build (Production) per rimuovere il superfluo e lasciare solo i file necessari.
In Angular, questo può essere fatto con il seguente comando:

ng build --prod

Il risultato di questo comando è una nuova cartella nel root dell'applicazione dist con il nostro sito.

Funziona. Ora passiamo all'hosting.

Passo 1.

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

Nota:

Per utilizzare il servizio di Yandex potrebbe essere necessaria una mail di Yandex (ma non è certo)
Per alcune funzionalità sarà necessario versare dei fondi nel conto del pannello personale (minimo 500 rubli).

Dopo una registrazione e un'autenticazione riuscita, ci troviamo nel pannello personale.

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

Brevemente sui termini:

Object Storage è un'archiviazione di file compatibile con la tecnologia simile di Amazon AWS S3, che ha anche una propria API per gestire l'archiviazione dal codice e può essere utilizzata, come AWS S3, per ospitare un sito statico.
In Object Storage creiamo "bucket" (corbeille), che sono archiviazioni separate per i nostri file.

Creiamo uno di essi. Per fare ciò, nel pannello del servizio facciamo clic sul pulsante "Crea bucket".

Nel modulo di creazione del bucket ci sono i seguenti campi, diamo un'occhiata:

Nome del bucket. Per semplicità, lo chiameremo uguale al progetto Angular — angular-habr-object-storage
Dimensione max. Impostiamo tanto quanto pesa il nostro sito, poiché l'hosting non è gratuito e pagheremo a Yandex una piccola somma per ogni gigabyte dedicato.
Accesso in lettura agli oggetti. Impostiamo "Pubblico", poiché l'utente deve ricevere ogni file del nostro sito statico, affinché la progettazione venga visualizzata correttamente e gli script vengano eseguiti, ecc.
Accesso all'elenco degli oggetti e accesso alla lettura delle impostazioni. Lasciamo "Limitato". Questo è necessario per usare il bucket come archivio interno di file per le applicazioni.
Classe di archiviazione. Lascio "Standard". Ciò significa che il nostro sito sarà visitato frequentemente e, quindi, i file che lo compongono verranno scaricati spesso. Inoltre, l'opzione influenza le prestazioni e i pagamenti (inserire il link).

Facciamo clic su "Crea bucket" e il bucket è stato creato.

Ora dobbiamo caricare il nostro sito nel bucket. Il modo più semplice è aprire la cartella del nostro sito accanto dist e trascinare manualmente direttamente sulla pagina. È più comodo che fare clic sul pulsante "Carica oggetti", poiché in questo caso le cartelle non vengono trasferite e dovranno essere create manualmente nell'ordine corretto.

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

Nella pagina di configurazione del bucket come sito, selezioniamo la scheda "Hosting". Qui indichiamo la pagina principale del sito, solitamente index.html. Se avete un'applicazione SPA, probabilmente tutti gli errori sono gestiti anche sulla pagina principale, quindi indicheremo index.html anche nella pagina degli errori.

Possiamo vedere immediatamente a quale link sarà accessibile il nostro sito. Facciamo clic su salva.

Dopo un minuto, se seguiamo il link, vediamo che ora il nostro sito è accessibile a chiunque lo desideri.

Grazie a tutti coloro che hanno letto fino alla fine! Questo è il mio primo articolo, e ho in programma di descrivere 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