Comment héberger un site Web statique à l'aide de Yandex.Cloud Object Storage

Bonjour, Habr!

Dans cet article, je vais vous dire à quel point il est facile d'héberger un site statique en utilisant les technologies Yandex, à savoir Object Storage .

À la fin, vous aurez un site Web hébergé qui sera accessible via un lien externe.

Cet article vous sera utile si vous

• Développeur novice qui apprend juste la programmation;
• Un développeur qui a créé un portfolio et qui souhaite le rendre public pour le montrer à ses amis et employeurs.

À propos de moi

Récemment, j'ai développé un service SaaS, une sorte de marché où les gens trouvent des entraîneurs sportifs pour s'entraîner personnellement. Utilisé la pile Amazon Web Services (ci-après AWS). Mais plus je me suis plongé dans le projet, plus j'ai appris de nuances sur les différents processus d'organisation d'une startup.

J'ai rencontré les problèmes suivants:

• AWS consommait beaucoup d'argent. Après avoir travaillé pendant 3 ans dans des entreprises, je me suis habitué à des joies telles que Docker, Kubernetes, CI / CD, déploiement bleu vert et, en tant que programmeur de démarrage novice, je voulais implémenter la même chose. En conséquence, je suis arrivé à la conclusion qu'AWS consommait entre 300 et 400 dollars par mois. Le plus cher s'est avéré être Kubernetes, environ 100 dollars, avec un salaire minimum avec un cluster et un nœud.
  
  PS Au début, vous n'avez pas besoin de faire cela.
• Puis, en pensant au côté juridique, j'ai appris la loi 152-FZ, qui disait quelque chose comme ce qui suit: "Les données personnelles des citoyens de la Fédération de Russie doivent être stockées sur le territoire de la Fédération de Russie" , sinon des amendes, ce que je ne voulais pas. J'ai décidé de m'attaquer à ces problèmes jusqu'à ce que "d'en haut" me vienne :).

Amazon Web Services ., .

. :

• 2-3 ( )
• , .

, .

, .

0.

, . Angular , SPA , .

P.S. Angular https://angular.io/guide/setup-local, 1.

Angular-CLI SPA- :

npm install -g @angular/cli

Angular :

ng new angular-habr-object-storage

, :

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

, . (Production), .

:

ng build --prod

dist .

. .

1.

https://console.cloud.yandex.ru/ "".

:

• ( )
• ( 500 ).

, .

"Object Storage", .

:

• Object Storage — , AWS S3, API AWS S3 .
• Object Storage "" (bucket / ), .

. " ".

, :

• . , — angular-habr-object-storage
• . . , , , .
• . "", , , .
• . "". , .
• . "". , , , . ( ).

" " .

. — dist . , " ", .

, , , .

"-".

, "". , index.html. SPA , , index.html.

, . .

5, .

! , frontend backend .

Écrivez dans les commentaires à quel point il est intéressant pour vous d'en savoir plus sur les autres services Yandex ou sur l'utilisation d'Angular dans le développement moderne.