🏄‍♂️

JuliaHub で Julia で書いた Web アプリを公開する

2022/05/05に公開

本日は

JuliaHub の app 機能を用いて手元にある Web アプリケーションをみんなに触ってもらう手順を紹介します.

Franklin.jl のように static な Web サイトであれば GitHub Pages を利用してホームページを公開するということはできます.

一方で Dash.jl とか Genie.jl のように裏で Julia が動作するアプリケーションの公開をすることを考えると公開する場所に Julia が動く環境が必要です.

パッと思いつくのは Heroku で公開することですが, アプリケーションによっては無料枠のなかで動かせるようなものは限られてきます. 例えば Plots.jl に依存するようなものを作るとメモリは2GBぐらい消費します. Heroku の無料枠じゃデプロイすらままなりません. あと色々騒動があったので今回は JuliaHub を用いた方法を紹介します.

制限事項

JuliaHub のプランが個人プランのためかアプリケーションの実行にはお金ないしは時間単位の上限が付与されます. ですので永続的なWebページを作るというよりは数時間程度の勉強会でデモを公開するという用途での運用を前提とします.

前提

  • JuliaHub の登録が済んでいること
  • Job を動かせるようになっている

題材

Dash.jl の README にある例を JuliaHub 上で公開します. 下のようなグラフを表示させることができます.

https://github.com/terasakisatoshi/DashExample.jl

手順(Dash.jl の場合)

JuliaHub にログインします. ログインをすると https://juliahub.com/ui/Home にジャンプするはずです.

次にApplicationsmore... のところをクリックします.https://juliahub.com/ui/Applications に移動します.

画面右上にある Add an application に移動します.

Git URL に https://github.com/terasakisatoshi/DashExample.jl を入力します.

その後は Add Application を押してアプリケーションを作成します.

下記のようなアイコンが出てくるはずです

アプリ化するための条件

https://github.com/terasakisatoshi/DashExample.jl リポジトリの構造は下記の通りです

.
├── Manifest.toml
├── Project.toml
├── README.md
├── bin
│   └── main.jl
└── src
    └── DashExample.jl

bin/main.jl があることに注意します. JuliaHub でアプリケーションを起動する際は bin/main.jl が呼び出す仕組みになっています. コードは下記の通りです:

using Dash

app = dash(external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"])

app.layout = html_div() do
        html_h1("Hello Dash"),
        html_div("Dash.jl: Julia interface for Dash"),
        dcc_graph(
            id = "example-graph",
            figure = (
                data = [
                    (x = [1, 2, 3], y = [4, 1, 2], type = "bar", name = "SF"),
                    (x = [1, 2, 3], y = [2, 4, 5], type = "bar", name = "Montréal"),
                ],
                layout = (title = "Dash Data Visualization",)
            )
        )
    end

run_server(app, "0.0.0.0", 8000)

DashExample リポジトリの作成は下記のようにしました. 下記の通りにすれば最低限の機能を持つアプリケーションを用意できます.

$ cd /path/to/workspace # 作業ディレクトリに移動
$ julia # Julia を起動
julia> ]
pkg> generate DashExample # DashExample という Julia パッケージを作成
julia> exit() # 一旦終了
$ cd DashExample
$ julia --project=@. -e 'using Pkg; Pkg.add("Dash")' # Dash を追加
$ mkdir bin && touch bin/main.jl
$ # 後は適当なエディタで `bin/main.jl` を実装する
$ # そんでもって各自のリポジトリにプッシュする.

Launch する

にある Lauch ボタンを押します.

下図のように設定します.

bin/main.jl 内部で run_server(app, "0.0.0.0", 8000) によってサーバーを立ち上げているので Port number を 8000 を追加しています. この作業を忘れると作成したアプリケーションをインターネット上に公開することができません.

用意ができたら Start ボタンを押します.

Launch から Connect というボタンに切り替わっている様子がわかります.

起動した直後は下図のように起動中の旨のメッセージが出ています. 数分待ちます.

Logs によって起動中の様子を見ることができます. 依存パッケージを Project.toml に記載することを忘れるとアプリケーション起動の段階でエラーが出て公開することができません. そういったエラーを見つけるときにも役に立ちます.

しばらく待つと https://<適当な5文字>.launch.juliahub.app/ という URL が発行されます. ここにアクセスするとアプリケーションが動きます.

手順(Genie.jl) の場合

https://help.juliahub.com/juliahub_tutorials/genie_app/ に Genie.jl のアプリを公開する手順が書いてあります.

が, せっかくなので昔作った複数の弾が弾性衝突する例も動かしてみました.

JuliaHub で動かすためにまとめました:

https://github.com/terasakisatoshi/ElasticCollision.jl

bin/main.jl

標準的な方法で Genie.jl を作っていれば下記のコードをそのまま bin/main.jl として作成すればOKなはずです.

@info "@__DIR__: " @__DIR__
@info "pwd(): " pwd()

ENV["HOST"] = "0.0.0.0"

push!(LOAD_PATH, abspath(realpath(joinpath(@__DIR__, "../src/"))))
push!(LOAD_PATH, abspath(realpath(joinpath(@__DIR__, ".."))))
@info "LOAD_PATH: " LOAD_PATH

ENV["STARTSERVER"] = true
ENV["GENIE_ENV"] = "prod"
ENV["EARLYBIND"] = true

@info "haskey EARLYBIND" haskey(ENV, "EARLYBIND")
@info "EARLYBIND" ENV["EARLYBIND"]

# include("../bootstrap.jl")
a = abspath(realpath(joinpath(@__DIR__, "..")))
@info a 
cd(a)
run(`julia --project=. bootstrap.jl`)

上記のコードは https://github.com/JuliaComputing/GenieAppTutorial.jlbin/main.jl と同じです.

後は Dash.jl で説明したものと同様に Launch すればOKです.

まとめ

Dash.jl, Genie.jl を使ったアプリケーションを JuliaHub の上で動かすことができた

思ったよりも楽ちんです.

基本的に =0.0.0.0port=8000 を指定するオプションを持っているアプリケーションなら動かせると思います.

勉強会や研究集会でちょっと触ってみてね♪という宣伝であれば使えるんじゃないかな?と思いました.

GitHubで編集を提案

Discussion