EESAST WEB

EESAST 网页前端

开发

1. 配置环境

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

2. 编辑环境变量

• 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

3. 安装依赖和启动

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

4. 推荐的工具和包

VSCode 扩展

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

浏览器插件

• React DevTools：调试React组件

NPM 包

• 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进行类型检查

CI/CD

• 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，可以考虑替换同类依赖

生产

Docker

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

部署

Docker-compose

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

Nginx

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