deno deploy의 템플릿 기능을 사용하여 오미쿠지 게시

deno deloy의 템플릿 기능이 재미 있었기 때문에 소개하고 싶습니다.

deno deploy의 템플릿 기능을 사용하여 오미쿠지 게시

샘플로서 오미쿠지의 템플릿을 준비했으므로, 이것을 사용해 템플릿 기능의 사용법을 해설해 갑니다.

먼저 아래 링크를 클릭합니다.
가입을 마치면 다음과 같은 화면이 표시되므로 순서대로 입력합니다.

오미쿠지 1~4에 오미쿠지 종류를 입력하고 [Create]를 클릭하면 오미쿠지를 당길 수 있는 웹사이트가 공개됩니다. (문장란은 비어도 가능)

샘플: htps : // 오미쿠지우 p. 에서. 에서 v/


deno deploy의 템플릿 기능을 사용하면 이렇게 코드를 작성하지 않고 순식간에 웹 사이트를 게시 할 수있었습니다.

이번에는 오미쿠지 템플릿을 사용했습니다.

템플릿을 만드는 방법

웹 프레임워크 등 라이브러리 작성자는 자신의 코드를 템플릿으로 공개할 수 있습니다.

이것도 오미쿠지의 예를 사용해 해설해 갑니다.

①환경변수를 사용하여 코드 작성

사용자가 설정할 수 있도록 하는 부분(이 경우는 오미쿠지의 종류)을, Deno.env.get() 를 사용해 환경 변수로부터 읽어들이도록 합니다.

import { listenAndServe } from "https://deno.land/[email protected]/http/server.ts";
import { sample } from "https://deno.land/[email protected]/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("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
}

②web상에 코드를 공개한다

템플릿은 URL로 지정되므로 코드는 웹에 게시해야 합니다. (그렇다고해도 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을 취득할 필요가 있습니다.
공식 사이트

요약

템플릿 기능을 사용하면 웹 사이트를 쉽게 게시 할 수 있습니다

아직 베타 버전이므로 사용할 수있는 템플릿은 적습니다

웹 사이트의 편지지를 템플릿으로 해두면 편리 할지도

이 기능( https://dash.deno.com/new 의 쿼리 파라미터에 env 를 붙이는 방법)은 공식 문서의 예로 사용되고 있지만, 정식 명칭을 모르기 때문에, 기사중에서는 템플릿 기능이라고 호칭하고 있습니다. 정식 명칭을 아는 분은 알려주세요!