deno deloyのテンプレート機能が面白かったので紹介したいと思います。
deno deployのテンプレート機能を使っておみくじを公開する
サンプルとしておみくじのテンプレートを用意したので、これを使ってテンプレート機能の使い方を解説していきます。
まず、下のリンクをクリックします。
サインアップを終えると、以下のような画面が表示されるので、順番に入力していきます。
おみくじ1～4におみくじの種類を入力して[Create]をクリックすると、おみくじを引けるwebサイトが公開されます。（文章欄は空でも可）
サンプル：https://omikuji-up.deno.dev/
deno deployのテンプレート機能を使うと、このようにコードを書くことなく一瞬でwebサイトが公開できました。
今回はおみくじのテンプレートを使いましたが、公式サイトや公式リポジトリにはHello Worldや外部APIを叩く例がテンプレートとして用意されています。
テンプレートの作成方法
webフレームワークなど、ライブラリの作者は自分のコードをテンプレートとして公開することが出来ます。
これもおみくじの例を使って解説していきます。
①環境変数を使ってコードを書く
ユーザーが設定できるようにする部分（この場合はおみくじの種類）を、Deno.env.get()を使い環境変数から読み込むようにします。
import { listenAndServe } from "https://deno.land/std@0.108.0/http/server.ts";
import { sample } from "https://deno.land/std@0.108.0/collections/sample.ts";
// おみくじの種類を環境変数から取得
const omikujis = [
Deno.env.get("おみくじ1"),
Deno.env.get("おみくじ2"),
Deno.env.get("おみくじ3"),
Deno.env.get("おみくじ4"),
].filter((v) => v).map(escapeHTML);
// サーバーを建てる
listenAndServe(":80", (request) => {
if (new URL(request.url).pathname === "/") {
// パスが"/"の場合はおみくじを引く
return new Response(getOmikuji(), {
status: 200,
headers: { "content-type": "text/html; charset=utf-8" },
});
}
return new Response('404 Not Found <a href="/">top</a>', {
status: 404,
headers: { "content-type": "text/html; charset=utf-8" },
});
});
/** おみくじを引く関数 */
function getOmikuji() {
const result = sample(omikujis) ?? "おみくじが空でした。"; //length===0
return `<h1>${result}</h1>`;
}
/** HTMLをエスケープする関数 */
function escapeHTML(str?: string) {
return str
?.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll('"', """)
.replaceAll("'", "'");
}
②web上にコードを公開する
テンプレートはURLで指定するため、コードはweb上に公開する必要があります。（といっても、githubに置くだけで大丈夫です。）
コードを公開したら、
https://dash.deno.com/new?url=＜コードが公開されているURL＞&env=＜環境変数＞
というURLからテンプレートが利用できるようになります。環境変数を複数指定する場合はカンマ区切りにします。
例えば、上で紹介したおみくじの例では、
https://dash.deno.com/new?url=https://raw.githubusercontent.com/ayame113/omikuji_deploy/main/serve.ts&env=おみくじ1,おみくじ2,おみくじ3,おみくじ4,文章
というURLになります。
※コードをgithubに置く場合は、rawボタンを押してhttps://raw.githubusercontent.com/以下のURLを取得する必要があります。
まとめ
- テンプレート機能を使うと、webサイトが簡単に公開できる
- まだベータ版なので使えるテンプレートは少ない
- webサイトのひな型をテンプレートにしておくと便利かも
この機能（https://dash.deno.com/newのクエリパラメータにenvを付ける方法）は公式ドキュメントの例で使われているものの、正式名称が分からなかったので、記事中ではテンプレート機能と呼称しています。正式名称が分かる方は教えてください！