HomePlayground
Wasm
Rust Wasm on CloudFlare Workers 日本語チュートリアル
カニさん
カニさん
July 14, 2022
1

見出し

01
はじめに
02
Workers テンプレート
03
​Workers プレイグラウンド
04
デプロイ
05
Githubソースコード
Rust Wasm on CloudFlare Workers 日本語チュートリアル

はじめに

このチュートリアルでは、Cloudflare Workers 用に Markdown を解析する Rust で生成された WebAssembly サーバーレス関数を生成、ビルド、プレビュー、設定、公開する方法について学びます。 CloudFlare Workers利用においては、CloudFlare Workers公式チュートリアルの方で設定を済ませておいてください。WorkersアカウントとWranglerCLIの設定が完了したら次に進みましょう。

Workers テンプレート

Workersプロジェクトの管理に便利なWrangler CLIは、非常に多くのテンプレートを提供しており、Rustも例外ではありません。 今回のチュートリアルでは、rustwasm-worker templateを使用します。

git clone https://github.com/cloudflare/rustwasm-worker-template/ rustwasm-markdown-parser

クローンが終わったら、

cd rustwasm-markdown-parser

で移動します。

​Workers プレイグラウンド

dev command を使用することで、Workers 関数がデプロイされたときにどのように実行されるかをテストすることができます。

wrangler dev

dev コマンドを使用すると、localhost と開発中の Worker を操作するエッジサーバーとの間に接続が確立されます。

ビルド

crates.ioのエコシステムからpulldown-cmarkという依存関係を取り込んで、プロジェクトの構築を開始します。Cargo.toml ファイルに以下の内容を追加します。

## Cargo.toml

[dependencies]
pulldown-cmark  =  "0.4.0"

pulldown-cmarkのGitHubリポジトリにあるstring-to-stringのサンプルのコードを使用します。src/lib.rsを以下のように変更してください。

## src/lib.rs
mod utils;

use cfg_if::cfg_if;
use wasm_bindgen::prelude::*;
use pulldown_cmark::{Parser, Options, html};

cfg_if! {
    // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
    // allocator.
    if #[cfg(feature = "wee_alloc")] {
        extern crate wee_alloc;
        #[global_allocator]
        static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
    }
}

#[wasm_bindgen]
pub fn parse() -> String {
    let markdown_input: &str = "Hello world, this is a ~~complicated~~ *very simple* example.";
    println!("Parsing the following Markdown string:\n{}", markdown_input);

    // Set up options and parser. Strikethroughs are not part of the CommonMark standard
    // and we therefore must enable it explicitly.
    let mut options = Options::empty();
    options.insert(Options::ENABLE_STRIKETHROUGH);
    let parser = Parser::new_ext(markdown_input, options);

    // Write to String buffer.
    let mut html_output: String = String::with_capacity(markdown_input.len() * 3 / 2);
    html::push_html(&mut html_output, parser);

    // Check that the output is what you expected.
    let expected_html: &str = "<p>Hello world, this is a <del>complicated</del> <em>very simple</em> example.</p>\n";
    assert_eq!(expected_html, &html_output);

    format!("\nHTML output:\n{}", &html_output)
}

下記のコードを使用する場合は、worker/worker.jsを更新します。

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

const { parse } = wasm_bindgen;
const instance = wasm_bindgen(wasm);

/**
 * Fetch and log a request
 * @param {Request} request
 */
async function handleRequest(request) {
  await instance;
  const output = parse();
  let res = new Response(output, { status: 200 });
  res.headers.set("Content-type", "text/html");
  return res;
}

wrangler dev が起動していれば、エディタで保存した後、数秒後にブラウザに Rust プログラムの出力が表示されます。Wrangler はプロジェクトの変更を監視し、Rust を WebAssembly にコンパイルし、コンパイルエラーを出力します。

デプロイ

Rustで生成されたWasmを使ったCloudflare Workers関数の作成が完了しました。
Wrangler は Cloudflare Workers アプリケーションをバンドル、アップロード、リリースするためのサポートを内蔵しています。これを行うには、wrangler publish を実行し、あなたのコードをビルドして公開します。

Githubソースコード

このチュートリアルでは、Markdown を解析する Rust で生成された Web Assembly サーバーレス関数をビルドして公開しました。このアプリケーションの完全なソースコードは、GitHub をご参照ください。 また、Workersテンプレートを自作してみたい場合は、Workersテンプレート一覧をご参照ください。


タグ

Web AssemblyCloudFlare WorkersWrangler
© 2023, All Rights Reserved.

初心者向け

RustCoder(推奨)Rust入門(速習)コミュニティ

SNS