Yewは、Rustとwasmを使ってReactのようなコンポーネントベースのWebフロントエンドを構築できるフレームワークです。
Yewを使って、静的ページをGitHub Pagesにデプロイしてみます。
環境
- Windows 11 WSL2 Debian bullseye
- Docker version 20.10.11
- docker-compose version 1.29.2
- Rust 1.58
- Yew 0.19
- Trunk 0.14.0
ソースコード
今回使用したソースコードは、環境構築に利用したDockerfile等も含めて下記のリポジトリにあります。
静的ページの構築
まずはDockerを使ってローカル環境上にYewプロジェクトを構築していきます。
$ docker run \
--interactive --tty --rm \
--volume $(pwd):/app \
--workdir /app \
rust:1.58-slim \
cargo new yew-static-pages
$ cd $_
Dockerfileとdocker-compose.ymlを作成します。
FROM rust:1.58-slim
WORKDIR /app
RUN apt-get update && apt-get install -y \
git \
curl \
build-essential \
&& rm -rf /var/lib/apt/lists/*
# setup yew
RUN rustup target add wasm32-unknown-unknown
RUN cargo install trunk
COPY ./ ./
RUN cargo build
CMD trunk serve
version: '3'
services:
app:
build: .
volumes:
- ./:/app
environment:
- USER=root
ports:
- 8080:8080
Cargo.tomlに、Yewへの依存を追記します。
[dependencies]
yew = "0.19"
Yew公式のテンプレートを参考に、とりあえずHello Worldを表示するページを作ります。
use yew::prelude::*;
fn main() {
yew::start_app::<App>();
}
#[function_component(App)]
pub fn app() -> Html {
html! {
<main>
<img class="logo" src="https://yew.rs/img/logo.png" alt="Yew logo" />
<h1>{ "Hello World!" }</h1>
<span class="subtitle">{ "from Yew with " }<i class="heart" /></span>
</main>
}
}
index.htmlを配置します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Yew App</title>
</head>
</html>
$ docker-compose up --build を実行して、 localhost:8080 でWebサイトが表示されれば成功です。
GitHub Pagesへのデプロイ
$ trunk build --releaseで生成されるdist/index.htmlを、GitHub Pages上で閲覧できるようにデプロイします。--public-urlオプションでGitHub Pagesのパスを指定する点に注意です。
name: Deploy
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
env:
CARGO_TERM_COLOR: always
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: rustup target add wasm32-unknown-unknown
- run: cargo install trunk
# 「yew-static-pages」は実際のリポジトリ名に変更
- run: trunk build --release --public-url yew-static-pages
- run: cp -r ./dist/ ./public/
- uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
GitHubにpushした後、しばらくしてデプロイが完了し、https://<ユーザ名>.github.io/<リポジトリ名>でページが表示されたら成功です。
wasm-packを使う場合
wasmのビルドにはTrunkではなくwasm-packも選択できます。Trunkとの比較など詳細は公式ドキュメントを読んでください。
wasm-packを使う場合、ビルド時に.gitignoreが自動的に配置され、GitHub上でコミットに含まれずGitHub Pagesにリリースされません。GitHub Pagesに反映するためには.gitignoreを削除する必要があります。
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: cargo install wasm-pack
- run: wasm-pack build --release --target web --out-name wasm --out-dir ./public
- run: cp ./static/index.html ./public/index.html
- run: rm -rf ./public/.gitignore
- uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public