0

我已经在网上、谷歌等寻找答案。但我找不到任何东西可以帮助我做我正在尝试的事情：

这是场景 - 我有 clojure 代码运行码头服务器实例并提供内容，包括由 hiccup 生成的 html。

我已将 clojurescript 添加到混合物中，以使用试剂为前端提供服务。例如，jetty 提供的页面有和 div id="app" 并且试剂编译的 app.js 为此重写了 dom。

到目前为止一切正常..我已将 lein 配置为运行 clojure 代码并将 clojurescript 代码构建到 app.js 中，并将其放在我的 lein 配置中的资产路径中。

现在我正在尝试使用 figwheel-main 热重新加载这个 app.js 代码。但我没有得到任何结果。使用 figwheel-main，它会打开一个单独的浏览器 url，它可以热重载东西..但这并没有连接到提供内容的 clojure 后端。即 figwheel-main 在 localhost:9500 上显示 clojurescript 代码，而 jetty 在端口 3000 上运行。

当我修改 clojurescript 代码时，我希望能够看到码头实例提供的 app.js 的热重载。

我不知道如何完成这项工作。

我已经尝试了 figwheel-main tutorial -ie deps.edn 等中的配置，但无法弄清楚如何将它与现有的 clojure 代码集成。

(defproject myproject "0.1.0-SNAPSHOT"
  :description "FIXME: write description"
  :url "http://example.com/FIXME"
  :license {:name "EPL-2.0 OR GPL-2.0-or-later WITH Classpath-exception-2.0"
            :url "https://www.eclipse.org/legal/epl-2.0/"}
  :dependencies [[org.clojure/clojure "1.10.0"]
                 [metosin/reitit "0.3.7"]
                 [ring "1.7.1"]
                 [migratus "1.2.3"]
                 [com.h2database/h2 "1.4.199"]
                 [org.postgresql/postgresql "42.2.5"]
                 [org.clojure/java.jdbc "0.7.9"]
                 [cumulus "0.1.2"]
                 [com.layerware/hugsql "0.4.9"]
                 [selmer "1.12.12"]
                 [ring-webjars "0.2.0"]
                 [ring/ring-anti-forgery "1.3.0"]
                 [hiccup "1.0.5"]
                 [org.clojure/clojurescript "1.10.520" :scope "provided"]
                 [reagent "0.8.1"]
                 [cljs-ajax "0.8.0"]
                 [org.webjars.npm/bulma "0.7.4"]
                 [org.webjars/font-awesome "5.3.1"]]
  :main ^:skip-aot myproject.core
  :source-paths ["src/clj"]
  :resource-paths ["resources" "target/public"]
  :target-path "target/%s"
  :clean-targets ^{:protect false}
  [:target-path
   [:cljsbuild :builds :app :compiler :output-dir]
   [:cljsbuild :builds :app :compiler :output-to]]
  :cljsbuild {:builds
              [{:source-paths ["src/cljs"]
                :compiler {:main "myproject.core"
                           :asset-path "js/out"
                           :optimizations :none
                           :source-map true
                           :pretty-print true
                           :output-to "target/cljsbuild/public/js/app.js"
                           :output-dir "target/cljsbuild/public/js/out"}}]}
  :plugins [[lein-cljsbuild "1.1.7"]]
  :profiles {:uberjar {:aot :all}
             :dev {:repl-options
                   {:init-ns myproject.core}}

我希望 figwheel-main 可以处理 jetty 已经提供的内容

4

2 回答 2

2

请记住，您现在有两个程序在运行，一个在浏览器的 CLJS 中，另一个在后端的 CLJ 中。它们通过网络进行通信，这增加了复杂性。

如果您已在 CLJS 代码中使用 Reagent，则应在此处添加打嗝（作为 Reagent 组件）而不是在后备上。

如果您在后端有数据，则通过 AJAX 调用从后端 CLJ 代码中获取数据，然后通过 hiccup、SVG 等将其呈现在前端。我们使用正在工作的大型 CLJ + CLJS 应用程序来执行此操作，其中后端代码只能通过 AJAX 调用（基本上是异步子例程调用）访问。

于 2019-06-27T13:33:38.563 回答
1

一种选择可能是在开发期间运行 Web 服务器（例如，Nginx 监听端口 9000），这将掩盖 Figwheel 和 Jetty 运行的不同端口。

/您可以通过将请求转发到端口 3449 上的 Figwheel 并将位置转发到/api端口 3000 上的 Jetty（您的后端由 Jetty 提供服务）来配置 Nginx为静态文件提供位置。

在开发过程中，您将连接到端口 9000，看起来一切都在该端口上运行。我不确定的一件事是 Figwheel 使用的 websocket，但值得一试。

您可以在 Nginx 文档中查找示例：https ://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/但示例配置如下所示：

server {
  listen 9000;
  listen [::]:9000;

  location / {
      proxy_pass http://localhost:3449/;
  }

  location /api {
      proxy_pass http://localhost:3000/;
  }

}
于 2019-07-04T04:56:52.323 回答