Cloudflare WorkersでGleamを動かす

Gleamという静的型付け・関数型言語がある．

Erlang VMやJavaScriptランタイムで動くようコンパイルされるのが特徴．

今回は，「JavaScriptにトランスパイルできる」というところに注目し，Cloudflare WorkersでGleamを動かしてみた．

環境構築#

依存関係にgleam_javascriptを追加する．

また，ローカルでの動作確認・デプロイ用にwranglerをインストールする．

1
gleam new workers_gleam
2
cd workers_gleam
3
gleam add gleam_javascript
4
pnpm init
5
pnpm add -D wrangler

gleam.tomlを編集．targetにJavaScriptを指定した．

1
name = "workers_gleam"
2
version = "1.0.0"
3
target = "javascript"
4

5
[dependencies]
6
gleam_stdlib = ">=0.34.0 and < 2.0.0"
7
gleam_javascript = ">=0.12.0 and < 1.0.0"
8

9
[dev-dependencies]
10
gleeunit = ">= 1.0.0 and < 2.0.0"

また，wrangler.tomlを以下のように記述する．

1
name = "workers-gleam"
2
main = "build/dev/javascript/workers_gleam/index.js"
3
compatibility_date = "2023-09-22"
4

5
[build]
6
command = "gleam build"

GleamとJavaScriptをFFIで繋ぐ#

GleamはJavaScriptやErlangと相互に運用できるため，FFIの仕組みが備わっている．

ここでは，JavaScriptで定義されているResponseやRequestといったオブジェクトをGleamでも使えるようにしていく．

まずはsrc/ffi.jsにresponse, method, url, bodyを追加する．

1
export function response(status, headersList, body) {
2
  let headers = new Headers()
3
  for (let [k, v] of headersList) headers.append(k, v)
4
  return new Response(body, { status, headers })
5
}
6

7
export function method(request) {
8
  return request.method
9
}
10

11
export function url(request) {
12
  return request.url
13
}
14

15
export function body(request) {
16
  return request.body
17
}

src/cloudflare/workers.gleamでffi.jsで書いた関数とGleamの関数を結びつける．

1
pub type Request
2

3
pub type Response
4

5
pub type Environment
6

7
pub type ExecutionContext
8

9
@external(javascript, "../ffi.js", "response")
10
pub fn response(
11
  status: Int,
12
  headers: List(#(String, String)),
13
  body: String,
14
) -> Response
15

16
@external(javascript, "../ffi.js", "method")
17
pub fn method(req: Request) -> String
18

19
@external(javascript, "../ffi.js", "url")
20
pub fn url(req: Request) -> String
21

22
@external(javascript, "../ffi.js", "body")
23
pub fn body(req: Request) -> String

これでGleam側でresponseやmethodを実行したときには，JavaScript側の関数を呼び出すようになった．

ハンドラーを作る#

これらの型や関数を使ってハンドラーを書く．

handle_requestはJavaScriptのPromise<Response>を返さなければならないため，返り値をPromise(Response)としている．

また，promise.resolveに渡すことでresponseをPromiseでラップしている．

1
import cloudflare/workers.{type Request, type Response}
2
import gleam/javascript/promise.{type Promise}
3

4
pub fn handle_request(
5
  _request: Request,
6
) -> Promise(Response) {
7
  workers.response(200, [], "Cloudflare Workers上でGleamが動いてるよ")
8
  |> promise.resolve
9
}

エントリポイントを作る#

最後にCf Workers用のエントリポイントを作る．src/index.jsの中に書いていく．

1
import { handle_request } from "./workers_gleam.mjs"
2

3
export default {
4
  async fetch(request) {
5
    return handle_request(request)
6
  }
7
}

一行目でimportしているworkers_gleam.mjsはビルド時にsrc/workers_gleam.gleamから生成されるJavaScriptモジュールで，Gleamで定義したhandle_requestがそのままJavaScriptの関数としてexportされている．

1
import * as $promise from "../gleam_javascript/gleam/javascript/promise.mjs";
2
import * as $workers from "./cloudflare/workers.mjs";
3
import { toList } from "./gleam.mjs";
4

5
export function handle_request(_) {
6
  let _pipe = $workers.response(200, toList([]), "Cloudflare Workers上でGleamが動いてるよ");
7
  return $promise.resolve(_pipe);
8
}

Envを使う#

Cf Workersではfetch関数の第二引数にenvを受け取る．Cf Workersに設定した環境変数がKey-Value形式で格納されたオブジェクトになっている．

.dev.varsに環境変数を追加する．

1
SECRET_KEY=5U93R_53CR37_K3Y

この値をGleamから取り出して使う．

ffi.jsに新たにread_environment(env, key)関数を用意するが，この関数はGleamのResult型を返すようにする．

値が存在すればOk，無ければErrorを返すようにしておけば，Gleamからは安全にEnvの値にアクセスすることが出来るためである．

JavaScriptからGleamの機能にアクセスするには，./gleam.mjsをインポートする．gleam.mjsもビルド時に生成され，Gleamの一部機能をJavaScriptから使えるようになっている．

1
import { Ok, Error as Err } from "./gleam.mjs"
2

3
export function read_environment(env, key) {
4
  const value = env[key]
5
  return value ? new Ok(value) : new Err(undefined)
6
}

src/cloudflare/workers.gleamにread_environmentを追加する．

1
@external(javascript, "../ffi.js", "read_environment")
2
pub fn read_environment(env: Environment, key: String) -> Result(String, Nil)

ハンドラーで呼び出す．

1
import cloudflare/workers.{type Environment, type Request, type Response}
2
import gleam/io
3
import gleam/javascript/promise.{type Promise}
4

5
pub fn handle_request(_request: Request, env: Environment) -> Promise(Response) {
6
  let _ =
7
    workers.read_environment(env, "SECRET_KEY")
8
    |> io.debug
9

10
  workers.response(200, [], "Cloudflare Workers上でGleamが動いてるよ")
11
  |> promise.resolve
12
}

エントリポイントもEnvを受け取るように変更する．

1
import { handle_request } from "./workers_gleam.mjs"
2

3
export default {
4
  async fetch(request, env) {
5
    return handle_request(request, env)
6
  }
7
}