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


Angular Static SPA Application



, . (Production), .

:



ng build --prod


dist .



. .





1.



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



:



  • ( )
  • ( 500 ).


, .



Yandex.Cloud personal account interface



"Object Storage", .



:



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


Yandex.Cloud Object Storage service interface



. " ".



Interface for creating a bucket in Yandex.Cloud



, :



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


" " .



Yandex.Cloud Bucket created



. — dist . , " ", .



Uploaded our website to the bucket



, , , .

"-".



Setting up a bucket for a website



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



, . .



5, .



Hosting Angular applications using Yandex.Cloud Object Storage



! , 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.




All Articles