[Ktor x React] 整合 Ktor 与 React

前不久我写了一系列 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 面板看到插件的具体能力:

node 插件

这样我们就成的把 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 开发模板，应该不会太久就能正式面世了，到时候再写一个简单的使用手册吧。