alert/README_CN.md

Risk-Guard

本项目基于 Ant Design Pro 的阿里开源模板二开, Ant Design Pro 则使用了 React, UmiJS, Ant Design等技术栈.

安装依赖

安装 node_modules:

pnpm i

或者使用 yarn 或 npm 安装依赖。

启动项目

pnpm start

构建项目

pnpm build

更多信息

您可以在 官方网站 查看完整文档。

如想使用错误监控, 则需要配置对应的配置项, 本项目选用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文件, 内容如下:

[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文档.

本项目提供github actions部署工作流参考, 可查看项目.github/workflows目录下的yml文件, 或官方github actions文档.

由于项目路由使用history模式，需要配置nginx，否则刷新页面会404,并且用了sse接口，也需要一些特殊配置。

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;


    }
}