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

Question

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

single-page-applicationclojurescriptfigwheel

11

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

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

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

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

文档介绍如何开始使用Figwheel，但令人惊讶的是对开发完成后要做什么却没有详细说明。

- interstar

2个回答

4

致谢Timothy Pratley的答案。

我在此基础上增加了更多细节。请参见https://github.com/deg/clojure-then-you-think/wiki/Static-website-deploy-to-GitHub 但是，由于Stack Overflow的管理员正确地担心离线答案会过时，因此这里提供完整副本，截至目前为止是正确的：

< p >< em >（感谢Timothy Pratley！这些想法基于他的鞭项目和Stack Overflow回答）。

许多ClojureScript项目不需要显式的服务器支持。它们要么在浏览器中执行所有操作，要么使用云端现有解决方案作为后端。例如，我的Trilystro玩具项目是前端re-frame浏览器应用程序，并使用Firebase应用程序进行持久存储。

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

设置

GitHub配置

GitHub的详细说明在该页面上，但步骤非常简单： - 在GitHub中，进入您项目的Settings|Options。 - 打开GitHub Pages（在选项页面底部附近）。 - 将编译后的项目部署到您项目的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仍然在一些地方硬编码。您需要搜索并替换为自己的项目。 first-deploy.sh

在本地repo之外创建目录结构。这是我们将保留部署站点的工作副本的地方。
在本地初始化git仓库
添加CNAME文件
将此repo与GitHub上的gh-pages分支关联

```

#!/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 commit SHA 标记部署，因此我们要避免捕获任何杂散的更改。
清理并构建项目。如果发生任何错误，请中止。
清理部署目录，然后重建 CNAME 文件并复制编译结果。
还需要将有关构建的信息复制到部署中，以一个名为 git-describe.txt 的文件。
用描述版本的注释将新版本提交到 GitHub。

```

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

DEPLOYDIR=../trilystro-website

RED='\033[0;31m'
NOCOLOR='\033[0m'

function die(){
  echo -e ${RED}"$1"${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

```

- David Goldfarb

既然您已经在使用Firebase数据库，为什么不同时使用Firebase静态托管呢？ - Jp_

好问题。实际答案是，当我创建那个项目时，我没有意识到 Firebase 也提供托管服务，而不仅仅是数据库。 Firebase 对于这个问题来说并不相关，所以我会把我的回答保留在这里。但是，如果我重新开始进行那个项目，我可能会改变 Trilysto 的托管策略。 - David Goldfarb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Timothy Pratley · Accepted Answer

步骤1：生成生产环境的构建文件： lein do clean, cljsbuild once min 步骤2：将所有内容放在resources/public目录中，并使其能够被公开访问。

以下是我在示例项目中使用的脚本： https://github.com/timothypratley/whip/blob/master/deploy.sh HTML资源在本地开发和部署之间不会更改。唯一不同的是编译后的代码。实际上，您也可以部署开发编译后的代码。唯一建议进行“生产环境构建”的原因是，在本地开发时，中间JS文件未被组合起来，因为仅将更改的代码加载到浏览器中更快。对于部署，具有单个已编译JS文件更好。该单个已编译JS可以进行高级优化或简单优化，具体取决于您如何在project.clj中配置构建。您不需要真正担心这些问题，我只是解释因为您明确提出了更改。

可能听起来很奇怪HTML页面根本没有更改，因此让我们再解释一下。HTML页面包括一个已编译JS，当您运行figwheel时，如果打开该JS文件，您会看到它反过来只加载其他JS文件。但是，如果退出figwheel并进行干净的“生产环境”构建，则会看到所有代码都进入一个JS文件中。相当巧妙，不是吗？

该whip项目应提供您所需的示例，请告诉我是否有任何不清楚的地方。

它使用github页面和部署目标，但是再次强调，您只需要将所有内容放在资源/公共目录中，并使其能够被托管在某处。因此，您可以将非常类似的脚本与任何部署目标一起使用。