如何部署单页应用程序。用 ClojureScript / Figwheel 编写到静态服务器？

Question

我正在玩 Figwheel 并编写一个不需要任何服务器端智能的简单单页应用程序。

原则上，这个应用程序。可以放置在任何静态网络服务器上。

但实际上我该如何部署它呢？看起来我的 Figwheel 开发环境中的 main.js 正在设置 figwheel 连接。

我实际上需要将哪些 js 和 html 文件放在我的静态服务器上？ Figwheel 是否创建了它们，还是我需要创建一个新的 main.js 和 index.html？我在哪里可以找到例子？

该文档非常适合如何开始使用 Figwheel，但对于完成开发后的操作却出奇地沉默。

Answer 1

第 1 步：进行生产构建： lein do clean, cljsbuild once min

第 2 步：将 resources/public 中的所有内容放在可公开访问的地方。

这是我在示例项目中用来执行此操作的脚本： https://github.com/timothypratley/whip/blob/master/deploy.sh

HTML 资源在本地开发和部署之间不会改变。唯一不同的是编译后的工件。事实上，您也可以部署开发编译的工件。建议执行 "production build" 的唯一原因是在本地开发时，中间 JS 文件不会拼接在一起，因为仅将更改后的代码加载到浏览器中会更快。对于部署，拥有一个编译的工件更好。根据您在 project.clj 中配置构建的方式，单个编译的 JS 可以进行高级优化，或者只是简单的优化。你真的不需要担心这些，我只是解释一下，因为你具体询问了哪些变化。

HTML 页面根本没有变化，这听起来可能很奇怪，所以让我们再解释一下。 HTML 页面包含一个已编译的 JS，当您使用运行小圆盘时，如果您打开该 JS，您将看到它依次加载其他 JS 文件。但是如果你退出 figwheel 并进行干净的 "production" 构建，你会看到所有代码都进入了一个 JS 文件。很棘手吧？

那个鞭子项目应该提供你正在寻找的例子，如果有任何不清楚的地方请告诉我。

它使用 github 页面和部署目标，但同样您只需要托管在某处的 resources/public 目录中的所有内容。因此，您可以对任何部署目标使用非常相似的脚本。

Answer 2

向 Timothy Pratley 的回答致敬。

我在它的基础上添加了更多细节。参见 https://github.com/deg/clojure-then-you-think/wiki/Static-website-deploy-to-GitHub

但是，由于 Stack Overflow 版主担心 off-site 答案会过时，这是正确的，这是一份完整的副本，截至目前是正确的：

（向 Timothy Pratley 致敬！这里的想法是基于他的 whip project and ）。

许多 ClojureScript 项目不需要明确的服务器支持。他们要么在浏览器中完成所有操作，要么为他们的 back-end 使用 cloud-based 现有解决方案。我的 Trilystro toy project which is a re-frame browser app on the front-end and uses a Firebase 持久存储应用就是一个例子。

对于此类项目，一种非常简单的部署技术是创建一个 GitHub Pages 项目页面。成本为零，站点可用性似乎很好（在我的非常轻的测试中）。

设置

GitHub配置

GitHub的详细说明在该页面上，但步骤真的非常简单： - 在 GitHub 上，进入您的项目设置|选项。 - 打开 GitHub 页面（选项页面底部附近）。 - 将编译后的项目部署到项目的 gh-pages 分支。（见下文！） - 您的项目现在可以在 http://YOUR-GITHUB-ID.github.io/YOUR-GITHUB-REPOSITORY - 可选择设置自定义域 - 在选项中添加新的 URL 作为自定义域 - 在您的 DNS 提供商处，添加指向 YOUR-GITHUB-ID.github.io 的 CNAME 记录。重要提示：不要在此处包含存储库名称。（CNAME 必须指向主机，而不是 URL）。 - 在已部署项目的根目录添加一个名为 CNAME 的文件，其中仅包含 URL

Clojure 部署

上面关键的一步我们刷过了。您必须编译 ClojureScript 项目并将其放入 GitHub 存储库的 gh-pages 分支。

概括地说，这非常简单：只需执行 lein cljsbuild 并将结果推到 GitHub。一如既往，细节决定成败。根据 Timothy Pratley 的想法，我创建了两个在 Trilystro 中使用的脚本。最新版本在这里：

第一次项目部署：first-deploy.sh
正在进行的部署：deploy.sh

让我们详细看一下：（注意，当然，我以后可能会继续更改这些文件。来源将比下面的副本更准确）

Trilystro 还在一些地方 hard-coded 加入了这些脚本。您需要为自己的项目搜索和替换。

first-deploy.sh

在本地存储库之外创建一个目录结构。这是我们将保存已部署站点的工作副本的地方。
在本地初始化 git 存储库
添加 CNAME 文件
将此存储库与 GitHub

```

#!/bin/bash

DEPLOYDIR=../trilystro-website
mkdir $DEPLOYDIR
pushd $DEPLOYDIR

git init

cat > CNAME <<EOF
trilystro.vuagain.com
EOF

git add .
git commit -m "Initial deploy to GitHub Pages"
git push --force --quiet "git@github.com:deg/trilystro.git" master:gh-pages

git branch gh-pages
git checkout gh-pages

popd

```

deploy.sh

检查项目是否完全提交。我们将使用 git 提交 SHA 标记部署，因此我们希望避免捕获任何杂散更改。
清理并生成项目。如果发生任何错误，则中止。
清理部署目录，然后重构CNAME文件并复制编译结果。
同时将关于构建的信息复制到部署中，在一个名为 git-describe.txt
将新版本提交到 GitHub，并附上描述版本的评论

```

#!/bin/bash
# Adapted from https://github.com/timothypratley/whip/blob/master/deploy.sh
# See also 
set -e

DEPLOYDIR=../trilystro-website

RED='3[0;31m'
NOCOLOR='3[0m'

function die(){
  echo -e ${RED}""${NOCOLOR}
  exit 1
}

if [ -n "$(git status --untracked-files=no --porcelain)" ]; then
  die "Aborting deploy. There are uncommited changes.";
fi


lein clean
lein cljsbuild once min || die "Lein cljsbuild failed!"

GIT_COMMIT=$(git show -s --oneline HEAD)

pushd $DEPLOYDIR
rm -rf *
cp -r ../trilystro/resources/public/* .
cat > CNAME <<EOF
trilystro.vuagain.com
EOF
popd

git describe --always               > $DEPLOYDIR/git-describe.txt
git log -1 --format=%cd --date=iso >> $DEPLOYDIR/git-describe.txt

pushd $DEPLOYDIR
git add .
git commit -m "Deploy $GIT_COMMIT"
git push "git@github.com:deg/trilystro.git" gh-pages:gh-pages

popd

```

如何部署单页应用程序。用 ClojureScript / Figwheel 编写到静态服务器？

How do I deploy a single-page app. written in ClojureScript / Figwheel to a static server?

clojurescript

single-page-application

figwheel

设置

GitHub配置

Clojure 部署