更好的方法可能是单独部署前端应用。但是将后端和前端应用作为一个捆绑包部署也是一种常见的做法（例如JHipster的做法）。尽管如此，我可以回答如何作为捆绑包来做。
为了方便起见，您可以在一个SBT项目中创建两个模块-service和ui（前端应用程序的根目录），一个用于后端，另一个用于前端。

SBT设置

根据您使用的前端框架，我们将修改一些SBT设置。假设我们使用React。默认情况下，如果我们运行npm build或yarn build，前端捆绑的文件将在默认情况下结束于ui/build目录。我们将build目录标记为ui模块中的“resources”：

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`)

现在，在构建React应用程序后，service可以从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目录标记为resources目录吗？这意味着我们的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应用程序中使用react-router-dom进行路由。我们有一个很好的“/users”路由，它在一个表中显示用户。我们转到“/”-〉Akka HTTP服务器提供静态文件，所有工作都如预期-〉我们单击某个按钮，转到“/因为React路由器现在正在进行路由-〉然后我们刷新页面，我们得到一个404错误。为什么？因为它在React应用程序中是一个已知的路由，但在Akka HTTP服务器中是一个未知的路由。因此，在除API路由之外的任何路由上（“/api”）我们希望公开React资源。使用pathPrefix("")，我们正是这样做的。当我们转到“/users”页面并点击刷新时，Akka HTTP仍然返回React的资源，其余的路由魔法由React完成-“/users”页面成功呈现。
您还可以创建CORS路线，以便在开发阶段从后端独立运行前端。
哈金快乐。

这可能不是你正在寻找的，但我有一个种子项目，其中包含Akka Http和Angular 5都在一个回购（你要求2回购）配置为部署到Heroku在一个单一的dyno。
https://github.com/jdschmitt/akka-angular-heroku
希望对你有帮助。