قالب وردپرس درنا توس
Home / Tips and Tricks / How to use CloudFlare workers and KV to earn a static website – CloudSavvy IT

How to use CloudFlare workers and KV to earn a static website – CloudSavvy IT



CloudFlare

An innovation in edge computing has taken place in recent years. CloudFlare (CF) Workers makes it possible to run JavaScript applications on the server side directly on the edge, closest to a consumer. Whether it is a simple or complex application, a CloudFlare Worker locks fantastic performance without a cold start for a fraction of the price that a traditional serverless computer offers.

Together with the concept CF Workers, a function called Workers KV (key-value) data warehouse enables to save and serve data directly to a worker. With this feature, you can use workers as a database and repository that allows static websites to be viewed directly from the edge. In this article, we explore exactly how to provide a new simple static website supported by CloudFlare Workers.

Getting Started

This article assumes that you already have a CloudFlare account and that the account is linked to a domain. You also need the Workers Bundled plan, which offers the KV function. The following features are available and where they differ from the free plan.

  • Minimum $ 5 fee and $ 0.50 / million requests per month
    • 1
      0 million requests before additional fees are needed
  • Distribute up to 30 locations
  • Free workers. Subdomain
  • Up to 50 ms CPU time per request
    • The free plan offers 10 ms
  • Always the lowest latency
  • Access to Workers KV
    • Up to 100 namespaces (think databases)
    • 1 GB of storage ($ 0.50 per additional GB of storage)
    • 10 million read operations, 1 million write, delete and list operations
      • $ 0.50 per additional 1 million read operations and $ 5.00 per additional 1 million write, delete and list operations

Once you have purchased the CloudFlare Workers package, you can use Workers KV and the CloudFlare Workers Site feature.

Wrangler command line tool

To create a website distribution, CloudFlare has created Wrangler command line tools. Wrangler requires installation via either NPM (NodeJS package manager) or Cargo (Rust language package manager).

NPM installation

npm i @cloudflare/wrangler -g

Shipping

cargo install wrangler

If you do not want to use the included OpenSSL binary, you can choose to use the OpenSSL system by installing with the following command line. This reduces the installation size.

cargo install wrangler --features sys-openssl

Create a website

Now that you have Wrangler installed and workers purchased, we can create our website. In this example we use 1.11.0 version of Wrangler, which introduced a newer and simpler authentication method. This also assumes that PowerShell is the shell environment used, but Wrangler works in anyone that supports NPM or Cargo installations.

Wrangler login and website creation

First we will log in to CloudFlare with Wrangler. To do this, we use the new wrangler login feature. This will require the opening of a web page, and if you are already authenticated in CloudFlare, the authentication will be very fast. Otherwise, log in and Wrangler configures the API token automatically.

wrangler login

Wrangler login feature

Log in and Wrangler configures the API token automatically

As you can see from the configuration site, there is one .toml file that now contains your API token to make all subsequent actions seamless.

Generate the website

Then we generate the website itself. Use generate command, we quickly create the site. At this time, it is also recommended that you navigate to the site directory and create a new archive via git init. This is an optional step but is highly recommended.

wrangler generate --site worker-site

Navigate to the website directory and create a new archive via git init

Site structure

Wrangler creates the following website structure:

  • public – These are the static assets for your standard project index.html and favicon.ico file.
  • workers-site JavaScript that runs the operation of the static website, located in index.js file. This should not be edited unless you need to add additional features.
  • wrangler.toml – The configuration file that points to the account and project information.

You may notice the warning displayed about the need to update the project wrangler.toml file. You must at least add account_id value within wrangler.toml file to preview the site.

To retrieve account ID, the easiest way is to navigate to the CloudFlare dashboard, click Workers, and find the account ID.

Retrieve account ID by navigating to the CloudFlare dashboard, clicking Workers, finding Account ID.

Open wrangler.toml and update account_id value to your CloudFlare account value.

Open wrangler.toml, update account_id value to CloudFlare account value.

Preview the site

To verify that the site is working properly, you can use preview command from Wrangler to generate the site and display the site in the browser. By adding --watch parameter, any changes you make to the site will be immediately reflected in the browser window.

wrangler preview --watch
Use the Wrangler preview command to generate and display the site in the browser.  When you add the --watch parameter, all changes are reflected immediately
Use the Wrangler preview command to generate the site and display the site in the browser. By adding the -watch parameter, all changes you make to the website will be immediately reflected in the browser window.

Use the Wrangler preview command to generate and display the site in the browser.

Distribute the site to production

The next step would be to distribute this site for production. There are only a small handful of configurations that need to be adjusted in wrangler.toml file.

  • zone_id – The website to which the worker will be applied.
  • route – Where the worker will be applied to.
  • workers_dev Change this value to false.

You can download zone_id by navigating to the website to which you want to apply the worker in the CloudFlare dashboard, go to the overview page and find the zone ID under the API section.

Download zone_id by navigating to the website you want to apply Worker to in the CloudFlare dashboard, go to the overview page and find zone ID under the API section.

To configure the route, you usually use one of two formats, which will serve a page under either a top-level domain or a sub-domain:

  • example.com/*
  • subdomain.example.com/*

The end result of your wrangler.toml the configuration should look like this:

name = "worker-site"
type = "webpack"
account_id = "my-account-id"
workers_dev = false
route = "example.com/*"
zone_id = "my-zone-id"

**[**site]
bucket = "./public"

Finally, run publish command to make the site public and create the Workers Site below the specified zone and route.

wrangler publish

Run the Publish command to make the site public and create the Workers Site below the specified zone and route.

Conclusion

CloudFlare Workers websites offer powerful functionality with easy access to developers. Static websites are incredibly fast and secure due to lack of interactivity. Not all use cases solve this, but the ease of use and lack of third-party servers required to host the site make this feature very attractive!


Source link