Previously, when I thought about deploying a full-stack website (frontend and backend), I always defaulted to choosing a suitable VPS, installing the necessary services, and then configuring the domain. This architecture was almost an automatic choice in my mind; I didn’t have, nor did I consider, any other options.
Recently, my work required me to find solutions for simple websites that needed fast loading speeds. So, I started researching methods to optimize loading speed. Luckily, during that time, I came across some modern serverless services and decided to take a look. I ended up choosing Cloudflare Workers to experiment with on this blog because of its comprehensive ecosystem and, in part, because I have a positive impression of the platform.
Serverless services have been around for a while, but a common drawback was the excessively long cold start time, which previously made them unsuitable for creating dynamic websites. This was a default assumption in my mind whenever a task involved website deployment. The biggest surprise I got this time around was discovering that some modern serverless services now have a cold start of… 0 seconds. This was the most exciting thing for me and completely changed my previous way of thinking.
If websites used to be on a VPS, now they’re on the “edge” with Cloudflare Workers. User requests no longer have to go through Cloudflare to reach the VPS; they are processed directly at Cloudflare and returned to the user, significantly increasing page load speed. This blog has simple requirements: high speed and the ability to handle a backend for APIs. For example, the comment feature you see below this post needs an API to save and retrieve data from D1—Cloudflare’s SQL database service. Similarly, a full-text search feature for articles that I plan to implement also requires an API to work in a similar fashion, though the database would be different from D1.
Experiencing new technology always excites me, so I decided to try something new again this time. I had heard a lot about modern SSR frameworks like Next.js and Nuxt.js but had never built a complete website with them. This time, I decided to find a modern SSR framework that was simpler, and Astro was the perfect choice for this blog.
In Astro, creating a new page is as simple as creating an *.astro file with the following content:
---
// src/index.astro
const pageTitle = "javascript goes here"
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>{pageTitle}</title>
</head>
<body>
<a href="/">Home</a>
</body>
</html>And if you want to add an API endpoint, you just need to create a *.ts file with this content:
// src/api/comments.ts
import type { APIRoute } from 'astro';
export const GET: APIRoute = async ({ request }) => {
try {
const comments = getPostComments(new URL(request.url).searchParams.get('post-slug'));
return new Response(
JSON.stringify({ comments }),
{ headers: { 'Content-Type': 'application/json' } }
);
} catch (error: any) {
return new Response(
JSON.stringify({ error: 'Failed to fetch comments', message: error?.message }),
{ status: 500, headers: { 'Content-Type': 'application/json' } }
);
}
};When I make changes or write a new post, I just need to push the code to GitLab, and Cloudflare Workers automatically clones the new source, builds, and deploys it. Everything is very simple.
The result is the website you are seeing now, built with the Astro framework and running on the Cloudflare Workers edge computing platform. The website is no longer on a VPS, and requests no longer have to go through Cloudflare to reach the backend because the backend is now right on Cloudflare. Unlike before, when I knew exactly where my website was located, now I only know it’s on Cloudflare; where the instance is created depends on the user’s access location.
Building this website was part of my technology research to support my work. Fortunately, this time I hit the jackpot because it completely changed my thinking about traditional website deployment, opening up an entirely new direction for me.
Bình luận