171 lines
5.8 KiB
Markdown
171 lines
5.8 KiB
Markdown
# 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;
|
||
|
||
|
||
}
|
||
}
|
||
```
|