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

Question

我想知道如何使用适当的前端应用程序部署akka-http。

让我们假设我们有akka-http应用程序，它提供了一些API。它位于回购A。对于这个服务器端应用程序，我们有前端应用程序(角或反应或其他)。它位于回购B。

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

我正在浏览以下场景：

1. 检查A回购
2. 导航到/src/main/public并签出B
3. 利用jar中的SBT构建akka-http回购系统
4. 在专用服务器上部署jar

情况不好吗？

Answer 1

最好的方法可能是单独部署前端应用程序。但是，将后端和前端应用程序作为一个包部署也是一种常见的做法(例如，JHipster实践)。尽管如此，我还是可以回答如何捆绑。

为了方便起见，您可以在一个SBT项目中创建两个模块-- service和ui (前端应用程序的根目录)。一个用于后端，另一个用于前端。

SBT设置

根据您使用的前端框架，我们将稍微修改SBT设置。假设我们用的是反应。默认情况下，如果我们运行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可以在构建React应用程序之后从ui中获取资源文件。

如何在后端API的同时为前端应用提供服务

让我们假设您创建了将由前端使用的API路由。创建一个以"api“、"v1”、"api/v1“或其他任何东西开头的pathPrefix路由，稍后您将看到为什么需要这个前缀：

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

并创建另一条为前端资产服务的路线：

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服务器服务静态文件，所有服务器都按照预期工作，单击某个指向"/users”的按钮，所有操作都按预期进行，因为React路由器现在正在进行路由，所以->刷新页面，我们得到一个404错误。为什么？因为它是React应用程序中已知的路由，但在Akka HTTP服务器中却是未知的路由。因此，在任何路由上，除了API路由("/api")，我们都希望公开我们的反应资源。有了pathPrefix("")，我们就能做到这一点。当我们转到"/users“页面并点击刷新时，Akka仍然返回React的资源，其余的路由魔术是通过React "/users”页面渲染成功完成的。

您还可以创建CORS路由，以便在开发阶段独立地从后端运行前端。

愉快的徒步旅行。

Answer 2

这可能不是你所看到的，但我有一个种子项目，其中包含阿克卡Http和角5，所有在一个回购(你要求两个回购)配置为部署到Heroku在单一的dyno。

https://github.com/jdschmitt/akka-angular-heroku

希望它能帮到你。