🦕

Deno+React+ViteをDeno Deployする

2022/12/01に公開約2,200字

つい最近、Denoでnpmが正式サポートされたことにより、DenoでViteが使えるようになり、Reactも比較的簡単に使えるようになりました。
Denoの公式ブログやYoutubeチャンネルでもDenoでReactを使う方法が載っていましたが、この記事ではデプロイまでやってみます。
https://deno.com/blog/frameworks-with-npm#react
https://www.youtube.com/watch?v=eStwt_2THd8

プロジェクトの作成

deno run --allow-read --allow-write --allow-env npm:create-vite-extra@latest

プロジェクトの名前と使用するテンプレートを聞かれます。react以外にもvueやsvelteなどのテンプレートも用意されています。

✔ Project name: … deno-react
✔ Select a template: › deno-react

作ったディレクトリに入り、実行すると恐竜がViteを抱っこしたサイトが開かれると思います。

cd deno-react
deno task dev

Deno Deploy

下準備

Deno Deployにデプロイするために、GitHubにリポジトリを作ります。
最初に.gitignoreを作っておきます。

node_modules/
dist/
.vite/

gitで初期化しコミットし、リモートリポジトリにもプッシュします。

git init
git add .
git commit -m "first commit"

リモートリポジトリをまだ作っていないので、ghコマンドを使ってリモートリポジトリを作ります。

gh repo create

質問に答えていくとプッシュも一緒にされるかと思います。もちろんghコマンドを使わなくてもできますが、ghコマンドはすごく便利なのでおすすめです。
https://cli.github.com/

GitHub Actions

GitHubActionsを用いて、GitHubにプッシュしたら自動でビルドしてDenoDeployにデプロイするようにします。(Automaticではなく、GitHub Actionを選択する)

Linkをクリックするとdeploy.ymlが表示されるので、その内容をコピーします。
DenoDeployが作ってくれたファイルには足りない部分があるので、いくつか追記・変更します。

  1. Denoをインストールするステップを追加
  2. ビルドするステップを追加
  3. rootとentrypointを変更する。

.github/workflows/deploy.yml

name: Deploy
on: [push]

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    permissions:
      id-token: write # Needed for auth with Deno Deploy
      contents: read # Needed to clone the repository

    steps:
      - name: Clone repository
        uses: actions/checkout@v3
        
      - name: Install Deno
        uses: denoland/setup-deno@v1
        with:
          deno-version: v1.x

      - name: Build production
        env:
          DENO_DIR: .deno
        run: deno task build

      - name: Upload to Deno Deploy
        uses: denoland/deployctl@v1
        with:
          project: "k41531-deno-react"
          root: dist
          entrypoint: https://deno.land/std@0.157.0/http/file_server.ts

このファイルをコミット/プッシュすれば、自動でデプロイされてdeno deployでReactで作ったページが公開されるはずです。

成果物

サンプルそのままなので味気ないですが...
https://k41531-deno-react.deno.dev/
リポジトリはこちらです。これを元にDeno+React開発ができそうです。
https://github.com/k41531/deno-react

Discussion

ログインするとコメントできます