Reagent入門 - Part5: Renteをインストール

17612 ワード
React Clojure Reagent Bootstrap ClojureScript Clojure テキストリンク

RenteはReagent(React)とSenteを使ったClojureScriptのフレームワークです。サーバーとの通信はWebSocketとAjax、core.asyncが使えます。デンマークのEnterlabという会社がcommitも盛んに開発しています。Eclipse Public Licenseで公開しています。

Clojureプロジェクトのおさらい

以前のDockerイメージは破棄して新しいプロジェクトを作ります。1ヶ月経つとClojure用のDockerfileとdocker-compose.ymlも少し変わりました。

Dockerfileとdocker-compose.yml

ビルドツールはLeiningenに加えてBootもインストールして使えるようにしています。

~/clojure_apps/Dockerfile
FROM clojure
MAINTAINER Masato Shimizu <[email protected]>

WORKDIR /usr/src/app

ADD https://github.com/boot-clj/boot/releases/download/2.0.0/boot.sh /tmp/
RUN mv /tmp/boot.sh /usr/local/bin/boot2 && \
    chmod 755 /usr/local/bin/boot2

ADD https://clojars.org/repo/tailrecursion/boot/1.1.1/boot-1.1.1.jar /tmp/
RUN mv /tmp/boot-1.1.1.jar /usr/local/bin/boot1 && \
    chmod 755 /usr/local/bin/boot1

RUN adduser --disabled-password --gecos '' --uid 1000 docker && \
  mkdir /home/docker/.m2 && \
  chown -R docker:docker /usr/src/app /home/docker/.m2

VOLUME /home/docker/.m2
USER docker
RUN lein

ENTRYPOINT ["lein"]
CMD []

ローカルのClojureイメージをビルドし直します。

$ cd ~/clojure_apps
$ docker pull clojure
$ docker build -t masato/clojure .

docker-compose.ymlでは、DockerコンテナのタイムゾーンをDockerホストに合わせています。

~/clojure_apps/docker-compose.yml
lein: &defaults
  image: masato/clojure
  volumes:
    - .:/usr/src/app
    - ./m2:/home/docker/.m2
    - /etc/localtime:/etc/localtime:ro
  working_dir: /usr/src/app/docker-rente
rente:
  <<: *defaults
  ports:
    - 8080:8080
figwheel:
  <<: *defaults
  ports:
    - 3449:3449
boot1:
  <<: *defaults
  entrypoint: ["boot1"]
  ports:
    - 8000:8000
boot:
  <<: *defaults
  entrypoint: ["boot2"]
  ports:
    - 5000:5000
    - 4449:4449
bash:
  <<: *defaults
  entrypoint: ["bash"]

~/.bashrcにdocker-composeコマンドのエイリアスを作成して再読み込みします。

~/.bashrc
alias lein='docker-compose run --rm --service-ports lein'
alias figwheel='docker-compose run --rm --service-ports figwheel'
alias rente='docker-compose run --rm --service-ports rente'

Renteのインストール

インストール

とりあえずRenteをインストールして動かしてみます。リポジトリをcloneします。

$ cd ~/clojure_apps
$ git clone https://github.com/enterlab/rente docker-rente

docker-compose.ymlのworking_dirにcloneしたディレクトリを指定します。

~/clojure_apps/docker-compose.yml
lein: &defaults
  image: masato/clojure
  volumes:
    - .:/usr/src/app
    - ./m2:/home/docker/.m2
    - /etc/localtime:/etc/localtime:ro
  working_dir: /usr/src/app/docker-rente
...

Dockerホストはクラウド上で起動しているので、リモートからFigwheelの3449ポートにWebSocketで接続できるようにpublic IPアドレスを指定します。

~/clojure_apps/docker-rente/dev/start.cljs
(ns rente.start
  (:require [figwheel.client :as fw]
            [rente.client.app :as app]))

(enable-console-print!)

(fw/watch-and-reload
 :websocket-url "ws://xxx.xxx.xxx.xxx:3449/figwheel-ws"
 :jsload-callback #(swap! app/state update-in [:re-render-flip] not))

(app/main)

アプリの起動

ClojureScriptの開発用にFigwheelを起動します。~/.bashrcに定義したdocker-compose用のエイリアスを使っているので、実際のコマンドはlein figwheelになります。ライブリロード用のWebSocketサーバーが3449ポートで起動します。

$ cd ~/clojure_apps
$ figwheel figwheel
...
Figwheel: Starting server at http://localhost:3449
Focusing on build ids: client
Compiling "resources/public/js/app.js" from ["src/rente/client" "dev"]...
Successfully compiled "resources/public/js/app.js" in 1.742 seconds.
Started Figwheel autobuilder
Figwheel: focusing on build-ids (client)
Compiling "resources/public/js/app.js" from ["src/rente/client" "dev"]...
Successfully compiled "resources/public/js/app.js" in 0.749 seconds.
notifying browser that file changed:  resources/public/js/app.js
notifying browser that file changed:  dev-resources/public/js/out/goog/deps.js

別のシェルを開いてアプリを実行します。こちらもdocker-composeのサービスなので実際にはlein runを実行しています。

$ rente run
2015-06-22T14:34:25,607Z [main] INFO  rente.run - rente started

DockerホストにブラウザからRenteサーバーが起動している8080ポートに接続します。

Bootstrapを使っているように見えませんが、3.3.4がロードされているようです。

Send Message Callback

Send Message Callbackボタンを押して動作確認します。

テンプレートが生成したClojureScriptのviews.cljsは以下のようになっています。ボタンのon-clickイベントでsocket/test-socket-callbackが発火されています。

~/clojure_apps/docker-rente/src/rente/client/views.cljs
(ns rente.client.views
  (:require [rente.client.ws :as socket]))

(defn main [data]
  [:div
   [:h1 (:title @data)]
   [:span "Hello world! This is reagent!"]
   [:br]
   [:span "And sente seems to work too.."]
   [:br]
   [:span "And figwheel.. w00t!"]
   [:br]
   [:button {:on-click socket/test-socket-callback} "Send Message Callback"]
   [:br]
   [:button {:on-click socket/test-socket-event} "Send Message Event"]
   ])

コールバックを定義しているClojureScriptは以下です。

~/clojure_apps/docker-rente/src/rente/client/ws.cljs
(defn test-socket-callback []
  (chsk-send!
    [:rente/testevent {:message "Hello socket Callback!"}]
    2000
    #(js/console.log "CALLBACK from server: " (pr-str %))))

ボタンを押すとブラウザのコンソールにコールバックのメッセージが出力されます。

Send Message Event

Send Message Eventも同様にコールバック関数は次のようになっています。

~/clojure_apps/docker-rente/src/rente/client/ws.cljs
(defn test-socket-event []
  (chsk-send! [:rente/testevent {:message "Hello socket Event!"}]))

ボタンを押すとブラウザのコンソールにコールバックのメッセージが出力されました。