Deno + Vite + Reactがサクッと動くしデプロイも簡単（2025.2）

Deno + Vite + React構成でサクッとSPAを作ってみます。

基本的な流れは公式のチュートリアルと一緒です。

https://docs.deno.com/deploy/tutorials/vite/


## 0. 事前準備：vscodeの設定

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


```jsonc:.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`を選択します。

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

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

```shell
$ cd <プロジェクト名>
```

# 2. viteの実行

次はviteを起動します。

```shell
$ deno task dev
```

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

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

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

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

https://deno.com/deploy

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

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

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

```
$ deno task build
```

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

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

```shell
$ 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のダッシュボードから設定することができます。

https://dash.deno.com/projects/

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

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




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678625/059e57dc-9833-47be-bb73-b1edaeaeedf5.png)



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


:::note warn
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`コマンドを実行すればよいです。

```diff_jsondoc:deno.json
 {
   ...
+  "nodeModulesDir": "auto" // 追加
 }
```

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

# 5. まとめ

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

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

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