使用前端应用程序部署 akka-http 应用程序

Question

我想弄清楚应该如何使用适当的前端应用程序部署 akka-http。

假设我们有提供一些 API 的 akka-http 应用程序。它位于 repo A 中。
对于这个服务器端应用程序，我们有前端应用程序(Angular 或 REACT 或其他)。它位于 repo B 中。

那么应该如何正确部署在一起呢？

我正在概述以下场景:

checkout A repo

导航到/src/main/public 并 checkout B 存储库

借助 jar 中的 SBT 构建 akka-http 存储库

在专用服务器上部署 jar

这是糟糕的场景吗？

Answer 1

最好的方法可能是单独部署您的前端应用程序。但将后端和前端应用程序部署为单个包也是一种常见做法(例如 JHipster 做法)。尽管如此，我可以回答如何捆绑。
为方便起见，您可以在单个 SBT 项目中创建两个模块 - service和 ui (前端应用程序的根目录)。一个用于后端，另一个用于前端。
SBT 设置
根据您使用的前端框架，我们将稍微修改 SBT 设置。假设我们使用 React。默认情况下，如果我们运行 npm build或 yarn build , 前端捆绑文件将在 ui/build 中结束默认目录。我们会标注build目录作为我们 ui 中的“资源”模块:

lazy val `ui` =
  project
    .in(file("./ui"))
    .settings(
      resourceGenerators in Compile += buildUi.init
    )

lazy val buildUi = taskKey[Seq[File]]("Generate UI resources") := {
  val webapp = baseDirectory.value / "build"
  val managed = resourceManaged.value
  for {
    (from, to) <- webapp ** "*" pair Path.rebase(webapp, managed / "main" / "ui")
  } yield {
    Sync.copy(from, to)
    to
  }
}

service模块将取决于 ui模块:

lazy val `service` =
  project
    .in(file("./service"))
    .dependsOn(`ui`)

现在， service可以从 ui获取资源文件在构建 React 应用程序之后。
如何与后端 API 一起提供前端应用程序
假设您创建了将由前端使用的 API 路由。创建一个 pathPrefix以“api”、“v1”、“api/v1”或其他什么开头的路由，稍后你会看到为什么我们需要这个前缀:

pathPrefix("api") { // api routes }

并创建另一条将服务于前端 Assets 的路线:

def assets: Route =
      getFromResourceDirectory("ui") ~ 
      pathPrefix("") {
        get {
          getFromResource("ui/index.html", ContentType(`text/html`, `UTF-8`))
        }
      }

然后以这种方式加入两条路线:

pathPrefix("api") seal { // api routes } ~ assets

瞧!
让我们解释一下这些路线。
首先，我们要匹配我们的 API 路由，因为它们位于特定的 URL。 assets匹配所有其他 URL。这意味着，访问任何不以 /api 开头的 URL将返回 React 的静态资源。
接下来，我们来剖析 assets路线:
第一个是 getFromResourceDirectory("ui") .还记得我们标记 ui/build 时目录作为资源目录？这意味着我们的 React 资源位于 target/scala/classes/ui目录，我们可以简单地以这种方式为他们服务。
第二个也是最棘手的一个:

pathPrefix("") {
  get {
    getFromResource("ui/index.html", ContentType(`text/html`, `UTF-8`))
  }
}

这意味着任何不以 /api 开头的 URL将匹配这条路线并返回 React 的 index.html文件。但是您可能会问:“为什么我们不简单地使用 pathSingleSlash ？”这正是棘手的部分 - 前端框架路由。
假设我们使用 pathSingleSlash (我们仅在根“/”上公开 React 的资源)。假设我们使用例如 react-router-dom用于在 React 应用程序中路由。我们有一个很好的“/users”路由，可以在表格中显示用户。我们转到 "/"-> Akka HTTP 服务器提供静态文件，一切都按预期工作 -> 我们单击某个按钮转到 "/users"并且一切都按预期工作，因为 React 路由器现在正在执行路由 -> 然后我们刷新我们的页面，我们收到 404 错误。为什么？因为它在 React 应用程序中是已知路由，但在 Akka HTTP 服务器中是未知路由。因此，在除 API 路由(“/api”)之外的任何路由上，我们都希望公开我们的 React 资源。与 pathPrefix("") ，我们正在这样做。当我们转到“/users”页面并点击刷新时，Akka HTTP 仍然返回 React 的资源，其余的路由魔术由 React 完成——“/users”页面渲染成功。
您还可以创建 CORS 路由，以便您可以在开发阶段从后端独立运行前端。
哈克快乐。