[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.gradlegradle.propertiessettings.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 开发模板,应该不会太久就能正式面世了,到时候再写一个简单的使用手册吧。

推荐阅读更多精彩内容