学习日志 211231 用reactjs做个前端界面

Java调用elasticsearch

======================

# 发布

- 标准发布流程

- 走postman 192.168.2.15:31000/doc/_search 成功

## 尝试做个界面

- spring boot 发布静态html文件

  - https://stackoverflow.com/questions/31876389/how-to-serve-static-html-content-page-in-spring-boot#:~:text=You%20can%20use%20ModelAndView%20in%20order%20to%20serve,application.properties%3A-%20spring.mvc.view.suffix%20%3D.html%20HTML%20File%20%3A%20-%20src%2Fmain%2Fresources%2Fstatic%2Findex.html

  - spring boot 默认提供src/main/resources/static目录下的所有文件

  - 对应/目录可以访问

  - 例如 src/main/resources/static/xxx.js 对应 localhost:8080/xxx.js

- 学习reactjs

  - https://reactjs.org/docs/add-react-to-a-website.html

  - 以及其后续教程

- 使用create react app创建工程

- 抽取一个Search组件

- 创建form 里面有input和button

  - 将input的value通过handleChange和state绑定

  - 通过onKeyDown e.key === "ENTER"来触发搜索

- 发起ajax请求

  - 使用fetch

  - 第二参数里指定method:"POST" data

- 问题

  - 响应不是json 修改服务端 返回规范的json

  - 跨域了

- 前端单独发布

  - 启用集群中的nginx

  - 修改其service为NodePort形式 外部端口规划为30080

  - 复制build好的资源到nginx上

- 问题 图标的相对路径错了

  - 参考 https://create-react-app.dev/docs/deployment/

  - 参考 https://www.codingdeft.com/posts/react-deploy-cdn/

  - 编写 .env.production 文件

    - 内容为 `PUBLIC_URL = http://192.168.2.15:30080/`

  - 重新 npm run build + 发布

- 问题 spring boot mvc 返回 "error":"Unsupported Media Type"

  - 参考 https://javascript.info/fetch#:~:text=To%20set%20a%20request%20header%20in%20fetch%2C%20we,fetch%28protectedUrl%2C%20%7B%20headers%3A%20%7B%20Authentication%3A%20%27secret%27%20%7D%20%7D%29%3B

  - 设置 headers

- 解析结果集

- 检查

  - 输入person

  - 返回正常

- 总结 发布流程为

  - 前端工程 npm run build

  - 前端工程 复制static 到 集群的nginx上

  - 后端工程 修改js等静态资源的版本号

    - 如果只有js有修改, 只改js的版本号即可

  - 后端重新 docker 打包发布

    - mvn 编译 package

    - docker 打镜像

    - 上传镜像

    - kubectl 重启 deployment

- TODO

  - 发布新文章 到 数据库

  - 从数据库 使用 flink build数据到elasticsearch