Reagent 시작 - Part5: Rente 설치

Rente 은 Reagent(React) 과 Sente 을 사용한 ClojureScript 프레임워크입니다. 서버와의 통신은 WebSocket과 Ajax, core.async를 사용할 수 있습니다. 덴마크의 Enterlab라는 회사가 commit도 활발히 개발하고 있습니다. Eclipse Public License 에서 공개하고 있습니다.

Clojure 프로젝트의 복습

이전 Docker 이미지는 버리고 새 프로젝트를 만듭니다. 한 달이 지나면 Clojure용 Dockerfile과 docker-compose.yml도 조금 바뀌었습니다.

Dockerfile 및 docker-compose.yml

빌드 도구는 Leiningen 이외에 부트도 설치하여 사용할 수 있도록 하고 있습니다.

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

버튼을 누르면 브라우저 콘솔에 콜백 메시지가 출력되었습니다.