Deno Fresh1.2.0 -> 1.6.8へのマイグレーション記録

はじめに

tmmfire.com を作って以来放置していたので、ふと思い立ってFreshのマイグレーションを行いました。
今回は機能の変更は行っていなくて、主に（おそらく）Freshユーザーの悲願であったCSSフレームワークをTwindからTailWindへの変更対応記録です。

実装環境について

Deno 1.41.3 (マイグレーション対応前の情報がわからぬ)
Fresh 1.2.0 -> 1.6.8

デプロイ環境：GitHub + Deno Deploy

Fresh1.2.0 -> 1.6.xまでの変更点

そもそもいつの話

そうだ、Freshでサイトを作ってみようと思って公開したのが2023年7月ごろだったようです。その頃のFreshが1.2.0だったよう。
Fresh公式のブログは読んでいて、TailWind対応は知っていたのでいつかやろうと思っていて、今日やろうとなりました。

Fresh1.2.0 -> 1.6.xまでの変更点

詳細は公式ブログに各バージョンごとの変更の記載があります。

個人的にはやはり1.6のTailWind対応が大きいです。
Islands関連の新機能も多いようですが、このあたりはあまり突っ込んで使えていないので今回は触れません。

あと、変更履歴から見つけられなかったのですがいつの間にかプロジェクトのデフォルトファイルに./fresh.config.tsが含まれるようになっていました。
いかにも初めからいそうなファイルですが、私の1.2のプロジェクトにはないファイルでした。（この件は後述あり）

よしやるぞ

Freshのアップデート

まずはこちらのマイグレーションて手順の記載の通り以下のコマンドを一発流す。

deno run -Ar https://fresh.deno.dev/update

もしくは以下でも良さげ。

deno task update

このコマンドの実行により、各ライブラリのバージョンが最新化され以下ファイルが更新されます。

• deno.json
• fresh.gen.ts

deno taskコマンドにはbuild,previewコマンドが追加されていました。

事前ビルドへの対応

TailWindを利用して本番デプロイするには事前ビルドが必要になるためこちらのページを参考に、新たに設定を追加します。

Deno Deployの設定変更

これまでデプロイ時に事前ビルド設定を行っていなかった場合は、Dano Deploy側のデプロイ設定を変更する必要があります。
プロジェクトのSettingsｰ>Git Integrationから、元々存在する設定をUnlinkしてからBuild Stepにビルドコマンドを設定します。

Deno Deployが設定されたタイミングでおそらくmainブランチに.github/workflows/deploy.ymlがプッシュされているので、一応確認しておきます。

これで以降は、mainブランチにPRが出たタイミングとmainにプッシュがあったタイミングでGithub Actionsでビルドステップが動くようになり、ビルドされたファイルがDeno Deployへデプロイされるようになります。

TwindをTailWindCSSへ差し替える

こちらのページを参考にします。

Twind->TailWindCSSへの設定変更

基本的にページに記載の通り、以下のファイルを更新するだけなのですが私の環境の場合、fresh.config.tsが存在しなかったのでこのタイミングで追加しました。

• fresh.config.ts (作成)
• tailwind.config.ts (作成)
• static/styles.css (作成)
• routes/_app.tsx
• deno.json
• .gitignore

fresh.config.tsのインポート設定を追加

もちろん既にプロジェクト内にfresh.config.tsが存在する人は対応しなくて良いです。

以下のファイルにconfigのインポート設定を追加します。

• main.ts
• dev.ts

記載例

import { start } from "$fresh/server.ts";
import manifest from "./fresh.gen.ts";

import config from "./fresh.config.ts";

await start(manifest, config);

以上でいけるはず。
Deno Deployは無料で結構遊べるので今度はAPIも作りたい。