Deno Deploy デプロイ方法 3通り (+ 1) & ちょっと引っかかったこと

Deno Deploy とは

Deno 社が提供している、Deno 専用ホスティングサービスです。

ホスティングサービスとは、平たく言えばレンタルサーバ的なもの。任意のサーバプログラム (各ホスティングサービスが対応している言語や環境に限る) を、ネットにつながったマシン上で動かし続けてくれます。

自宅にサーバを立てれば当然好き放題できますが、ホスティングサービスならマシン本体や電源設備などの管理は心配なし。その分、通常は料金が生じます (サービスによっては無料枠もある)。

が、Deno Deploy はなんとそれなりの性能で、しかも期間制限なしで無料！(ただし記事執筆時点でのことで、将来どうなるかは分かりません。) あと、GitHub アカウント連携が前提で、追加のアカウント作成などの手間が無いのも嬉しいポイントです。

デプロイ方法

0. Playground

簡単なコードをブラウザ上でお試しできる方法です。

ダッシュボード右上の 'New Playground' を押下。

すると、コードエディタが開き、サンプルコードが。

ここに書いて保存したードは、即座に Deno Deploy 上で動作し初め、画面右上の URL からアクセスして試すことが可能です。

TS、JS はもちろん。TSX や JSX も試すことができるようです。まずはお試し、というなら、ブラウザ上だけでもすぐに始めることができます。

ちなみに、プロジェクト名はランダムに生成されたものが付与されます。(上のスクリーンショットでは fresh-crow-29 でした。)

1. CLI deployctl

ローカル上のファイルを、コマンドラインからデプロイする方法です。

まずは deployctl をインストール。

deno install -gArf jsr:@deno/deployctl

deployctl -h

# 私の場合、bash でなく fish だからか、パスが通っていなかったので、以下で無理やり実行しました
~/.deno/bin/deployctl -h

次に、適当な作業場所で HTTP サーバを実装。

mkdir work
cd work

# 好みのテキストエディタで
vim main.ts

ホーム上に ~/main.ts と作って進めようとしたところ、次の deployctl deploy コマンドで、ホームディレクトリ下のファイルを危うく全てアップロードしてしまいそうになりました。 事故防止のため、必ず作業場所を作って進めましょう。

今回は Playground のサンプルと同じで。

main.ts

Deno.serve((req: Request) => new Response("Hello World"));

あとは deployctl でデプロイ。ダッシュボードの準備は不要です。

ls
# main.ts

deployctl deploy --project=akuad-helloworld --entrypoint=main.ts

ここで入力したプロジェクト名が既に誰かに使われている場合、error: APIError: This project name is already in use. とエラーになります。別のプロジェクト名に変更しましょう。

ちなみに、サンプル通りの helloworld は使用中でした。

初めてのデプロイ、または久々のデプロイ (セッション有効期限切れ？) の場合、ブラウザで認証画面が開きます。

ダッシュボードを見ると、プロジェクトが作られているのが分かります。

この URL にアクセスして確認してみましょう。

curl https://akuad-helloworld.deno.dev/
# Hello World

同じプロジェクト名で再度デプロイすれば、同じプロジェクトにインスタンスを追加することになります。

# ソース編集等の後、同じコマンドで再デプロイ
deployctl deploy --project=akuad-helloworld --entrypoint=main.ts

Prod とバッジがあるのは、Production としてセットされているインスタンスです。Production としてセットされているインスタンスには、<project-name>.deno.dev という URL でアクセスできます。

Production をセットするには、ダッシュボードで当該インスタンスのメニュー「︙」から 'Promote to Production'。

もしくは、デプロイ時に --prod オプションを付けます。

~/.deno/bin/deployctl deploy --project=akuad-helloworld --entrypoint=main.ts --prod

2. GitHub リポジトリ + ブラウザ上の操作

GitHub リポジトリ上のソースコードを、ブラウザ上の操作からデプロイする方法です。

ダッシュボード右上の 'New Project' を押下。

連携している GitHub アカウントと、そこのリポジトリを選択。

デフォルトでは、どのリポジトリへのアクセス権も付与されていないので、恐らくリポジトリが表示されません。Modify GitHub Permissions から、アクセスを許可するリポジトリを選択します。

リポジトリを選択すると、下にメニューが出てきます。

• Production Branch
  • デプロイ対象ブランチ
• Project Name
  • プロジェクト名, ダッシュボード上の表示や URL に反映される
  • その下のチェックボックス 'Just link the repo ...' は「3. GitHub Actions」にて使用
• Framework Preset
  • 使用するフレームワーク, 例えば Fresh, Next.js, Vite など
  • フレームワークなしでプレーンの場合は None
• Install Step
  • 例えば npm install
• Build Step
  • ビルドコマンド
• Root directory
  • Entrypoint を実行する際のカレント？
• Include files
  • デプロイに含むファイル
• Exclude files
  • デプロイに含まないファイル
• Entrypoint
  • どのファイルが起点かを指定
  • ローカル上で deno run --allow-... <file.ts> するときに指定するファイルをここに指定する

各設定をして 'Deplot Project' でデプロイ完了。Production Branch に対して Push や Merge があると、自動で再デプロイされます。

私がこの方法を試したとき、Root directory: src、Entrypoint: src/main.ts としたところ、カレントが src になっていなかったらしく、serveDir で上手くファイルを読んでくれませんでした。

解決方法はわからず、諦めて下の 3. GitHub Actions の方法で進めました。

3. GitHub Actions

文字通り、GitHub 上のソースコードを、GitHub Actions からデプロイする方法です。

まずは「1. GitHub リポジトリ + ブラウザ上の操作」と同じく、'New Project' を押下。

GitHub アカウント、リポジトリ、ブランチを選択、プロジェクト名を入力、今度は 'Just link the repo ...' のチェックを入れて 'Create Project' を押下。

ここからは GitHub リポジトリの操作に移ります。先で指定したリポジトリに、デプロイのための GitHub Actions ワークフローを作成します。

こちらも公式でサンプルのワークフローが紹介されています。公式リファレンスはいいぞ。

(以下、ちょっと解説加えたり、一部削ったりしたもの)

.github/workflows/deploy.yml

name: Deno Deploy
on:
  push:
    branches: main

jobs:
  deploy:
    runs-on: ubuntu-latest

    permissions:
      id-token: write # これのおかげで手動でのトークン設定とか無くて済む！
      contents: read

    steps:
      - name: Clone repository
        uses: actions/checkout@v4

      - name: Build step
        run: deno task build # ビルドとかが必要なら適宜追加

      - name: Upload to Deno Deploy
        uses: denoland/deployctl@v1
        with:
          project: <your-project-name> # 先のダッシュボードで設定したプロジェクト名
          entrypoint: main.ts # 起動の起点となる (実行する) ソース
          root: . # ここをカレントとして entrypoint が実行される

entrypoint: の指定は、root からの相対パスなので注意。

例えば、起点となるソースが src/main.ts で、カレントを src にしてから起動したいときは、entrypoint: main.ts、root: src というようになる。

あとは、ワークフローで指定したトリガ on: が発生すれば、デプロイが実施されます。

他、denoland/deployctl の引数 (with:) は、公式の action/README.md を参照。

以上、終了。なんと、手動でのトークン設定といったようなことはしません！

ちなみに、トリガ on: で全ての push に対してデプロイするようにしたとき、デフォルトブランチ (main) 以外でも当然デプロイされますが、デフォルトブランチのときだけ Production としてデプロイされたことがあったような･･･。

おわり

環境変数とトークンをいじくって、といった手間なく、とても快適に自動デプロイ (CD) を組むことができました。

Deno Deploy ホームページページトップに 'Hassle-free' =手間いらず とあるように (記事執筆時点)、とにかく出だしから手間が少なく、ハードルが低いです。