1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

RenteReagent(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 <ma6ato@gmail.com>

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ポートに接続します。

rente.png

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 %))))

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

rente-callback.png

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!"}]))

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

rente-pushevent.png

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?