🦕

Deno Deployでコードをサクッと実行してURL APIも試す

2021/07/04に公開

Deno

Deno Deploy

tech

Deno公式のエッジサーバーサービス、Deno Deployを使ってみました。

https://deno.com/deploy

Denoの象徴、夜の雨が降りしきるTOPページです。かっこいいですね。

ローカルで動かす

Deno Deployでは、ローカルサーバーを動かすdeployctlが提供されています。

以下のコードで導入できます。

deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -f https://deno.land/x/deploy/deployctl.ts

公式のHello Worldを参考に、簡単なserver.tsを作成してみます。

server.ts

addEventListener("fetch", (event) => {
  const response = new Response("Hello Deno Deploy!", {
    headers: { "content-type": "text/plain" },
  });
  event.respondWith(response);
});

実行！ ^[1]

❯ deployctl run --watch ./server.ts
Check file:///Users/kawarimidoll/ghq/github.com/kawarimidoll/deno-deploy-practice/$deno$eval.ts
Check data:application/typescript;base64,（略）
Listening on http://0.0.0.0:8080

別ターミナルから確認してみます。

❯ curl 0.0.0.0:8080
Hello Deno Deploy!

疎通できています。
サクッとローカルサーバーを立てられました。

Deployする

ユーザー登録する

Deno Deployページ内のSign inかSign upを押すと登録画面へ遷移します。

GitHub連携で登録します。他の登録方法はないようです。

空っぽのダッシュボードに遷移します。
https://dash.deno.com/projects

これで登録は完了です。

リポジトリを連携する

GitHub連携でDeployするため、リポジトリを作成しました。

ではDeployします。
ダッシュボードのNew Projectからエントリーしましょう。

プロジェクト名の設定画面に入ります。
今回は練習なのでランダム生成の名前をそのまま使います。

続いてデプロイするコードの選択画面です。
提示されているサンプルもデプロイできるほか、Deploy URLを使うと、GitHubに限らず任意のサーバー上に公開されているコードを使ってDeployできます。
今回はとりあえずGitHub連携を使うので、下のDeploy from GitHubのContinueを選択します。

Deploy from GitHub
Publish a project from an existing GitHub repository.
Link this project to a GitHub repository to automatically deploy on push. Pushing to the default branch (usually main) will create a production deployment. Pushing to any other branch will create a preview deployment.

訳：

Deploy from GitHub
既存のGitHubリポジトリからプロジェクトを公開します。
プロジェクトをGitHubリポジトリにリンクすると、プッシュされたときに自動でデプロイされます。デフォルトブランチ（通常はmain）にプッシュした場合はProductionデプロイ、その他のブランチにプッシュした場合はPreviewデプロイとなります。

Continueするとリポジトリとの連携の画面に遷移します。

説明に従い、entrypointのファイルのGitHub URLを入力します。
今回はこちらです：https://github.com/kawarimidoll/deno-deploy-practice/blob/main/server.ts

入力するとProductionブランチの選択が表示されます。

デフォルトブランチを使うか、入力したブランチ（main）を使うかを選択します。
今回はどちらでも同じですが、リリース用としてデフォルト以外にreleaseとかpublishとかのブランチを用意する場合に使えそうです。

ということでLink、しようとしたらエラーが出ました。

連携するリポジトリにはDeno Deploy GitHub Appを導入する必要があります。
Install GitHub AppからDeno Deploy GitHub Appを導入しましょう。

All repositoriesで全リポジトリに反映させるか、Only select repositoriesでリポジトリを選択するかしてInstallします。
途中でGitHubの再サインインがあるかもしれません。

なお、既にDeno Deploy GitHub Appがユーザーに導入されている場合は、おちらの設定画面に飛ばされます。
同様にリポジトリとの連携設定を行ってください。

連携が成功するとDeno deployに戻ってきます。

リンクされました。

Back to projectでプロジェクトのトップに戻りましょう。

エンドポイントは[project-name].deno.devです。
ページ右上のVisitがリンクになっているので、ここからアクセスしてみます。

OKですね。作成したコードがWeb上でも動作しています。

パスに応じた処理を行う

これだけだとアクセスに対しHelloを返すだけですね。
少し実際のアプリケーションに近づけるため、かなりローレベルですが、URL APIを使って処理を追加してみます。

server.ts

  addEventListener("fetch", (event) => {
+   const { host, pathname, searchParams } = new URL(event.request.url);
+   const params = Object.fromEntries([...searchParams.entries()]);

+   console.log({ host, pathname, params });

+   const message = "Hello Deno Deploy!";

+   if (pathname.endsWith(".json")) {
+     const response = new Response(JSON.stringify({ message, params }), {
+       headers: { "content-type": "application/json" },
+     });
+     event.respondWith(response);
+     return;
+   }

-   const response = new Response("Hello Deno Deploy!", {
+   const response = new Response(message + " from " + pathname, {
      headers: { "content-type": "text/plain" },
    });
    event.respondWith(response);
  });

ローカル実行用のdeployctlコマンドにwatchオプションを付けていれば、server.tsを更新すると自動でサーバーが再起動します。

これでリクエストしてみます。

❯ curl '0.0.0.0:8080'
Hello Deno Deploy! from /

❯ curl '0.0.0.0:8080/test'
Hello Deno Deploy! from /test

❯ curl '0.0.0.0:8080/test.json'
{"message":"Hello Deno Deploy!","params":{}}

❯ curl '0.0.0.0:8080/test.json?q=deno&lang=ja'
{"message":"Hello Deno Deploy!","params":{"q":"deno","lang":"ja"}}

pathnameやsearchParamsを認識できています。

ではmainブランチにpushします。
ダッシュボードを確認すると、即座に反映されていることがわかります。