J语言是一门面向数组编程的函数式语言，而JHS（J HTTP Server）是它内置的Web服务器组件。大多数人以为JHS只能用来做J的在线练习环境，实际上它完全可以托管一个打包后的React单页应用，并提供动态API接口。本文将围绕迁移思路、部署配置、路由与API整合三个层面，详细讲解完整的迁移过程。
一、理解JHS的工作原理与目录结构
JHS本质上是运行在J进程内的一个HTTP处理引擎，它监听指定端口，将HTTP请求分发给对应的处理逻辑。每个JHS应用由若干配置文件和jhp文件组成，jhp文件类似PHP页面，里面混合了J代码与HTML模板，请求到达时会执行其中的J动词并返回结果。
JHS的默认站点目录通常位于安装路径下的~http文件夹，静态文件（HTML、JS、CSS、图片等）直接放在该目录或其子目录即可被访问。这一点与Nginx的静态托管非常相似，这也是React打包产物能够直接迁入的基础。需要注意JHS对URL的大小写处理比较严格，静态文件的命名建议统一使用小写，避免在Linux环境下出现404问题。
JHS的启动脚本一般是startjd或通过load 'web/jss'系列配置加载。核心配置项包括监听端口、根目录、以及各URL前缀到处理器的映射。理解这套映射规则后，我们就可以把/交给React静态页面，把/api/交给J动态代码。
二、React打包与静态资源迁移
迁移的第一步是执行React的生产构建。使用Vite或Webpack生成dist目录后，将其中的内容完整复制到JHS的静态根目录。以Vite为例，先调整vite.config.js中的base配置，确保资源引用路径与JHS站点根路径一致。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: '/', // 部署在站点根路径
build: {
outDir: 'dist',
assetsDir: 'static' // 静态资源统一放 static 子目录
}
})构建完成后执行npm run build，然后把dist下的index.html复制到JHS根目录，把static文件夹整个复制过去。此时访问http://localhost:8080/应该已经能看到React页面。如果页面白屏，优先检查浏览器控制台中资源请求是否404，多数情况是base路径配置错误或文件名大小写不匹配。
另一个常见坑是JHS对某些MIME类型的支持。React产物中的.js.map、.webp等文件类型如果在旧版JHS中未注册，会返回错误的Content-Type，导致浏览器拒绝解析。解决办法是在JHS的配置脚本中补充MIME映射，例如为js、mjs、json等扩展名显式声明application/javascript或application/json类型。
三、解决前端路由刷新404问题
React Router等前端路由库依赖浏览器History API，用户在子路由页面（例如/user/list）按F5刷新时，浏览器会向服务器请求这个路径，而JHS默认找不到对应的jhp文件就会返回404。解决办法是配置回退规则，把所有未匹配的GET请求统一返回index.html。
在JHS中可以通过自定义请求分发逻辑实现。典型做法是在入口配置中写一个判断：如果请求路径对应的静态文件存在就直接返回，否则检查是否以/api/开头，都不是则读取并返回index.html的内容。示例代码如下：
NB. jhs_fallback.ijs - 前端路由回退处理
handle=: 3 : 0
path=. y NB. 请求路径
if. fexist HTTPROOT,path do.
servefile path return.
end.
if. '/api/' -: 5 {. path do.
apihandler path return.
end.
NB. 其余路径回退到首页
servefile 'index.html'
)这种回退逻辑等价于Nginx中的try_files $uri /index.html。实现后，无论用户在哪个路由刷新页面，JHS都会返回React应用入口，由前端路由接管URL渲染，体验与Node Express方案完全一致。
四、整合J后端API与跨域处理
迁移的核心价值在于让React直接调用J代码提供的计算能力。J数组运算在统计、矩阵计算等场景下性能出色，把它作为API后端非常合适。在JHS中编写API接口，只需在jhp文件中解析请求参数、执行J动词、以JSON格式返回结果。
NB. api/sum.jhp - 求和接口
require 'web/gethttp'
nums=. ". gethttp 'nums' NB. 解析逗号分隔的数字
result=. +/ nums NB. J 求和动词
smoutput 'Content-Type: application/json', LF
smoutput '{"result":', (": result), '}'如果迁移初期React仍在独立开发服务器（如Vite Dev Server的5173端口）上运行，而JHS运行在8080端口，就会遇到CORS跨域问题。有两种解决方式：一是在Vite中配置server.proxy，把/api请求代理到JHS端口，这是开发阶段推荐的方式；二是在JHS的响应头中追加Access-Control-Allow-Origin等CORS头，适合前后端永久分离部署的场景。
生产环境合并部署后（React静态文件与API同源），跨域问题自然消失，这也是推荐最终形态：单一J进程同时承担静态资源服务与动态计算接口，部署极为简单，没有Node运行时依赖。
五、部署脚本与性能优化建议
最后建议把整个流程写成自动化脚本，一次性完成构建、复制、重启JHS三步操作。在Windows环境下可以用批处理脚本，Linux下用Shell脚本，核心逻辑如下：
#!/bin/bash set -e npm run build JHS_ROOT=~/j904-user/www rm -rf "$JHS_ROOT/static" cp -r dist/static "$JHS_ROOT/" cp dist/index.html "$JHS_ROOT/" echo "deploy done, restarting jhs..." # 重启 JHS 进程的命令视环境而定
性能方面有几点值得注意。第一，React产物务必开启gzip压缩，JHS本身不提供静态压缩，可以在上游加一层反向代理（如Nginx或Caddy）负责压缩与缓存，JHS只处理动态请求。第二，静态资源文件名中包含哈希值的文件可以设置长缓存头，减少重复下载。第三，J是单线程解释执行，耗时计算应拆分为小批次返回，或采用异步任务队列，避免阻塞HTTP请求处理。
整体来看，React迁移到JHS并不复杂：静态托管靠目录复制，路由回退靠自定义分发，API整合靠jhp文件。迁移完成后，你将得到一个由J语言全栈驱动的Web应用，既保留了React的现代前端体验，又能充分利用J的数组计算能力，适合数据分析、科学计算类Web工具的快速交付。