# Risk-Guard 本项目基于 [Ant Design Pro](https://pro.ant.design) 的阿里开源模板二开, Ant Design Pro 则使用了 React, UmiJS, Ant Design等技术栈. ## 安装依赖 安装 `node_modules`: ```bash pnpm i ``` 或者使用 `yarn` 或 `npm` 安装依赖。 ### 启动项目 ```bash pnpm start ``` ### 构建项目 ```bash pnpm build ``` ## 更多信息 您可以在 [官方网站](https://pro.ant.design) 查看完整文档。 如想使用错误监控, 则需要配置对应的配置项, 本项目选用sentry sdk, 后台您可选用sentry服务或者支持sentry sdk的glitchtip服务,它对服务器要求比sentry低, 也可免费本地自部署, 推荐使用. 或者您也可以完全选用你自己错误监控方案, 删除sentry相关代码即可: 1. 删除src/app.tsx里的sentry引入代码, 2. 删除src/utils/sentry.ts文件, 3. 删除package.json里的sentry相关依赖. 如你确认使用本项目的sentry配置, 则需要设置对应的环境变量: 1. 设置dsn的全局变量: `UMI_APP_SENTRY_DSN`, 该变量没有提供则不会初始化sentry sdk 2. 设置release的全局变量: `UMI_APP_SENTRY_RELEASE`, 未提供的情况下会设置默认值来保证项目基本版本号使用需求, 在/config/config.ts的define项里可以看到 3. 这些变量你可在根目录新建.env文件提供, 或使用您的CI/CD工具提供的环境变量注入. 如想上传sourcemap到sentry服务后台, 则需要配置所需环境变量, 可在根目录新建.sentryclirc文件, 内容如下: ```ini [defaults] url = https://sample.sentry.io/ org = your-org-name project = your-project-name [auth] token = your-sentry-token ``` 或使用您的CI/CD工具提供的以下环境变量注入: 1. `SENTRY_URL`: Sentry服务的URL, 例如: `https://sample.sentry.io/` 2. `SENTRY_ORG`: Sentry服务的组织名称, 例如: `your-org-name` 3. `SENTRY_PROJECT`: Sentry服务的项目名称, 例如: `your-project-name` 4. `SENTRY_TOKEN`: Sentry服务的API令牌, 例如: `your-sentry-token` 另外还需安装@sentry/cli包来上传sourcemap到sentry服务后台, 可参考[sentry/cli](https://github.com/getsentry/cli)文档. 本项目提供github actions部署工作流参考, 可查看项目.github/workflows目录下的yml文件, 或官方[github actions](https://github.com/actions)文档. 由于项目路由使用history模式,需要配置nginx,否则刷新页面会404,并且用了sse接口,也需要一些特殊配置。 ```nginx server { listen 80; # server_name your-domain.com; # 安全头 add_header X-Frame-Options "SAMEORIGIN" always; add_header X-Content-Type-Options "nosniff" always; add_header X-XSS-Protection "1; mode=block" always; gzip on; gzip_min_length 10k; gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript; gzip_comp_level 6; gzip_vary on; # 如果要做版本控制, 可使用软连接方式, 根目录放current和release两个目录, 打包后的dist目录命名为版本名放到release目录里 # 然后current目录软链接到release目录里的具体版本目录, 例如: ln -snf /data/react/release/v1.0.0 /data/react/current # 最后将下面的root设置为/data/react/current, 切换版本时, 只需要切换软链接指向的目录即可 # 该方式能做到无需重启nginx服务, 秒级切换, 可搭配自己的CI/CD工具, 自动部署到nginx服务器 # 或使用您自己的版本控制工作流 root /data/react/current; index index.html; # 首页协商缓存 location = /index.html { add_header Cache-Control "no-cache must-revalidate"; expires 0; } location ~ ^/(sw\.js|manifest\.json)$ { add_header Cache-Control "no-cache must-revalidate"; expires 0; # 根据文件类型添加特殊头部 if ($uri = /sw.js) { add_header Service-Worker-Allowed "/"; } if ($uri = /manifest.json) { add_header Content-Type application/manifest+json; } } # 精准匹配带有 8 位 hash 的静态资源 (JS, CSS, 图片, 字体等) # 正则解释:匹配以 . 开头,跟随 8个数字或a-f字母,再跟随 .后缀 的文件 # 例如匹配: umi.7b3e198f.js, logo.1a2b3c4d.png # 注意: 此规则仅限该项目的打包资源的规则, 其他打包方式或者资源文件名格式不同, 则需要根据实际情况调整 location ~* "\.[0-9a-f]{8}\.(js|css|png|jpe?g|gif|svg|ico|woff2?|eot|ttf|pdf)$" { try_files $uri =404; # 走强缓存:immutable 表示文件永不改变 expires 7d; add_header Cache-Control "public, max-age=604800, immutable"; } # SPA路由 location / { try_files $uri $uri/ /index.html; } # SSE接口 location = /api/sse/connect { proxy_http_version 1.1; proxy_set_header Connection ''; proxy_set_header Cache-Control "no-transform"; proxy_set_header X-Accel-Buffering "no"; proxy_buffering off; proxy_read_timeout 86400s; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-Forwarded-Proto $scheme; # 路径重写 rewrite ^/api(/.*)$ $1 break; proxy_pass http://127.0.0.1:8090; } # API代理 location /api/ { # 路径重写 rewrite ^/api(/.*)$ $1 break; gzip on; gzip_types application/json; gzip_comp_level 6; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-Forwarded-Proto $scheme; proxy_pass http://127.0.0.1:8090; } } ```