Setting up static website hosting in a Yandex Object Storage bucket with Yandex Cloud CDN access
In this tutorial, you will create a static website in a Yandex Object Storage bucket and publish it as a content origin in Yandex Cloud CDN. The connection between the client and the CDN server can use TLS 1.0 and TLS 1.1; the connection between the CDN server and Object Storage can use TLS 1.2 or higher. The website will be available via the domain name delegated in Yandex Cloud DNS, for which a TLS certificate will be issued in Yandex Certificate Manager. The website domain name will be mapped to the CDN resource using a CNAME record in DNS.
We will use the cdn.yandexcloud.example domain name as an example.
To set up static website hosting in a bucket with CDN access:
- Get your cloud ready.
- Add a certificate to Certificate Manager.
- Create a bucket in Object Storage and upload your website files to it.
- Set up static website hosting.
- Create a CDN resource.
- Configure DNS for the CDN resource.
- Test the CDN.
If you no longer need the resources you created, delete them.
Getting started
Sign up for Yandex Cloud and create a billing account:
- Navigate to the management console
and log in to Yandex Cloud or create a new account. - On the Yandex Cloud Billing
page, make sure you have a billing account linked and it has theACTIVEorTRIAL_ACTIVEstatus. If you do not have a billing account, create one and link a cloud to it.
If you have an active billing account, you can navigate to the cloud page
Learn more about clouds and folders here.
Required paid resources
The infrastructure support cost for a bucket-hosted site with CDN access includes:
- Fee for CDN server outbound traffic (see Cloud CDN pricing).
- Fee for data storage in Object Storage, data operations, and outbound traffic (see Object Storage pricing).
- Fee for public DNS requests and DNS zones if using Yandex Cloud DNS (see Cloud DNS pricing).
Add a certificate to Certificate Manager
Certificates from Yandex Certificate Manager are supported. You can issue a new Let's Encrypt® certificate or upload one of your own.
The certificate must be located in the same folder as your CDN resource.
For a Let's Encrypt® certificate, pass an ownership check for the domain specified in the certificate.
Create a bucket in Object Storage and upload your website files to it
-
In the management console
, select Object Storage. -
At the top right, click Create bucket.
-
In the ** Name** field, enter a name for the bucket.
-
Click Create bucket.
-
Create a website home page file named
index.htmlon your computer.Example of the
index.htmlfile<!DOCTYPE html> <html> <head> <title>My site</title> </head> <body> <p>The site is working</p> </body> </html> -
On the bucket page, click
Upload and selectindex.html.
Set up static website hosting
- In the management console
, select Object Storage from the list of services and go to the bucket you want to configure hosting for. - In the left-hand panel, select
Settings. - Navigate to the General tab.
- In the Object read access and Object listing access fields, select
Public. - Click Save.
- Select the Website tab.
- Under Hosting:
-
In the Home page field, specify the absolute path to the file in the bucket for the website home page, e.g.,
index.html.Warning
The key of the object containing your website homepage must not include the
/character. -
Optionally, in the Error page field, specify the absolute path to the file in the bucket to show for 4xx errors, e.g.,
pages/error404.html. By default, Object Storage returns its own page.
-
- Click Save.
Use the link in Link to check the hosting.
Create a CDN resource
- In the management console
, select Cloud CDN. - Click Create resource.
- Configure the basic CDN resource settings:
-
Under Content:
-
Enable Enable access to content.
-
In the Content query field, select
From one origin. -
In the Origin type field, select
Bucket. -
In the Bucket field, select the bucket you need from the list.
-
In the Origin request protocol field, select
HTTP. -
In the Domain name field, specify
cdn.yandexcloud.example.Alert
The
cdn.yandexcloud.exampledomain name will become the primary one, and you will not be able to edit it after you create a CDN resource.
-
-
Under Additional settings:
- In the Redirect clients field, select
HTTP to HTTPS. - In the Certificate type field, specify
Use from Certificate Managerand select a certificate for thecdn.yandexcloud.exampledomain name. - In the Host header field, select
Customand, in Header value, specify the origin domain name in<name_of_bucket_with_files>.website.yandexcloud.netformat for the source bucket to respond to CDN server requests correctly.
- In the Redirect clients field, select
-
- Click Continue.
- Under Caching, HTTP headers and methods, and Advanced, leave the default settings, then click Continue.
Configure DNS for the CDN resource
The cdn.yandexcloud.example domain name must be mapped to the CDN using DNS records.
To configure DNS:
-
Get the Cloud CDN provider domain name:
Management console- In the management console
, select Cloud CDN. - From the list of CDN resources, select the one with
cdn.yandexcloud.exampleas its primary domain name. - From DNS settings at the bottom of the page, copy the domain name in
328938ed********.a.yccdn.cloud.yandex.netorcl-msa87*****.edgecdn.ruformat depending on your CDN provider.
- In the management console
-
On the website of your DNS hosting provider, navigate to the DNS settings.
-
Create or edit a CNAME record for
cdn.yandexcloud.exampleso that it points to the domain name you copied:cdn CNAME 328938ed********.a.yccdn.cloud.yandex.netNote
Do not use an ANAME resource record with domain names for content distribution; otherwise, the end user will get a response from a CDN server not linked to the user geolocation. The response will always be the same for all users.
If you use Cloud DNS, follow this guide to configure the record:
Configuring DNS records for Cloud DNS
Management console-
In the management console
, select Cloud DNS. -
If you do not have a public DNS zone, create one:
- Click Create zone.
- In the Zone field, enter the website domain name with a trailing dot:
yandexcloud.example.. - In the Type field, select
Public. - In the Name field, specify
example-dns-zone. - Click Create.
-
Create a CNAME record for
cdn.yandexcloud.examplein the zone:- Select
example-dns-zone. - Click Create record.
- In the Name field, specify
cdn. - In the Type field, specify
CNAME. - In the Data field, paste the copied value in
328938ed********.a.yccdn.cloud.yandex.net.orcl-msa87*****.edgecdn.ru.format (depending on your CDN provider) with a trailing dot. - Click Create.
- Select
-
Test the CDN
Check your website for availability:
-
Wait for the DNS records to get updated (this may take several hours) and for the files to be prefetched to the CDN servers.
-
Open your website at the new URL:
https://cdn.example.com
How to delete the resources you created
To shut down the infrastructure and stop paying for the resources you created: