DenoのCDN Edgeサービス – DenoDeployでサーバレスJS/TSを実行する

2021.04.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Introduction

先日β版としてDeno Company(deno,nodeの作者であるRyan Dahl氏の会社)から
リリースされたCDN Edgeサービスです。
JavaScript、TypeScriptをサーバレス&エッジで高速に実行できます。
Cloudflare WorkersLambda@Edgeみたいなサービスですね。

Features

おもな機能は公式ドキュメントにかいてありますが、
JavaScript/TypeScritでスクリプトを作成でき、
Deno CLIでローカルで開発&テストしたり、迅速にDenoDeployへデプロイ可能です。

TypeScriptとJSXがビルトインでサポート、
GitHubとの統合、Cloudflare WorkersのAPIと互換性がある、
などの特徴を持っています。

Quick Start

実際につかってみましょう。
Githubにtsファイルをpushし、DenoDeployで実行してみます。

1.Create Github Repository

Githubにログイン後、適当なリポジトリを作成します。
ここではdenodeploy-exampleという名前のリポジトリをつくりました。

2.Create DenoDeploy Project

DenoDeployからGitHubでログインします。
New Project を選択して

プロジェクト名を決定。

GitHubからpublishするので、Conninueボタンをクリックします。
そのあとGit integrationでデプロイ元のパスを設定します。
main branchにプッシュすると、production用のデプロイ、
それ以外のbranchにプッシュするとpreviewが作成されます。
ここは後で設定するので、とりあえずblankのまま。

Environment Variablesをクリックすると、環境変数を設定できます。
ここで設定した値はスクリプトのDeno.envで参照できます。

KeyにFOO、Valueにbarと入力しましょう。

3.write a program

さきほど作成したGithubリポジトリにtsファイルを作成します。
ここにあるサンプルのちょっと変えた版。

// tsmain.ts
function handleRequest(request:Request) {
  const pathname:URL = new URL(request.url);
  const value:string | undefined = Deno.env.get("FOO");
  const txt = ` Hello DenoDeploy!\n path : ${pathname}\n value:${value}\n`;
  return new Response(txt, {
    headers: { "content-type": "text/plain" },
  });
}

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

アクセスすると、環境変数の表示やリクエストパスの表示をするだけのシンプルなスクリプトです。
まずはローカルで動作の確認をしましょう。
deployctlというツールをインストールすれば、ローカルでスクリプトの確認が可能です。

※ Denoが必要なので別途インストールしておく

% deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -f https://deno.land/x/deploy/deployctl.ts
% export PATH="$HOME/.deno/bin:$PATH"

パスをとおしたら実行。

% deployctl run --watch ./tsmain.ts
Check file:///path/denodeploy-example/$deno$eval.ts
Check data:application/typescript;base64,aW1wb
・・・
Listening on http://0.0.0.0:8080

localhost:8080にアクセスすると、文字列が表示されます。
問題なければGithubにコミット後にpushします。

push後、さきほどのGit integration画面でpush先のtsmain.tsファイルのパスを設定します。
※ Githubで対象ファイルにアクセスしたときのパス

また、deployctlではローカルだけでなく、Gihub上のスクリプトも動かすことができます。
最初、下記のようなパスを指定していたのですが、実行できませんでした。

%deployctl run https://github.com/your-path/blob/main/tsmain.ts
error: An unsupported media type was attempted to be imported as a module.
  Specifier: https://github.com/your-path/blob/main/tsmain.ts
  MediaType: Unknown

MediaTypeが違うといわれたので、Raw dataのほうのパスを指定すればOK。

% deployctl run https://raw.githubusercontent.com/your-path/blob/main/tsmain.ts

※私の環境で先日ためしたところ、push後も古い情報が表示されており、翌日まで更新されなかった

4.run script

設定が完了したらDomainにアクセスしてみます。

Hello DenoDeploy!
path : https://your-doamin-path.deno.dev/
value:bar

Summary

とりあえずDenoDeployを動かしてみました。
まだβ版なので他のEdgeサービスとは違い、
標準のデータストアがないなど(いまのところ、DynamoDBとかを別途用意)
まだ発展途上ではありますが、今後が楽しみなサービスです。

References