前不久我写了一系列 Ktor，Ktjs，KtReact 相关的内容，用 Kotlin 来统一前后端也许是势在必行的吧。前不久与群友糍粑大佬聊天，我们一致认为目前 Ktor 与 React 的整合是个很麻烦的事情，当然也是非常有必要解决的问题，于是就有了这篇。
参考了网上一些文章，几乎所有的解决方案都是围绕着 Kotlin 官方推出的 frontend 插件来进行的，关于该插件的详情可以参考 Github 上的项目（点击进入），在此不多讲述。个人意见是，该插件暂时还不完善，特别是对于 npm 的操作问题很大，经常出现没有权限或者其他的问题。经过一些大佬的提醒，认为该插件目前适合 Windows 用户，而不适合 Mac 或 Linux 用户。
经过一番挣扎我放弃了这个插件，换用纯 gradle 的方式来进行整合，下面详细讲述整合的方法。
一、创建 Ktor 与 KtReact 项目
创建的过程就不多说了，参考我之前的文章即可(Ktor: 点击进入，KtReact: 点击进入)，最终我们得到两个项目，如果你不嫌麻烦的话，在两个工作空间分别开发也是可以的。
二、合并项目
新建一个目录，然后在这个目录下建立 backend 和 frontend 目录各一，把 Ktor 项目的内容拷到 backend 内，把 KtReact 项目拷到 frontend 内。最终的目录结构如下所示:
| - KtorReact
| | - backend
| | | - resources
| | | - src
| | | - build.gradle
| | - frontend
| | | - node_modules
| | | - public
| | | - src
| | | - package.json
| | | - yarn.lock
这里吐槽一下简书，居然不支持 Mermaid 图表，只能用土办法来画图了。
三、改成 gradle 项目
虽然有很多人不太喜欢用 gradle 来管理前端项目，而且用 gradle 来引用 js 库也显得蛋疼，但是为了统一还是不得不用一下，其实用习惯了也是“真香”。
就以上面那个目录结构，在 KtorReact 下增加 gradle 必要的文件，build.gradle，gradle.properties 和 settings.gradle，它们的代码分别如下:
build.gradle
buildscript {
repositories {
mavenCentral()
mavenLocal()
jcenter()
maven { url 'https://kotlin.bintray.com/ktor' }
maven { url "https://plugins.gradle.org/m2/" }
maven { url "https://dl.bintray.com/kotlin/kotlin-eap" }
maven { url "http://dl.bintray.com/kotlin/kotlin-dev" }
maven { url "http://dl.bintray.com/kotlinx/kotlinx" }
maven { url "http://dl.bintray.com/kotlin/kotlin-js-wrappers" }
}
dependencies {
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
classpath "com.moowork.gradle:gradle-node-plugin:$node_plugin_version"
}
}
repositories {
mavenCentral()
mavenLocal()
jcenter()
maven { url 'https://kotlin.bintray.com/ktor' }
maven { url "https://plugins.gradle.org/m2/" }
maven { url "https://dl.bintray.com/kotlin/kotlin-eap" }
maven { url "http://dl.bintray.com/kotlin/kotlin-dev" }
maven { url "http://dl.bintray.com/kotlinx/kotlinx" }
maven { url "http://dl.bintray.com/kotlin/kotlin-js-wrappers" }
}
task clean(type: Delete) {
delete new File(rootProject.rootDir, "backend/build")
delete new File(rootProject.rootDir, "frontend/build")
delete rootProject.buildDir
}
gradle.properties
ktor_version=1.1.3
kotlin.code.style=official
kotlin_version=1.3.21
logback_version=1.2.1
node_plugin_version=1.3.1
nodejs_version=11.10.0
yarn_version=1.13.0
settings.gradle
rootProject.name = 'KtorReact'
include ':backend', ':frontend'
到这里，gradle 已经可以为我们导入两个项目了，但是这里会发生一个很大的问题，就是 KtReact 的依赖会被 gradle 覆盖掉，而我们知道的是，KtReact 原本就不需要 gradle，它是将 node 模块变成 Ktjs 模块并且使用这种依赖方式。所以我们有必要把 KtReact 的依赖改成 gradle 形式的。
四、修改 KtReact 依赖
还是按上面的项目结构，在 frontend 目录内添加 build.gradle 文件:
apply plugin: 'kotlin2js'
apply plugin: 'com.moowork.node'
node {
version = "$nodejs_version"
yarnVersion = "$yarn_version"
download = false
workDir = file(project.projectDir)
}
sourceSets {
main.kotlin.srcDirs += ['src']
main.resources.srcDirs += ['resources']
}
kotlin {
experimental {
coroutines "enable"
}
}
repositories {
mavenCentral()
mavenLocal()
jcenter()
maven { url 'https://kotlin.bintray.com/ktor' }
maven { url "https://plugins.gradle.org/m2/" }
maven { url "https://dl.bintray.com/kotlin/kotlin-eap" }
maven { url "http://dl.bintray.com/kotlin/kotlin-dev" }
maven { url "http://dl.bintray.com/kotlinx/kotlinx" }
maven { url "http://dl.bintray.com/kotlin/kotlin-js-wrappers" }
}
dependencies {
compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
compile "org.jetbrains.kotlinx:kotlinx-html-js:0.6.9"
compile "org.jetbrains.kotlinx:kotlinx-coroutines-core-js:1.2.0"
compile "org.jetbrains.kotlinx:kotlinx-io-js:0.1.8"
compile "org.jetbrains.kotlinx:kotlinx-coroutines-io-js:0.1.8"
compile 'org.jetbrains:kotlin-react:16.6.0-pre.71-kotlin-1.3.31'
compile 'org.jetbrains:kotlin-extensions:1.0.1-pre.71-kotlin-1.3.31'
compile 'org.jetbrains:kotlin-react-dom:16.6.0-pre.71-kotlin-1.3.31'
compile 'org.jetbrains:kotlin-react-redux:5.0.7-pre.71-kotlin-1.3.31'
}
这里使用了 node 插件，可以在 gradle 面板看到插件的具体能力:
这样我们就成的把 KtReact 项目用 gradle 管理起来了，现在可以使用 gradle yarn 的各种命令，非常的舒服，比如说 gradle yarn_start 就可以运行起这个 KtReact 项目。
五、配置代理
这里可能大家会有一个疑惑，Ktor 作为 backend 项目，运行时监听 80 端口，而 KtReact 作为前端项目，运行时占用 3000 端口，这时如果 KtReact 去请求 Ktor 的 API，会造成跨域问题。
这个问题其实很好解决，设置代理即可，在 package.json 内改一下就好了，如下:
{
"name": "KtorReact-frontend",
... ...
"proxy": "http://0.0.0.0:80",
... ...
}
这样一来，KtReact 的请求都会被代理到 80 端口了。
六、一些额外的设置
为了方便开发调试等，还需要做一些额外的设置，比如说 KtReact 部分的构建，运行，以及停止服务。对于 node 插件来说，由它启动的 node 服务并不能被插件自身终止，会带来一定的麻烦，比如说下一次运行时端口已占用之类的，得有个办法去终止它。所以一些额外的 Gradle Task 是非常必要的。
task stop(type: Exec) {
commandLine "killall","node","\n","killall","java","\n"
}
task frontBuild(type: Exec) {
commandLine "yarn", "build"
}
frontBuild.doLast() {
copy {
includeEmptyDirs = true
from new File("build")
into "../backend/resources/web"
}
delete new File("build")
}
task frontRun(type: Exec) {
commandLine "yarn", "start"
}
这里同样也实现了把 KtReact 的编译结果直接扔进 Ktor 的 resources 内，方便做一站式发布。最后也就是发布了，写个发布脚本然后用 gradle 调用之:
#!/bin/sh
gradle :frontend:frontBuild
gradle :backend:build
task release(type: Exec) {
commandLine "sh", "release.sh"
}
七、踩坑
目前发现两个很大的坑，在 KtReact 内，如果配置了代理，则不能使用 Ktor 的 Compression 插件，否则请求会报错。
另一个坑是，如果把 Ktor 配成 https 的，代理请求也会出错，这个时候需要在 package.json 内加入 "secure":false。
最后说一句，我正在编写一个通用的 Ktor + KtReact 开发模板，应该不会太久就能正式面世了，到时候再写一个简单的使用手册吧。
