CloudflareのWorkers機能を試してみる

はじめに

CloudflareのWorkers機能を試してみたのでサンプルなどです。

Wrokers機能は、ServiceWorkerとしてJavaScriptを記述することでクライアント処理ではなく、サーバー処理がかけます。最大CPU実行時間制限は、無料枠で10msであるため、大した処理はできません。ですが、IFTTTのような使い方や、入力文字列をQRコードの画像で返す処理など考え方次第では面白いことができそうです。

設定方法

[Cloudflare管理画面] > [Workers] > [Create a Worker]から作成できます。

サンプル（Hello World）

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  return new Response('Hello World.', {status: 200})
}
// https://xxx.yyy.workers.dev/
// Hello World.

サンプル（body入力を出力する）

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  var ret = 'NG';
  if (request.body) {
    ret = request.body;
  }
  return new Response(ret, {status: 200})
}
// curl "https://xxx.yyy.workers.dev/" --data "OK body"
// OK body

サンプル（パラメータ入力を出力する）

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  var ret = 'NG';
  var url = new URL(request.url);
  var param = new URLSearchParams(url.search);
  if (param.has('data')) {
    ret = param.get('data');
  }
  return new Response(ret, {status: 200})
}
// https://xxx.yyy.workers.dev/?data=OK_param
// OK_param

サンプル（1x1ドットの画像応答）

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  var headers = new Headers();
  headers.append('Content-Type', 'image/bmp');
  headers.append('Access-Control-Allow-Origin', '*');
  var options = {
    headers: headers,
    status: 200
  };
  var ret = new Uint8Array([66,77,66,0,0,0,0,0,0,0,62,0,0,0,40,0,0,0,1,0,0,0,1,0,0,0,1,0,1,0,0,0,0,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,255,0,128,0,0,0]);
  return new Response(ret, options)
}

サンプル（fetch処理）

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = '${URL}';
  fetch(url).then((response) => {
    ;
  });
  return new Response('OK', {status: 200})
}

※${URL}を置換える