Deploy a site in the cloud for a ruble per month

Deploy a site in the cloud for a ruble per month

As often happens: you make a pet project, develop a front-end landing page, and then realize that you need to test it. See how the page is displayed on different devices to adapt it correctly. After all, DevTools do not always reflect the “full picture”.

Another scenario is possible. Sometimes you need to publish a page on the Internet, for example, with examples of works in photography or design. In situations like this, there are statistical HTML pages that should just be available for viewing. And it is not always advisable to rent a full-fledged server to close such small tasks.

Hello, Habre! My name is Sashko, in this article I will tell you how to deploy a static website to the cloud using object storage starting at 1₽/month. And also set up a good domain. Details below.

What is a static site?


There are two types of sites: dynamic and static. Static text web pages were the first to appear. Gradually, as technology developed, they turned into interactive and flexible sites.

Static site – This is a site that consists of unchanged content. As a rule, is an HTML document stored on the server. Most often, a static site type is used to create a business card site, product catalog, and documentation.

Static sites are easier to create and administer, and they load quickly in the browser. The main disadvantage is the difficulty of making changes. For example, the content of a dynamic site is drawn by scripts, and if you need to add a card to the site, it will be enough to enter information about it in the array of objects. For a static site, you will have to make changes to the HTML document and draw the new component yourself with the code. The history of the dynamic site type began with this shortcoming.

The site is a dynamic type – This is a site with static pages and dozens of scripts. Such sites include online stores, social networks and forums.

The main feature of such sites is scalability. However, this feature also turns into a disadvantage: more system resources are required for development and implementation, the speed of loading the site in the browser decreases, and it is also more difficult to create and further administer such a site.

Despite the primitiveness of the technology, static sites are still needed. They are easier to develop and they allow you to get mostly high-quality results at a minimal cost.


Why should you place static sites in object storage?


As a rule, developers place sites on the server with the help of additional software: Apache, Nginx and other programs. Hosting a site in this way requires administrative skills, and you will also encounter errors that will require additional time to resolve. When using the object storage, it is enough to load the HTML document through the graphical interface. This process takes less time and requires a minimum of skills.

Here are some more advantages of object storage when using it as a tool for hosting static sites:

  • specifying the index file for the absolute path “/”;
  • specifying an error page for redirection from non-existent pages;
  • specifying the CSS style file for the index file;
  • view statistics upon request;
  • managing headers for caching;
  • attachment of second-level domains;
  • low cost of use – from 1₽ per month.

We place the site in storage

Let’s consider practically how to publish a site in the object storage.

For work we will need:

  • public container in the object storage (how to create a container, we will tell you below in the instructions);
  • index page, error page and style files;
  • access to any API platform.

After preparing the necessary components, let’s get to work.

We create a container

Log in to the control panel

my.selectel.ru

and we go to the section

Object storage

. An object storage service is usually associated with a cloud project, in our case, MySite.

To create a container in which we will place our site, click on the button Create a container.

We specify the parameters of the container – the name of the project.

Upon successful authorization, the service will return a 201 response and in the X-Subject-Token header response you will be able to find the Keystone token in the format: x-subject-token: .

We set the container settings

Using a PUT request with /v2/containers/{container_name}/options you can make specific settings for the container options:

{
        "general": { #Настройки кеширования
                "cache_control": "max-age=604800", #Установка значения заголовка для управления кешем
                "default_delete_after": 3600, #Время удаления объекта в формате Unix Timestamp
                "type": "private" #Поддерживает значения:
                       #public — ответ может быть закеширован в любом кеше
                       #private — ответ предназначен для одного пользователя и не должен помещаться в разделяемый кеш
        },
        "quota": {
                "max_bytes_used": 1024, #Установка максимального количества используемых контейнером квот в байтах
                "max_object_count": 10 #Установка квоты на максимальное количество объектов в контейнере
        },
        "web": {
                "error": "error.html", #Путь к файлу ошибки
                "index": "index.html", #Путь к индексному файлу
                "listing_css": "style.css", #Путь до файла со стилями, который будет использован при отдаче страницы
        }
}

It is not necessary to specify all parameters, so in our case we will specify only: error, index and listing_css. To set the parameters, we use the curl utility again:

curl -XPUT -H'X-Auth-Token: <токен Keystone>' \ 'https://api.ru-1.storage.selcloud.ru/v2/containers/`<наименование контейнера>`/options' \ -d'{"web": {"error": "/error.html","index": "index.html", "listing_css": "style.css"}}'

We check the entered settings

After specifying the container parameters, the index file will be given by the public domain of the container.

If you specify a path that does not exist, an error page will appear.

That’s it, we finished the main work on placing a static site. But regardless of the intended purpose of creating a site, the domain should be memorable and therefore simple. For this reason, we will consider how to change a chaotic set of numbers and letters to a unique user domain.

We add the user’s domain


Anyone who has thought about creating their own Internet resource will definitely need a domain — without it, users will not be able to find the page in search results.

Site domain – This is a unique site name within the worldwide Internet. It can consist of symbols, letters or numbers.

For further work, we will need a domain, which can be purchased from any domain name registrar. Note that only a third-level domain can be added to a container. This is a domain consisting of three words separated by a dot. In this context, “word” is an alphanumeric combination that can contain all characters except a period. An example of such a domain: my.selectel.ru.

Add a CNAME record


On the control panel of the DNS records of the hosting in which we have a registered domain, we add a CNAME record with the following parameters:

  • record type – CNAME;
  • record name – user domain;
  • value – access.ru-1.storage.selcloud.ru.

In our case, we set up a third-level domain

www.dinosaur-mood.ru

.

After changing the DNS record of the domain, it is necessary to wait some time for it to be updated to the current one.

We add the user’s domain to the container

In the container card, go to the tab

Domains

enter the prepared domain of the third level into the window

User domain

and add it to the container after clicking the button

Attach

.

The domain will appear in the list

Attached domains

on the same tab.

We check the entered settings

Let’s go in the browser to the domain that you attached to the repository, and admire the work!

We issue an SSL certificate

If you try to open a page from a pinned domain, the browser may display the message “Your connection is not private.”

You did everything right, all that remains is to issue an SSL certificate for the domain. This is a digital certificate that confirms the authenticity of the website and allows you to use an encrypted and therefore secure connection.

We issue an SSL certificate from Let’s Encrypt

Let’s Encrypt

This is a certificate authority that provides free SSL/TLS certificates. Issuance of certificates is fully automated and easy to implement.

You can find detailed information about Let’s Encrypt on the official website.

Preparation

We need a Linux system to issue the certificate. When using Windows, you need to install the WSL subsystem, it allows you to run a Linux environment on a Windows computer.

To install WSL with Ubuntu for Linux, open a command prompt (cmd.exe) and type:

wsl --install

Once the installation is complete, run the WSL program through the GUI.

We install Certbot

Certbot

is an ACME (Automatic Certificate Management Environment) protocol client used to manage SSL certificates from Let’s Encrypt. When installing the Certbot client, snap packages are required, which require the snapd utility to manage. In Ubuntu, it is already installed by default, so we only need to check to update the snapd kernel to the latest version with the following command:

sudo snap install core; sudo snap refresh core

Next, install the certbot package:

sudo snap install --classic certbot

After installation, create a symbolic link to the certbot command from the snap installation directory:

sudo ln -s /snap/bin/certbot /usr/bin/certbot

We issue an SSL certificate

You can issue a certificate through the Certbot client in different ways. We will consider a method that involves making a TXT record on the domain.

Let’s initialize the process of issuing a certificate with the command:

sudo certbot certonly --authenticator manual --preferred-challenges dns

After executing the command, a line will appear:

Saving debug log to /var/log/letsencrypt/letsencrypt.log Please enter the domain name(s) you would like on your certificate (comma and/or space separated) (Enter 'c' to cancel):

We enter the domain of the first level, in case

dinosaur-mood.ru

and press Enter.

Thus, we have sent a request to issue a certificate for our domain. The process of executing the request is accompanied by the output of the line:

Requesting a certificate for dinosaur-mood.ru.

If the request is successful, the TXT record and its value will appear in the window.

Go to the control panel of the domain’s DNS records and add the received TXT record, as we did before.

Displaying the record on the control panel of the registrar:

After creating a record, you need to wait some time for it to be updated on the domain. To track the result, you can use third-party Internet resources, for example

MxToolBox

you can also check in a new console window using the dig utility:

dig _acme-challenge.dinosaur-mood.ru TXT

The response to the request should display the entry:

;; ANSWER SECTION: 
_acme-challenge.dinosaur-mood.ru. 0 IN TXT "iLlPWHBLVdthtmcWvgsB8VwpWQXOdeShIK_3OlcM6Xc”

If the record is displayed correctly, go to the window in which the process of issuing the certificate is launched, and press Enter. If the certificate is successfully issued, you will see the following response:

Successfully received certificate. #подверждение успешного выпуска сертификата
Certificate is saved at: /etc/letsencrypt/live/dinosaur-mood.ru/fullchain.pem #путь до сертификата на локальном хосте
Key is saved at: /etc/letsencrypt/live/dinosaur-mood.ru/privkey.pem # путь до приватного ключа сертификата на локальном хосте
This certificate expires on 2024-05-22. #дата истечения сертификата
These files will be updated when the certificate renews.

Please note that if you use this method, you will need to renew your certificate after 90 days. This can be done in an identical way through Certbot.

We check the entered settings

Open our site in the browser and enjoy the result!

That’s all – the site is ready for work!

You may also be interested in these texts:

→ Is it possible to hack a hacker? Unraveling cyberattacks from the CTF tournament. Part 3
→ Real magic: the possibilities of an unusual PC with an external PCIe socket and some more
→ Dive into Kubernetes: useful materials from Selectel employees

Related posts