Skip to content

eesast/web

Repository files navigation

EESAST WEB

CD

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 BotMergify进行依赖自动更新
    • 相关配置见.github/renovate.json.github/mergify.yml
  • 依赖引入原则
    • 能用Plain HTMLCSS、正则表达式解决的问题,不额外引入依赖
    • 优先使用Reactantd官方推荐的、或社区活跃度高(star)的包
    • 优先使用自带TypeScript类型系统的包
    • 不引入过于庞大的包(如lodash),可以用其旗下的子包(如lodash-es)替代
    • 不引入过时(最近一次更新时间超过一年、或官网说明Deprecated)的包
    • 区分dependenciesdevDependencies(后者用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端口