How to host a static website using Yandex.Cloud Object Storage

Hello, Habr!

In this article, I will tell you how to easily and easily host a static site using Yandex technologies, namely Object Storage .

At the end, you will have a web-hosted site that will be accessible via an external link.

This article will be helpful if you

• Novice developer who is just learning programming;
• A developer who has made a portfolio and wants to make it public to show to friends and employers.

About myself

Recently, I developed a SaaS service, a kind of marketplace where people find sports trainers for personal training. Used the Amazon Web Services stack (hereinafter AWS). But the deeper I plunged into the project, the more nuances I learned about the different processes of organizing a startup.

I ran into the following problems:

• AWS was consuming a lot of money. After working for 3 years in Enterprise companies, I got used to such joys as Docker, Kubernetes, CI / CD, blue green deployment, and, as a novice startup programmer, I wanted to implement the same thing. As a result, I came to the conclusion that monthly AWS consumed 300-400 bucks. The most expensive turned out to be Kubernetes, about 100 bucks, with a minimum salary with one cluster and one node.
  
  PS At the start, you don't need to do this.
• Then, thinking about the legal side, I learned about Law 152-FZ, which said something like the following: "Personal data of citizens of the Russian Federation must be stored on the territory of the Russian Federation" , otherwise fines, which I did not want. I decided to tackle these issues until "from above" came to me :).

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 .

Write in the comments how interesting it is for you to learn about other Yandex services or about using Angular in modern development.