Rust100%のWebサイトを作っている話

なにこれ

この記事は 木更津高専 Advent Calender 2023 参加記事です．
前日の記事は @nairoki さんによる DiscordのWebhookをもっと便利に使う方法 でした．
翌日の記事は @nairoki さんによる AtCoder入茶しました です．

突然ですが皆さん，好きな言語はありますか？
私はRustが好きです．
そこで，某Kotlinだいすき高専生のように好きな言語だけでWebサイトを作ってみることにしました．
→ 彼が作ったKotlin100%なWebサイトのリポジトリはこちら
→ 私が作ったRust100%なWebサイトのリポジトリはこちら

サイトの内容を作る

方針として，Yewというフレームワークを用いてWasmを生成し，それを Cloudflare Pages でホストすることでWebサイトを作ります．
Yewの公式サイトで紹介されているスタイルフレームワークはいずれも2～3年前に開発が止まっているようなので，BootstrapをCDN経由で利用します．
CSSを手書きしたい部分はStylistを用いて対応しました．
srcディレクトリ以下を見ていただければ全体的な雰囲気は掴めると思いますが，React風味を感じます．
ちなみに，ルーティングに用いているyew-routerのお影で，トレイリングスラッシュは自動的に除去されます．また，直接URLを踏んでも404が出ません．

GitHub Actions を用いてビルドする

普通にYewを使ってWebサイトを書くと，以下のようなRustではないファイルが生成されてしまいます．

• 本体となるWasmファイル
• Wasmを呼び出すためのJavaScriptファイル

これらを直接リポジトリにpushするとRust100%ではなくなってしまうので，GitHub Actions を用いてpush時にビルドすることで解決します．
また，ビルドの起点としてindex.htmlが事前に存在していなければなりません．

index.htmlの生成

まずはビルド時に必要なindex.htmlをCargoの Build Script 機能を使うことで事前生成します．
Horrorshowクレートを用いることで強引にHTMLを生成しました．
→ Build Script (build.rs)

GitHub Actions のworkflowを書く

リポジトリにソースコードがpushされた際にビルドからデプロイまでを一貫して行うworkflowを記述します．
WasmのバンドラであるTrunkを実行する前にCargoでreleaseビルドしておくことで30秒程度ビルド時間を短縮できます．
CloudflareのアカウントIDとAPIトークンをsecretとして与えることで簡単にデプロイができるのは良いですね．
→ workflow (cloudflare-pages.yml)

最後に

特定言語100%のWebサイトを作るためのアプローチ手法はほぼ全てKotlinの彼から学びました．本当に感謝しています．
ぜひ，皆さんも好きな言語だけでWebサイトを作ってみてください！