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

Ehi Habr!

In questo articolo ti dirò come ospitare facilmente e semplicemente un sito Web statico utilizzando le tecnologie Yandex, vale a dire Storage degli oggetti.

Alla fine, avrai un sito web ospitato sul web che sarà accessibile tramite un collegamento esterno.

Questo articolo ti sarà utile se

• Uno sviluppatore principiante che sta appena imparando a programmare;
• Uno sviluppatore che ha creato un portfolio e vuole renderlo di pubblico dominio per mostrarlo ad amici e datori di lavoro.

Informazioni su di me

Recentemente stavo sviluppando un servizio SaaS, una sorta di mercato in cui le persone trovano istruttori sportivi per l'allenamento personale. Utilizzato lo stack Amazon Web Services (di seguito denominato AWS). Ma più mi immergevo nel progetto, più sfumature imparavo sui diversi processi di organizzazione di una startup.

Ho riscontrato i seguenti problemi:

• AWS consumava molti soldi. Avendo lavorato per 3 anni in aziende Enterprise, mi sono abituato a gioie come Docker, Kubernetes, CI/CD, distribuzione blu-verde e, come aspirante programmatore di startup, volevo implementare lo stesso. Di conseguenza, sono giunto alla conclusione che AWS consumava 300-400 dollari al mese. Kubernetes si è rivelato il più costoso, circa 100 dollari, con un salario minimo di un cluster e un nodo.
  PS Non è necessario farlo all'inizio.
• Successivamente, pensando al lato legale, ho appreso della legge 152-FZ, che diceva qualcosa del genere: "I dati personali dei cittadini della Federazione Russa devono essere conservati nel territorio della Federazione Russa", altrimenti multe, cosa che non volevo. Ho deciso di affrontare questi problemi prima che mi arrivassero dall'alto :).

Ispirato articolo sulla migrazione dell'infrastruttura da Amazon Web Services a Yandex.Cloud, ho deciso di studiare lo stack Yandex in modo più dettagliato.

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

• 2-3 volte più economico (secondo l'articolo sopra e i listini prezzi pubblici)
• Conservazione dei dati personali degli utenti sul territorio della Federazione Russa, che la grande Amazzonia non può ancora raggiungere.

Ho studiato altri concorrenti di questo servizio, ma a quel tempo Yandex stava vincendo.

Ti ho parlato di me, così possiamo metterci al sodo.

Passaggio 0. Preparare il sito

Per prima cosa abbiamo bisogno di un sito web che vogliamo posizionare su Internet. Dato che sono uno sviluppatore Angular, creerò un semplice modello di applicazione SPA, che poi pubblicherò su Internet.

PS Chi capisce Angular o conosce la sua documentazione https://angular.io/guide/setup-local, vai a Passo 1.

Installiamo Angular-CLI per creare siti SPA in Angular:

npm install -g @angular/cli

Creiamo un'applicazione Angular utilizzando il seguente comando:

ng new angular-habr-object-storage

Successivamente, vai alla cartella dell'applicazione e avviala per verificarne la funzionalità:

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

L'applicazione è stata creata, ma non è ancora pronta per l'hosting. Assembliamo l'applicazione in una piccola build (Produzione) per rimuovere tutte le cose non necessarie e lasciare solo i file necessari.
In Angular puoi farlo con il seguente comando:

ng build --prod

Come risultato di questo comando, è apparsa una cartella nella radice dell'applicazione dist con il nostro sito web.

Lavori. Passiamo ora all'hosting.

Passo 1.

Andiamo al sito https://console.cloud.yandex.ru/ e fare clic sul pulsante "Connetti".

Nota:

• Per utilizzare il servizio Yandex, potresti aver bisogno della posta Yandex (ma questo non è certo)
• Per alcune funzioni dovrai depositare denaro sul tuo conto nel tuo conto personale (minimo 500 rubli).

Dopo aver effettuato con successo la registrazione e l'autorizzazione, siamo nel tuo account personale.

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

Brevemente in termini:

• Object Storage è uno storage di file compatibile con la tecnologia simile AWS S3 di Amazon, che dispone anche di una propria API per la gestione dello storage dal codice e, come AWS S3, può essere utilizzato per ospitare un sito statico.
• In Object Storage creiamo dei "bucket" (bucket), che sono aree di archiviazione separate per i nostri file.

Creiamone uno. Per fare ciò, nella console del servizio, fare clic sul pulsante "Crea bucket".

Il modulo per la creazione di un bucket ha i seguenti campi, esaminiamoli:

• Nome del bucket. Per semplicità, chiamiamo il progetto come Angular - angular-habr-object-storage
• Massimo. misurare. Scommettiamo quanto pesa il nostro sito, poiché il sito non è archiviato gratuitamente e per ogni gigabyte assegnato pagheremo a Yandex un bel soldo.
• Accesso in lettura agli oggetti. Lo impostiamo su “Pubblico”, poiché l'utente deve ricevere ogni file del nostro sito statico affinché il layout possa essere disegnato correttamente su di esso, gli script possano essere elaborati, ecc.
• Accesso all'elenco degli oggetti e Accesso in lettura alle impostazioni. Lascialo come "Limitato". Ciò è necessario per utilizzare il bucket come archivio di file interno per le applicazioni.
• Classe di archiviazione. Lascialo come "Standard". Ciò significa che il nostro sito verrà visitato frequentemente, e quindi i file che compongono il sito verranno scaricati frequentemente. Inoltre l'articolo influisce sulle prestazioni e sul pagamento (inserire collegamento).

Fai clic su "Crea un bucket" e il bucket verrà creato.

Ora dobbiamo caricare il nostro sito nel bucket. Il modo più semplice è aprire una cartella nelle vicinanze dist nostro sito e trascinatelo direttamente sulla pagina utilizzando le maniglie. Questo è più comodo che cliccare sul pulsante “Carica oggetti”, perché in questo caso le cartelle non verranno trasferite e dovrai crearle manualmente nella sequenza corretta.

Pertanto, il sito viene caricato nello spazio di archiviazione, quindi possiamo fornire agli utenti l'opportunità di accedere allo spazio di archiviazione come sito Web.
Per fare ciò, sul lato sinistro del menu, fare clic sulla scheda “Sito Web”.

Nella pagina per la configurazione di un bucket come sito, seleziona la scheda "Hosting". Qui indichiamo la pagina principale del sito, solitamente index.html. Se disponi di un'applicazione SPA, probabilmente tutti gli errori vengono elaborati anche nella pagina principale, quindi indicheremo anche index.html nella pagina di errore.

Vediamo subito da quale link sarà accessibile il nostro sito. Fare clic su Salva.

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

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

Scrivi nei commenti quanto sei interessato a conoscere altri servizi Yandex o sull'uso di Angular nello sviluppo moderno.

Fonte: habr.com