如何通过Gradle配置将React应用纳入Ktor Docker镜像？

问题出在Docker构建时没有把React的构建产物webapp/build目录复制到镜像中——本地运行时能访问是因为直接读取本地文件系统，而容器内不存在该路径。以下是两种可行的配置方案：

方案一：将静态资源打包到Jar包（推荐） #

这种方式让Jar包自包含所有资源，无论本地还是容器运行都能正常访问。

1. 修改Ktor路由配置
   把react的路径改为classpath路径，指向Jar包内的资源目录：

   routing {
       singlePageApplication {
           react("classpath:webapp")
           defaultPage = "index.html"
       }
   }
   

2. 配置Gradle资源打包
   在项目的build.gradle.kts中添加sourceSets配置，将React构建产物纳入主资源：

   sourceSets {
       main {
           resources {
               from("webapp/build") {
                   into("webapp") // 打包后Jar内会生成resources/webapp目录
               }
           }
       }
   }
   

方案二：Docker构建时复制静态资源目录 #

如果不想修改代码路径，可直接在Docker构建阶段将本地webapp/build复制到镜像对应路径。

1. 配置Docker插件的复制规则
   在build.gradle.kts的docker块中添加copySpec：

   docker {
       jreVersion.set(JavaVersion.VERSION_17) // 替换为你的项目JDK版本
       localImageName.set("your-app-image") // 自定义镜像名称
       copySpec.set(
           project.copySpec {
               from("webapp/build")
               into("webapp/build") // 和路由配置中的路径保持一致
           }
       )
   }
   

2. 添加任务依赖
   确保React的构建任务在Docker镜像构建前执行：

   tasks.named("dockerBuildImage") {
       dependsOn(":webapp:build") // 假设React项目在webapp模块，执行其build任务
   }
   

完成配置后，重新执行./gradlew runDocker即可正常加载React前端。

内容的提问来源于stack exchange，提问作者Jerry