🎡

Rust の Yew アプリケーションを Amazon S3 へアップロードする

Shota

2024/06/30に公開

はじめに

以前、Rustのアプリケーションをコンパイルしてフロントエンドの実装を行うライブラリ Yewを紹介しました。
今回は、Yew で作ったアプリケーションを、Amazon S3に配置して、Web上からアクセスできるようにしてみたいと思います。
成果物は、Yewドキュメント通りのカウンターアプリケーションとしたいと思います。

🔻以前執筆した記事

🔻Yew Docs
https://yew.rs/ja/docs

環境構築

まずは簡単ですが、環境を構築します。
以下コマンドで環境構築します。（ここの構築部分はドキュメント通りの内容となります。）

cargo new --lib yew-app && cd yew-app

Cargo.tomlを以下のように編集します。

Cargo.toml

[package]
name = "yew-app"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
yew = "0.17"
wasm-bindgen = "0.2"

lib.rsを以下のように編集します。

lib.rs

use wasm_bindgen::prelude::*;
use yew::prelude::*;

struct Model {
    link: ComponentLink<Self>,
    value: i64,
}

enum Msg {
    AddOne,
}

impl Component for Model {
    type Message = Msg;
    type Properties = ();
    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self {
            link,
            value: 0,
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::AddOne => self.value += 1
        }
        true
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        // Should only return "true" if new properties are different to
        // previously received properties.
        // This component has no properties so we will always return "false".
        false
    }

    fn view(&self) -> Html {
        html! {
            <div>
                <button onclick={self.link.callback(|_| Msg::AddOne)}>{ "+1" }</button>
                <p>{ self.value }</p>
            </div>
        }
    }
}

#[wasm_bindgen(start)]
pub fn run_app() {
    App::<Model>::new().mount_to_body();
}

さらに、プロジェクト直下に staticというフォルダを作成します。
以下のコマンドを実行します。

mkdir static

作成した staticフォルダに index.htmlを作成します。

cd static && touch index.html

index.htmlファイルを以下のように編集します。

static/index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Yew Sample App</title>
        <script type="module">
            import init from "./wasm.js"
            init()
        </script>
    </head>
    <body></body>
</html>

プロジェクトディレクトリに戻っておきます。

cd ..

ここまでで環境の準備は完了です。

ビルド

続いて、このYewアプリケーションをビルドしていきます。
以下のコマンドを実行します。

wasm-pack build --target web --out-name wasm --out-dir ./static

S3に配置

S3 のバケットを作成、ソースをアップロード

AWS CLIを使って、S3のバケットを作成します。

aws s3 mb s3://my-yew-bucket

失敗する場合、ローカルでのAWSの認証、またはIAMロールに問題があると思われますので、
認証等が正常に通っているかどうか確認ください。

作成した my-yew-bucketに対して、ビルドしたファイル群をアップロードします。
以下のコマンドで実行

aws s3 sync ./static s3://my-yew-bucket

アクセス権限を編集

全てアップロード化が完了したら、S3の静的Webホスティングを有効にして、
以下のバケットポリシーを適用します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-yew-bucket/*"
        }
    ]
}

これで、S3の http://<バケットウェブサイトエンドポイント>/index.htmlにアクセスします。
すると、以下のようなカウンターアプリケーションにアクセスすることができました。

おわりに

以上です。プロジェクト作成からここまで、数十分ほどで完了しちゃいます。
ここまでできれば、CloudFrontを前段に配置したり、任意のソースをアップロードしてみたり、色々と自由にやれることは増えてくると思います。

学びになれば幸いです！

コラボスタイル DevelopersPublication

「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。