CD

EESAST 网页前端

• NodeJS 20 (官网下载安装包)
• NPM (Node自带)
• Yarn (npm i yarn -g)

• REACT_APP_API_URL:生产环境后端地址,默认为 https://api.eesast.com
• REACT_APP_API_DEV_URL:测试环境后端地址,默认为 https://api-dev.eesast.com
• REACT_APP_HASURA_HTTPLINK/REACT_APP_HASURA_WSLINK:生产环境Hasura数据库地址,默认为 api.eesast.com/v1/graphql
• REACT_APP_HASURA_DEV_HTTPLINK/REACT_APP_HASURA_DEV_WSLINK:测试环境Hasura数据库WebSocket地址,默认为 api-dev.eesast.com/v1/graphql
• 若需使用GraphQL CodeGen,要创建.env.local文件,并添加HASURA_GRAPHQL_ADMIN_SECRET

yarn install // 如果Node版本低于20,可能会报错,需要添加参数--ignore-engines
yarn start // 如果Node版本低于20,可能会报错,需要添加参数--openssl-legacy-provider

• GitHub Copilot & GitHub Copilot Chat
• Prettier
• ESLint
• vscode-styled-component
• GraphQL: Language Feature Support

• React DevTools:调试React组件

• rimraf:在Windows上删除node_modules文件夹时更高效,类似于Linux中的rm -rf

• yarn start:支持热更新,保存文件后自动刷新页面
• yarn generate:根据数据库自动生成类型文件
• yarn build:编译打包源文件
• yarn analyze:对build内的打包进行构成分析
• yarn test:使用Jest进行测试
• yarn lint:使用ESLint进行语法检查
• yarn typecheck:使用tsc进行类型检查

• Commit之前自动使用husky & lint-staged & prettier工具链进行代码风格美化
  • 相关配置见.husky/*和package.json
• Commit之后使用Github Actions进行自动化测试,包含Jest测试、ESLint语法检查、tsc类型检查
  • 相关配置见.github/workflows/*

• 使用Renovate Bot和Mergify进行依赖自动更新
  • 相关配置见.github/renovate.json和.github/mergify.yml
• 依赖引入原则
  • 能用Plain HTML、CSS、正则表达式解决的问题,不额外引入依赖
  • 优先使用React、antd官方推荐的、或社区活跃度高(star)的包
  • 优先使用自带TypeScript类型系统的包
  • 不引入过于庞大的包(如lodash),可以用其旗下的子包(如lodash-es)替代
  • 不引入过时(最近一次更新时间超过一年、或官网说明Deprecated)的包
  • 区分dependencies和devDependencies(后者用yarn add -D添加)
  • 指定版本号,不使用^和~(为了Renovate Bot能够自动更新)
• 依赖管理方法
  • yarn outdated:查看过时的依赖
  • depcheck:查看未被使用的依赖(需要先安装depcheck)
• 依赖手动更新原则
  • 使用yarn upgrade-interactive进行交互式更新
  • 了解Sementic Versioning语义化版本规范,先更新到最新的patch版本,再逐步更新minor版本,更新major版本时需要谨慎,可以查阅网上已有教程或更新脚本
  • 更新前commit所有更改,更新后测试无报错后立即commit
  • 若发现有依赖长期未更新或显示Deprecated,可以考虑替换同类依赖

• 对主分支的push会触发自动化生产,相关配置见.github/workflows/*
• 使用Dockerfile进行构建,并上传到Docker Hub
  • 与yarn build相同,优点是跨平台

docker pull eesast/web:latest // 下载Docker-Hub镜像
docker-compose up -d

server_name eesast.com, 反向代理到27776端口