🚇

Deno tunnel 使ってみた【面白い】

に公開

Deno Advent Calendar 2025 8日目の記事です。


こんにちは。毎年 deno のアドカレには記事を書こうと思って見返したら去年も一昨年も書けてなかったすずともです。

Deno v2.5.4 で Deno tunnel という機能が追加されました。

追加…されたはずなのですが驚くほど記事がなく、公式からのポストと Deno Deploy のリファレンスしかまともな情報はありません。

リファレンス:Tunnel - Deno Deploy

不思議に満ち溢れた Deno tunnel。
普通に魅力的で面白く、簡単に使えるのでその紹介を軽くしたいと思います!

Deno tunnel とは

Deno tunnel とは、ローカルに立てた開発サーバをインターネットに公開できる機能です。
いわゆる ngrok 的なものと思ってもらえるとわかりやすいと思います。

Deno tunnel はただローカルサーバをインターネットに公開するだけでなく、以下のこともできるようです。記事の後半で実演とともに解説します。

  • Deno Deploy アプリの「Local」環境変数を Deno プロセスにプルします
  • Deno プロセスから Open Telemetry トレース、メトリック、ログを Deno Deploy アプリにプッシュすると、Deno Deploy ダッシュボードで表示できるようになります
  • Deno Deploy アプリに割り当てられた Local 開発データベースに自動的に接続します

Tunnel - Deno Deploy より)

Deno tunnel を使ってみる

まずは、Deno tunnel を使ってみましょう。

Deno Deploy の準備

まずは、Deno Deploy のアプリケーションを作る必要があります。
といっても下記の2ステップを行うだけです!

  1. Deno Deploy のコンソール にアクセス

まだ Deno Deploy を使ったことない人も GitHub or Google アカウント[1]を使って利用開始できます(無料です!)

コンソールにログイン出来たら、「New Playground」をクリックして新しいアプリケーションを作成します。
これだけで下記のようにアプリケーションが出来ます。左上のアプリケーション名を覚えておいてください!

ローカルコードの準備

ローカルに立てるサーバを作成します。

適当なディレクトリに以下のように main.ts を作ります。

main.ts
Deno.serve(() => {
  return Response.json({ message: "Hello World!" });
});

試しに起動してみましょう。
http://localhost:8000/ にアクセスして {"message":"Hello World!"} と表示されていれば OK です

> deno run -N main.ts
Listening on http://localhost:8000/

Deno tunnel を使ってみる

Deno Deploy とローカルコードの準備が出来たので、いよいよ Deno tunnel を使っていきましょう。

ここまでできていたらあとは簡単です。deno run するときのオプションに --tunnel を付けるだけです。

初回起動時には、Deno Deploy に接続する必要がありますが、すべて対話形式で接続できるので特に難しいことはありません。
ログイン後、organization と先ほど作成した application 名を指定するだけです。

> deno run -N --tunnel main.ts     
Visit https://console.deno.com/auth?code=XXXX-XXXX to authorize deploying your project.
✔ Authorization successful. Authenticated as SuzuTomo

Select an organization:
❯ kamekyame (kamekyame)

Selected organization 'kamekyame'
Select an application:
❯ careful-dingo-13
  ほかにも
  あれば
  いろいろ出てくる…

Selected application 'careful-dingo-13'
Created configuration file at 'D:\tunnel-test\deno.jsonc'
You are connected to https://careful-dingo-13--local.kamekyame.deno.net

You are connected to ~~ と表示されたらもうつながっています。

表示された URL にアクセスしてみると、{"message":"Hello World!"} と表示されます。
もちろん、サーバを起動している PC 以外からアクセスしても問題なく見れているはずです。

Watch なんかしちゃったらもう、ホットリロードもできちゃいます。

> deno run -N --tunnel --watch main.ts

Deno tunnel の特徴を実感してみよう

冒頭でも紹介しましたが、Deno tunnel はただインターネットに公開するだけでなく、いくつか便利な機能もあります。ひとつずつ見てみましょう。

Deno Deploy アプリの「Local」環境変数を Deno プロセスにプルします

Deno Deploy では、環境変数を指定できます。
追加するときに Contexts を選ぶことができ、Local(多分 All でもいい)に追加した環境変数は tunnel した手元のコードでも使用可能です。

① Env Variablesを クリック ② Contexts "Local" に環境変数を追加

上記例では、環境変数 API_KEYHOGEHOGE を指定しました。

手元のコードも変更してみましょう。
API_KEY を環境変数から読み取ってレスポンスの message に含めます(実際にはこんなことしないけど💦)

main.ts
Deno.serve(() => {
  const apiKey = Deno.env.get("API_KEY");
  return Response.json({ message: apiKey });
});

deno を再起動して、tunnel した URL にアクセスしてみましょう。
{"message":"HOGEHOGE"} と表示されているはずです。
便利。

Deno プロセスから Open Telemetry トレース、メトリック、ログを Deno Deploy アプリにプッシュすると、Deno Deploy ダッシュボードで表示できるようになります

コードで console.log してみましょう。

main.ts
Deno.serve(() => {
  console.log("Received a request");
  return Response.json({ message: "Hello World!" });
});

すると、Playground の LOGS に表示されてます。TRACES も見れます。
すごい便利。

LOGS TRACES

Deno Deploy アプリに割り当てられた Local 開発データベースに自動的に接続します

Deno Deploy ではデータベースを立てることもできます。
現時点では Prisma Postgres と Deno KV を作ることができるようです。
Postgres の場合、Prod・Preview・mainブランチ用のデータベースの他、Local 用も自動で作成されるようで、tunnel したときにはそのデータベースを使ってくれると思われます。

手順が複雑なのと自分がデータベースにあまり詳しくないので割愛しますが、環境変数のように簡単に tunnel できると思われます!(時間があったら試してみたい)

一方、Deno KV は Local 用のデータベースが作られないようで、tunnel したときでもローカルに保存されている情報が使われました。

まとめ

Deno tunnel について、簡単な使い方と便利な機能の紹介をしました。

本当に何も記事がなくて tunnel 本当に使える?と思っていましたが、ちゃんと使えるようです。

今回は検証できていませんが、特にデータベースなどローカルで立ち上げるのは面倒だったりするので、すでにある Deno Deploy 上のデータベースに直接繋げられるのはとても楽そうです。

それ以外にも、単に不具合をデバッグするために試行錯誤したいときや、HTTPS 通信が必要な時(WebHook のテストなど)にも非常に便利な機能だと思います。

Deno Deploy を使って開発している方、ぜひ tunnel を使ってみてその知見をアウトプットしていただいて Deno tunnel の魅力を広げていただけると個人的にも助かります🙏

脚注
  1. Google ログインは最近できるようになりました。 ↩︎

Discussion