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

Hey Habr!

In this article, I will tell you how easy it is to host a static website 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

• A beginner developer who is just learning to program;
• A developer who has made a portfolio and wants to make it publicly available to show to friends and employers.

About Me

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

I ran into the following issues:

• AWS consumed a lot of money. Having worked 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. As a result, I came to the conclusion that AWS consumed 300-400 bucks every month. Kubernetes turned out to be the most expensive, about 100 bucks, with a minimum wage with one cluster and one node.
  PS At the start, you do not need to do this.
• Further, thinking about the legal side, I learned about the law 152-FZ, which said something like this: "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 deal with these issues until the "top" came to me :).

Inspired article about migrating infrastructure from Amazon Web Services to Yandex.Cloud, I decided to study the Yandex stack in more detail.

For me, the key features of Yandex.Cloud were the following:

• Cheaper by 2-3 times (according to the article above and public price lists)
• Storage of personal data of users on the territory of the Russian Federationthat the great Amazon cannot yet accomplish.

I studied other competitors of this service, but at that time Yandex was winning.

He told about himself, and you can get down to business.

Step 0. Prepare the site

To begin with, we need a website that we want to place on the Internet. Since I am an Angular developer, I will make a simple SPA application template, which I will post on the Internet.

PS Who understands Angular or knows about its documentation https://angular.io/guide/setup-local, go to Step 1.

Install Angular-CLI to create SPA sites in Angular:

npm install -g @angular/cli

Let's create an Angular application with the following command:

ng new angular-habr-object-storage

Next, go to the application folder and run it to check if it works:

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

The application has been created, but is not yet ready for hosting. We will assemble the application into a small build (Production) to remove all unnecessary and leave only the necessary files.
In Angular, this can be done with the following command:

ng build --prod

As a result of this command, a daddy appeared in the root of the application dist with our site.

Works. Now let's move on to hosting.

Step 1.

Go to website https://console.cloud.yandex.ru/ and click on the "Connect" button.

Note:

• To use the Yandex service, you may need Yandex mail (but this is not accurate)
• For some functions, you will have to deposit money into an account in your personal account (minimum 500 rubles).

After successful registration and authorization, we are in your personal account.

Next, on the left in the menu, you need to find the "Object Storage" service, which we will just use to host the site.

Briefly in terms:

• Object Storage is a file storage that is compatible with Amazon's similar AWS S3 technology, which also has its own API for managing storage from code and can be used to host a static site just like AWS S3.
• In Object Storage, we create "buckets" (bucket / Basket), which are separate storages for our files.

Let's create one of them. To do this, in the service console, click on the "Create bucket" button.

There are the following fields in the bucket creation form, let's run through them:

• Bucket name. For simplicity, let's call the project the same as the angular project - angular-habr-object-storage
• Max. size. We set as much as the site weighs, since the site is not stored for free and for each allocated gigabyte, we will pay Yandex a pretty penny.
• Access to read objects. We set "Public", since the user must receive each file of our static site so that the layout is correctly drawn on it, scripts are worked out, and so on.
• Access to the list of objects and Access to read settings. We leave "Limited". This is necessary in order to use the bucket as an internal file storage for applications.
• Storage class. We leave "Standard". This means that our site will be visited frequently, and therefore the files that make up the site will be downloaded frequently. Plus, the item affects productivity and payment (insert link).

Click "Create bucket" and the bucket is created.

Now we need to load our site into a bucket. The easiest way is to open a folder nearby dist of our site and drag it directly onto the page with handles. This is more convenient than pressing the "Load objects" button, because in this case the folders are not transferred and they will have to be created manually in the correct sequence.

So, the site is loaded into the storage, so we can provide users with the ability to access the storage as a site.
To do this, on the left menu, click on the "Website" tab.

On the page for setting up a bucket as a site, select the "Hosting" tab. Here we indicate the main page of the site, usually it is index.html. If you have a SPA application, then probably all errors are also processed on the main page, so we will also indicate index.html on the error page.

We immediately see which link will be available to our site. Click save.

After 5 minutes, by clicking on the link, we see that now our site is available to everyone.

Thanks to everyone who read to the end! This is my first article, I plan to further describe other Yandex services and their integration with frontend and backend technologies.

Write in the comments how interested you are in learning about other Yandex services or about using Angular in modern development.

Source: habr.com