Risk-Guard

This project is a secondary development based on the Alibaba open-source template Ant Design Pro, which uses React, UmiJS, Ant Design and other technology stacks.

Install Dependencies

Install node_modules:

pnpm i

Or install dependencies using yarn or npm.

Start the Project

pnpm start

Build the Project

pnpm build

More Information

You can view the complete documentation at the official website.

If you want to use error monitoring, you need to configure the corresponding configuration items. This project uses the Sentry SDK. For the backend, you can choose the Sentry service or the GlitchTip service that supports the Sentry SDK. It has lower server requirements than Sentry and can also be deployed locally for free. It is recommended to use it. Or you can also completely use your own error monitoring solution and simply remove the Sentry-related code:

1. Delete the Sentry import code in src/app.tsx,
2. Delete the src/utils/sentry.ts file,
3. Delete the Sentry-related dependencies in package.json.

If you confirm using the Sentry configuration for this project, you need to set the corresponding environment variables:

1. Set the global variable for the DSN: UMI_APP_SENTRY_DSN. If this variable is not provided, the Sentry SDK will not be initialized.
2. Set the global variable for the release: UMI_APP_SENTRY_RELEASE. If not provided, a default value will be set to ensure the basic version number requirements of the project, which can be seen in the define section of /config/config.ts.
3. You can provide these variables by creating a .env file in the root directory, or use your CI/CD tool to inject environment variables.

If you want to upload sourcemaps to the Sentry service backend, you need to configure the required environment variables. You can create a .sentryclirc file in the root directory with the following content:

[defaults]
url = https://sample.sentry.io/
org = your-org-name
project = your-project-name

[auth]
token = your-sentry-token

Or use the following environment variables provided by your CI/CD tool to inject:

1. SENTRY_URL: The URL of the Sentry service, for example: https://sample.sentry.io/
2. SENTRY_ORG: The organization name of the Sentry service, for example: your-org-name
3. SENTRY_PROJECT: The project name of the Sentry service, for example: your-project-name
4. SENTRY_TOKEN: The API token of the Sentry service, for example: your-sentry-token

In addition, it is also necessary to install the @sentry/cli package to upload sourcemaps to the Sentry service backend. You can refer to the sentry/cli documentation.

This project provides a reference for GitHub Actions deployment workflows. You can check the yml files in the project's .github/workflows directory, or refer to the official GitHub Actions documentation.

Since the project routing uses history mode, nginx configuration is required, otherwise refreshing the page will result in 404 errors. Additionally, since SSE interfaces are used, some special configurations are also needed.

server {
    listen 80;
    # server_name your-domain.com;

    # Security headers
    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;

    # If you want to do version control, you can use symbolic links. Place two directories, current and release, in the root directory, and name the packaged dist directory with the version name and put it in the release directory.
    # Then, create a symbolic link from the current directory to the specific version directory in the release directory, for example: ln -snf /data/react/release/v1.0.0 /data/react/current
    # Finally, set the following root to /data/react/current. When switching versions, you only need to switch the directory pointed to by the symbolic link.
    # This method can switch in seconds without restarting the nginx service, and can be paired with your own CI/CD tools to automatically deploy to the nginx server.
    root /data/react;
    index index.html;

    # Homepage negotiation cache
    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;

        # Service Worker and Manifest JSON need special headers
        if ($uri = /sw.js) {
            add_header Service-Worker-Allowed "/";
        }
        if ($uri = /manifest.json) {
            add_header Content-Type application/manifest+json;
        }
    }

    # Precisely match static resources (JS, CSS, images, fonts, etc.) with an 8-character hash
    # Regex explanation: match files with a period followed by 8 characters (0-9, a-f), followed by a period and a file extension.
    # Example match: umi.7b3e198f.js, logo.1a2b3c4d.png
    # Note: This rule applies only to the packaging rules of this project's resources. For other packaging methods or different resource file name formats, adjustments need to be made according to the actual situation.
    location ~* "\.[0-9a-f]{8}\.(js|css|png|jpe?g|gif|svg|ico|woff2?|eot|ttf|pdf)$" {
        try_files $uri =404;

        # Cache for 7 days
        expires 7d;
        add_header Cache-Control "public, max-age=604800, immutable";
    }

    # SPA routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # SSE interface
    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;

        # Path rewriting
        rewrite ^/api(/.*)$ $1 break;

        proxy_pass http://127.0.0.1:8090;
    }

    # API proxy
    location /api/ {
        # Path rewriting
        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;


    }
}