How to deploy a static website on Alibaba Object Storage Service?
Even if most of the websites are not directly coded in HTML, and basic CSS, like it was a few years ago when I started studying IT on my own, there is a lot of static website generator, like Hugo, or Jekyll, that may suit to your needs for personal blogs, or just to host some random content.
If you're already friendly with this kind of frameworks, now, you will need to find a place to host these static pages, at a low price. That's where Alibaba OSS, will help us. On my last article, we talked about FTP servers, backed by S3 buckets.
Here, we will also use another (S3) Object Storage Service, which comes from China: Alibaba OSS. Since many years now, Amazon is still dominating the European and American market, but Alibaba is the cloud provider number one in Asia.
Warning:
-As most other Object Storage providers, Alibaba is charging you depending on your bandwidth (and obviously your traffic). If you have a lot of traffic, be prepared to pay a relatively large amount.
Prerequisite:
-have an index.html page which will be used for homepage
-have an error.html page which will be used for error page
-have a domain or subdomain which can be used with a CNAME record
-any Linux based server publicly available (IPv4 or IPv6)
The main advantage with Alibaba Object Storage Service, is that we don't need an Load-Balancer, or a Proxy in front of your bucket as it's the case, with AWS, Scaleway, or any other S3 compliant provider.
One important thing is that the HTTP to HTTPS redirection isn't available on Alibaba Object Storage Service. They told me that they were working on it, but not ETA.
Step 1: Create a bucket
So, let's start, by something obvious! Let's create a bucket. You can do that with an S3 compatible CLI like AWSCLI, or S3CMD. In my case, I will use the Alibaba Console to create the bucket.
Let's use the following settings:
-Bucket Name: any name
-Region: use the nearest region where your audience is based
-Storage Class: select Standard
-Versioning: select "Disable"
-Access Control List: select Public Read
-Encryption Method: any choice
-Real-time Log Query: disable to avoid additional fees
-Scheduled Backup: select Disable
Step 2: Create and upload essentials files
As I've said on requisites, you will need 2 important .html files.
-index.html as any web server, by default Alibaba OSS, will redirect your users to this page for the homepage
-error.html (or any other name), which will be displayed when an error occurs with your website content (eg. 404 error).
From my side, I have both of these files:
<!-------------- Here is my index.html file-------------->
<!doctype html>
<title>Welcome to my amazing static website</title>
<style>
body {
text-align: center;
padding: 150px;
}
h1 {
font-size: 50px;
}
body {
font: 20px Comic Sans MS, Comic Sans, cursive;
color: #333;
}
article {
display: block;
text-align: left;
width: 650px;
margin: 0 auto;
}
</style>
<article>
<h1>Welcome to my amazing static website! 🚀</h1>
<div>
<p>This website is powered by Alibaba OSS (Object Storage Service). <br>
My website is so modern, that's incredible!</p>
<li>modern font</li>
<li>modern technologies</li>
<b>I'm on the future!</b>
</div><br>
<small>PS: Comic Sans MS 4 ever</small>
<!-- plz U beg you don't use any outdated tags like <small> or multiple <br> #html1.0 -->
</article>and I have the second one:
<!-------------- Here is my error.html file-------------->
<!doctype html>
<title>My website occured an error</title>
<style>
body {
text-align: center;
padding: 150px;
}
h1 {
font-size: 50px;
}
body {
font: 20px Comic Sans MS, Comic Sans, cursive;
color: #333;
}
article {
display: block;
text-align: left;
width: 650px;
margin: 0 auto;
}
</style>
<article>
<h1>My website occured an error! 😭</h1>
<div>
<p>Sorry guy, this page or the content that you're looking for seems to be... removed! <br>
Solutions to solve the issue:</p>
<li>-nothing</li>
<li>-nothing</li>
<li>-literally nothing</li>
</div>
</article>Let's upload them on our bucket! Go back to your Alibaba Console, click on your bucket, then on the left menu, select "files" and "files". Once it's done, click on "Upload".
Then, don't modify any option, and drag and drop both files, or click on "Select files".
After a few seconds, you will see that files are uploaded, and are ready to be used.
Step 3: Configure our static website and domain
Now, we will have to define our index and error page/files. On the left menu, click on "Basic settings", and select "Static Pages".
Input your index page name, and your error page name.
Please note that only .html files are authorized for the index page.
For the error page, you can still use .html, or any standard picture extension.
And save these settings by clicking on "save".
Now, the static website is configured, and all files are publicly exposed on our Object Storage endpoint, here:
staticwebsite-tom.oss-us-west-1.aliyuncs.comWhen you try to reach this URL, all files are automatically downloaded, and that's a normal behavior. As a reminder, the S3 protocol and Object Storage service aren't build by default to host websites, but just to store and serve files.
Now, we have to connect our custom domain or subdomain to our bucket.
On the same left menu, click on "Transmission", and click on "Domain Names".
Click on "Bind custom domain name". And add your custom domain name, and click to "Submit".
As in most of the cases, your domain won't be available on your Alibaba Console, we will have to add the CNAME record manually. So let's do it!
Add a new CNAME record with your DNS provider (here Hetzner DNS).
In name put your subdomain or let it empty and on value paste your bucket endpoint.
Save the record from your side, and let the DNS magic do the work!
After few minutes, we can see that it's working well, and both of our pages are displayed!
Now, our site is reachable, but only via the HTTP protocol.
Also, we don't have any SSL certificate, so each user will see a warning page, when trying to connect to your website.
Step 3: Generate SSL certificates, and configure it
Now, let's do the most important things! Here, we don't need any Load-Balancer in front of your bucket, but just a temporary Linux machine to generate SSL certificate. In my case, I will use a DEV1-S instance from Scaleway deployed with Ubuntu Focal Fossa.
First, connect to any Linux server. Then, once connected, please perform.
snap install certbot --classic
#For Ubuntu users onlyThen, wait until you get the following output.
Now, let's go back to our DNS manager.
First, delete the CNAME record. Once it's add an A record with your IPv4 instance pointing to the same subdomain previously used. To be sure, we can check that the A record is now successfully added. And here in my case, it's working well.
Now, go back to our Linux instance, and generate the certificate, with the following command:
certbot certonly -d yoursubdomain.domain.tld
When asked, please select option 1. Certbot will automatically deploy a temporary web server to see if you're the domain/subdomain owner.
Now, you will be asked, for your email, type it, and press enter.
Then, you will be requested to accept Let's Encrypt ToS, and also to decide if you want to be added to the Electronic Frontier Fundation newsletter.
Once you will see "cleaning up challenges", that's done!
Now, you will see the 2 important files locations. The "fullchain.pem" and "privkey.pem" files will be important, and we will upload them on the Alibaba Cloud console.
Now, go back to your DNS manager, remove the A record, and add again the CNAME record.
Jump back again on your Alibaba Cloud console and select your bucket. On the left menu, select transmission, then "Domain names".
On the right subdomain/domain used, click on "Upload certificate". And you will be asked for 2 complete files content:
On the first input, you will be asked to paste the content from the "fullchain.pem" file, which can be displayed with:
cat /etc/letsencrypt/live/yoursubdomain.domain.tld/fullchain.pem
# Display the certificate and the chain, and paste it on the first inputOn the second input, you will be asked to paste the content from the "privkey.pem", also with this command:
cat /etc/letsencrypt/live/yoursubdomain.domain.tld/privkey.pem
# Display the private key, and paste it on the second inputOnce it's done, click on "Upload", and wait few seconds! In some cases, it can take up to 15 minutes to be fully loaded and active.
Now, let's check our certificate validity. With SSL Shopper Checking Tool, we can see that the SSL certificate is working well, and not misconfigured.
Also, the SSL website is working well, we can see that the SSL certificate is now successfully added.
Congratulations, you've successfully deployed your own static website on Alibaba Object Storage Service!