如何在Scala REST API服务器上部署运行React.js应用

Hey there! Great question—handling static assets from a create-react-app (CRA) build with Akka-HTTP doesn’t have to involve manual, outdated routing anymore. Below are two streamlined, automated solutions to make your setup smoother:

1. Akka-HTTP's Built-in Static Asset Handling + SPA Fallback #

Akka-HTTP has robust directives for serving static files, and we can extend this to handle CRA’s single-page app (SPA) routing (where all non-API requests need to fall back to index.html).

Step-by-Step Setup: #

• First, run npm run build in your CRA project. This generates optimized static files in the build folder.
• Copy the contents of the CRA build folder into your Scala project’s src/main/resources/public directory. (We’ll automate this copy step in the next section!)
• Configure your Akka-HTTP routes to prioritize API endpoints, then serve static assets, and finally fall back to index.html for SPA routes:

import akka.http.scaladsl.server.Directives._
import akka.http.scaladsl.server.Route

// Define your API routes first
val apiRoutes: Route = pathPrefix("api") {
  path("users") {
    get {
      // Your API logic here
      complete("List of users")
    }
  } ~ path("posts" / IntNumber) { postId =>
    get {
      complete(s"Details for post $postId")
    }
  }
}

// Serve static assets from the public resource directory
val staticAssetRoutes: Route = 
  pathSingleSlash {
    getFromResource("public/index.html")
  } ~ getFromResourceDirectory("public")

// Fallback route for SPA: any non-API/non-static request returns index.html
val spaFallbackRoute: Route = path("" | Remaining) { _ =>
  getFromResource("public/index.html")
}

// Combine all routes
val mainRoute: Route = apiRoutes ~ staticAssetRoutes ~ spaFallbackRoute

This setup ensures:

• API requests go to your Scala endpoints
• Static assets (CSS, JS, images) are served directly
• Any frontend route (like /dashboard or /profile) is handled by React’s router since we return index.html

2. Automate CRA Build + Asset Copy with SBT #

To avoid manually copying the CRA build files every time, you can add an SBT task to run the build and copy assets automatically.

Add this to your build.sbt:

import sbt._

// Define a task to copy CRA build output to resources/public
lazy val copyReactBuild = taskKey[Unit]("Copies optimized React build files to the Scala project's resources")

copyReactBuild := {
  // Update these paths to match your project structure
  val craBuildDir = file("./path/to/your/react-app/build")
  val targetResourceDir = resourceDirectory.value / "public"
  
  // Delete existing public directory and copy new build files
  IO.delete(targetResourceDir)
  IO.copyDirectory(craBuildDir, targetResourceDir, overwrite = true)
}

// Optional: Make compile task depend on copyReactBuild
// Every time you compile Scala code, it first updates React assets
compile in Compile := (compile in Compile).dependsOn(copyReactBuild).value

Want to auto-run npm run build too? Extend the task to execute the CRA build command:

copyReactBuild := {
  val craRootDir = file("./path/to/your/react-app")
  // Run npm build command
  Process("npm run build", craRootDir).!
  // Then copy files
  val craBuildDir = craRootDir / "build"
  val targetResourceDir = resourceDirectory.value / "public"
  IO.delete(targetResourceDir)
  IO.copyDirectory(craBuildDir, targetResourceDir, overwrite = true)
}

Now, running sbt compile will automatically build your React app and sync the latest assets to your Scala project.

Bonus: Development Environment Proxy #

For local development, skip building CRA entirely by proxying requests to the CRA dev server (running on localhost:3000) from Akka-HTTP. This gives you hot reloading and instant frontend updates:

import akka.http.scaladsl.client.RequestBuilding._
import akka.http.scaladsl.model.Uri
import akka.http.scaladsl.server.Directives._
import akka.stream.Materializer

// Proxy route for development
def devProxyRoute(implicit mat: Materializer): Route =
  pathPrefix("") {
    extractRequest { req =>
      val proxyUri = req.uri.copy(authority = Uri.Authority(host = Uri.Host("localhost"), port = 3000))
      complete(Http().singleRequest(req.copy(uri = proxyUri)))
    }
  }

// Switch routes based on environment
val isDev = sys.env.getOrElse("ENV", "development") == "development"
val mainRoute: Route = if (isDev) apiRoutes ~ devProxyRoute else apiRoutes ~ staticAssetRoutes ~ spaFallbackRoute

Now you can run npm start in your CRA project and sbt run in your Scala project—all frontend requests are proxied to the CRA dev server, so you get instant feedback without rebuilding.

内容的提问来源于stack exchange，提问作者Виталий Мудрый