學(xué)習(xí)日志 211231 用reactjs做個(gè)前端界面
Java調(diào)用elasticsearch
======================
# 發(fā)布
- 標(biāo)準(zhǔn)發(fā)布流程
- 走postman 192.168.2.15:31000/doc/_search 成功
## 嘗試做個(gè)界面
- spring boot 發(fā)布靜態(tài)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 默認(rèn)提供src/main/resources/static目錄下的所有文件
? - 對(duì)應(yīng)/目錄可以訪問(wèn)
? - 例如 src/main/resources/static/xxx.js 對(duì)應(yīng) localhost:8080/xxx.js
- 學(xué)習(xí)reactjs
? - https://reactjs.org/docs/add-react-to-a-website.html
? - 以及其后續(xù)教程
- 使用create react app創(chuàng)建工程
- 抽取一個(gè)Search組件
- 創(chuàng)建form 里面有input和button
? - 將input的value通過(guò)handleChange和state綁定
? - 通過(guò)onKeyDown e.key === "ENTER"來(lái)觸發(fā)搜索
- 發(fā)起ajax請(qǐng)求
? - 使用fetch
? - 第二參數(shù)里指定method:"POST" data
- 問(wèn)題
? - 響應(yīng)不是json 修改服務(wù)端 返回規(guī)范的json
? - 跨域了
- 前端單獨(dú)發(fā)布
? - 啟用集群中的nginx
? - 修改其service為NodePort形式 外部端口規(guī)劃為30080
? - 復(fù)制build好的資源到nginx上
- 問(wèn)題 圖標(biāo)的相對(duì)路徑錯(cuò)了
? - 參考 https://create-react-app.dev/docs/deployment/
? - 參考 https://www.codingdeft.com/posts/react-deploy-cdn/
? - 編寫 .env.production 文件
? ? - 內(nèi)容為 `PUBLIC_URL = http://192.168.2.15:30080/`
? - 重新 npm run build + 發(fā)布
- 問(wèn)題 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
? - 設(shè)置 headers
- 解析結(jié)果集
- 檢查
? - 輸入person
? - 返回正常
- 總結(jié) 發(fā)布流程為
? - 前端工程 npm run build
? - 前端工程 復(fù)制static 到 集群的nginx上
? - 后端工程 修改js等靜態(tài)資源的版本號(hào)
? ? - 如果只有js有修改, 只改js的版本號(hào)即可
? - 后端重新 docker 打包發(fā)布
? ? - mvn 編譯 package
? ? - docker 打鏡像
? ? - 上傳鏡像
? ? - kubectl 重啟 deployment
- TODO
? - 發(fā)布新文章 到 數(shù)據(jù)庫(kù)
? - 從數(shù)據(jù)庫(kù) 使用 flink build數(shù)據(jù)到elasticsearch