0. 事前準備：vscodeの設定

vscodeをお使いの方は、設定ファイル(.vscode/settings.json)に以下を書いておくと、Denoの拡張機能が有効になります。

.vscode/settings.json

{
  // Deno拡張機能を有効にするために必要
  "deno.enable": true,
  "deno.lint": true,
  // 以下はお好みで
  "editor.defaultFormatter": "denoland.vscode-deno",
  "editor.formatOnSave": true
}

1. Viteのインストール＆初期化

チュートリアルに従って、deno run -RWE npm:create-vite-extra@latestコマンドを実行します。

途中でどのテンプレートを選択するか質問されるので、deno-reactを選択します。
また、使用言語を聞かれるので、TypeScriptまたはTypeScript + SWCを選択します。

$ deno run -RWE npm:create-vite-extra@latest
✔ Project name: （プロジェクト名を入力）
✔ Select a template: › deno-react
✔ Select a variant: › TypeScript + SWC

すると、カレントディレクトリの下に、プロジェクト名のディレクトリができます。
cdで移動しておきます。

$ cd <プロジェクト名>

2. viteの実行

次はviteを起動します。

$ deno task dev

localhostでサーバーが立ち上がると思います。以上でviteが実行できました。簡単ですね！

ここまでで、viteをDenoで動かす手順は完了です。🎉
本記事では、更にdeno deployへデプロイする手順も解説したいと思います。

3. デプロイ（deno deployを使用）

deno deployはDeno社が運営している、Denoアプリケーションをデプロイできるサービスです。
作成したviteアプリをdeno deployにデプロイしてみましょう。
基本的に無料枠で済むと思うのでクレカなどの登録は不要ですが、GitHubアカウントが必要なので持っていない人は取得しましょう。

まず、deno deployのCLIツールである、deployctlコマンドをインストールします。

$ deno install -A jsr:@deno/deployctl --global

次に、viteのビルドコマンドを実行しておきます。

$ deno task build

ビルドを実行するとdistというディレクトリに静的ファイルが吐き出されるので、これをデプロイします。

以下のコマンドでデプロイします。
（＜プロジェクト名＞のところがデプロイ先のドメインになります。空にしておくと、ランダムに名前を付けてくれます。）

$ deployctl deploy --entrypoint=jsr:@std/http/file-server --root=dist --project=＜プロジェクト名＞

上記のコマンドを実行すると、ブラウザが立ち上がりGitHub認証を求められます。
GitHub認証を行うと、自動でデプロイが始まります。

✔ Found 57 assets.
✔ Uploaded 64 new assets.
✔ Production deployment complete.
✔ Updated config file './deno.json'.

View at:
 - https://＜プロジェクト名＞.deno.dev

以上でデプロイ完了です！🎉

（参考）GitHubから自動デプロイ

GitHub Actionsを使用して自動デプロイしたい場合も、Deno Deployのダッシュボードから設定することができます。

プロジェクトページのSettings＞Git Integrationから、リポジトリを選択し、ビルドコマンドを以下のように入力します。

Install Step: deno install
Build Step: deno task build
Root directory: dist
Entrypoint: jsr:@std/http/file-server

Deploy Projectを押すと、GitHubリポジトリ内に.github/workflows/deploy.ymlが自動生成され、自動デプロイの設定が完了します！

presetでViteを選択するとnpmを使用したビルドコマンドが設定されてしまうようです。そのため、上記の設定に手動で書き換える必要があります。（2025/02現在）

4. 補足：その他の細かい設定など

viteの初期化をした際に以下のようなWarningが出ることがあります。

Warning The following packages contained npm lifecycle scripts (preinstall/install/postinstall) that were not executed:
┠─ npm:@swc/core@1.10.18
┃
┠─ This may cause the packages to not work correctly.
┠─ Lifecycle scripts are only supported when using a `node_modules` directory.
┠─ Enable it in your deno config file:
┖─ "nodeModulesDir": "auto"
Warning The following packages contained npm lifecycle scripts (preinstall/install/postinstall) that were not executed:
┠─ npm:@swc/core@1.10.18
┃
┠─ This may cause the packages to not work correctly.
┠─ Lifecycle scripts are only supported when using a `node_modules` directory.
┠─ Enable it in your deno config file:
┖─ "nodeModulesDir": "auto"

Warning The following packages contained npm lifecycle scripts (preinstall/install/postinstall) that were not executed:
┠─ npm:@swc/core@1.10.18
┃
┠─ This may cause the packages to not work correctly.
┖─ To run lifecycle scripts, use the `--allow-scripts` flag with `deno install`:
   deno install --allow-scripts=npm:@swc/core@1.10.18
Warning The following packages contained npm lifecycle scripts (preinstall/install/postinstall) that were not executed:
┠─ npm:@swc/core@1.10.18
┃
┠─ This may cause the packages to not work correctly.
┖─ To run lifecycle scripts, use the `--allow-scripts` flag with `deno install`:
   deno install --allow-scripts=npm:@swc/core@1.10.18

これはnpmライブラリの「ライフサイクルスクリプト」（npm installのタイミングで実行されるスクリプト）に起因しています。
この場合、指示に従ってdeno.jsonを書き換えたり、deno installコマンドを実行すればよいです。

deno.json

 {
   ...
+  "nodeModulesDir": "auto" // 追加
 }

$ deno install --allow-scripts=npm:@swc/core@1.10.18

5. まとめ

以上の手順で、ViteとReactをDenoで動かすことができました！

Node.jsを使用する場合では、この後にフォーマッターやリンターの設定をする必要があります。
しかしDenoでは、deno fmtコマンドやdeno lintコマンドがデフォルトで利用可能です。
更にdeno lintにはReact向けのルールも存在します。

Denoを使うと開発環境のセットアップが楽になるので、2025年も積極的にDenoを活用していきたいですね！！