11

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

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

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

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

该文档非常适合如何开始使用 Figwheel，但令人惊讶的是，在您完成开发后该做什么却保持沉默。

4

2 回答 2

9

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

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

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

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

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

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

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

于 2016-06-07T17:42:40.167 回答
4

向 Timothy Pratley 致敬，感谢他的回答。

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

但是，由于 Stack Overflow 版主担心场外答案会过时，这是正确的，所以这里有一个完整的副本，截至目前是正确的：

（给 Timothy Pratley 的帽子提示！这里的想法是基于他的，来自他的鞭子项目和Stack Overflow 的答案）。

许多 Clo​​jureScript 项目不需要明确的服务器支持。他们要么在浏览器中做所有事情，要么使用基于云的现有解决方案作为后端。一个例子是我的Trilystro玩具项目，它是前端的重新框架浏览器应用程序，并使用Firebase应用程序进行持久存储。

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

设置

GitHub配置

GitHub 的详细说明在该页面上，但步骤非常简单： - 在 GitHub 上，进入您的项目设置|选项。- 打开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 分支。

概括地说，这很容易：只需执行 alein cljsbuild并将结果推送到 GitHub。一如既往，魔鬼在细节中。基于 Timothy Pratley 的想法，我创建了两个在 Trilystro 中使用的脚本。最新版本在这里：

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

Trilystro 仍然在一些地方硬编码到这些脚本中。您需要搜索和替换您自己的项目。

首次部署.sh
  • 在本地 repo 之外创建一个目录结构。这是我们将保留已部署站点的工作副本的地方。
  • 在本地初始化一个 git repo
  • 添加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

```

部署.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://stackoverflow.com/questions/37667931/how-do-i-deploy-a-single-page-app-written-in-clojurescript-figwheel-to-a-stat
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

```

于 2018-04-03T21:02:52.663 回答