Deno+React+ViteをDeno Deployする
つい最近、Denoでnpmが正式サポートされたことにより、DenoでViteが使えるようになり、Reactも比較的簡単に使えるようになりました。
Denoの公式ブログやYoutubeチャンネルでもDenoでReactを使う方法が載っていましたが、この記事ではデプロイまでやってみます。
プロジェクトの作成
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コマンドはすごく便利なのでおすすめです。
GitHub Actions
GitHubActionsを用いて、GitHubにプッシュしたら自動でビルドしてDenoDeployにデプロイするようにします。（Automaticではなく、GitHub Actionを選択する）
Linkをクリックするとdeploy.ymlが表示されるので、その内容をコピーします。
DenoDeployが作ってくれたファイルには足りない部分があるので、いくつか追記・変更します。
- Denoをインストールするステップを追加
- ビルドするステップを追加
- 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で作ったページが公開されるはずです。
成果物
サンプルそのままなので味気ないですが... リポジトリはこちらです。これを元にDeno+React開発ができそうです。
Discussion