🚀 法律助手应用 - 部署指南

环境要求

开发环境

Node.js: >= 18.0.0
npm: >= 9.0.0
Angular CLI: >= 17.0.0

快速开始

1. 安装依赖

cd legal-assistant-app
npm install

2. 启动开发服务器

ng serve

或

npm start

访问：http://localhost:4200

3. 构建生产版本

ng build --configuration production

构建文件输出到：dist/legal-assistant-app/

项目结构

legal-assistant-app/
├── src/
│   ├── app/
│   │   ├── pages/               # 页面组件
│   │   │   ├── home/           # 首页
│   │   │   ├── consultation/   # AI咨询
│   │   │   ├── cases/          # 案件管理
│   │   │   ├── services/       # 法律服务
│   │   │   ├── learning/       # 法律学习
│   │   │   ├── tools/          # 工具箱
│   │   │   └── profile/        # 个人中心
│   │   ├── components/         # 共享组件
│   │   ├── services/           # 服务
│   │   ├── models/             # 数据模型
│   │   └── app.routes.ts       # 路由配置
│   ├── assets/                 # 静态资源
│   ├── styles.scss             # 全局样式
│   └── index.html              # 入口HTML
├── STYLE_GUIDE.md              # 样式指南
├── TEST_CHECKLIST.md           # 测试清单
└── README.md                   # 项目说明

配置说明

路由配置

位置：src/app/app.routes.ts

所有路由已配置完成，支持：

懒加载
路由守卫（可选）
路由预加载

环境配置

创建环境配置文件：

# 开发环境
src/environments/environment.ts

# 生产环境
src/environments/environment.prod.ts

示例配置：

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
  // 其他配置...
};

后端集成指南

1. 创建API服务

// src/app/services/api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = environment.apiUrl;
  
  constructor(private http: HttpClient) {}
  
  // 案件相关API
  getCases() {
    return this.http.get(`${this.apiUrl}/cases`);
  }
  
  createCase(data: any) {
    return this.http.post(`${this.apiUrl}/cases`, data);
  }
  
  // 更多API方法...
}

2. API端点示例

GET    /api/cases              # 获取案件列表
POST   /api/cases              # 创建案件
GET    /api/cases/:id          # 获取案件详情
PUT    /api/cases/:id          # 更新案件
DELETE /api/cases/:id          # 删除案件

GET    /api/lawyers            # 获取律师列表
GET    /api/lawyers/:id        # 获取律师详情

POST   /api/consultation       # AI咨询
GET    /api/consultation/history  # 咨询历史

GET    /api/tools              # 工具列表
POST   /api/tools/calculate    # 赔偿计算

GET    /api/evidence           # 证据列表
POST   /api/evidence/upload    # 上传证据

部署方案

方案一：Nginx部署

1. 构建项目

ng build --configuration production

2. Nginx配置

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/legal-assistant/dist/legal-assistant-app/browser;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # API代理
    location /api {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

3. 部署步骤

# 复制构建文件
sudo cp -r dist/legal-assistant-app/* /var/www/legal-assistant/

# 重启Nginx
sudo systemctl restart nginx

方案二：Docker部署

1. 创建Dockerfile

# 构建阶段
FROM node:18 AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build -- --configuration production

# 运行阶段
FROM nginx:alpine
COPY --from=build /app/dist/legal-assistant-app/browser /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. 构建镜像

docker build -t legal-assistant-app .

3. 运行容器

docker run -d -p 80:80 legal-assistant-app

方案三：Vercel/Netlify部署

Vercel部署

# 安装Vercel CLI
npm i -g vercel

# 部署
vercel --prod

Netlify部署

# 安装Netlify CLI
npm i -g netlify-cli

# 部署
netlify deploy --prod --dir=dist/legal-assistant-app/browser

性能优化

1. 启用AOT编译

ng build --aot --configuration production

2. 启用生产模式优化

// main.ts
if (environment.production) {
  enableProdMode();
}

3. 路由懒加载

已在路由配置中实现

4. 图片优化

使用WebP格式
实现图片懒加载
压缩图片资源

5. 代码分割

ng build --configuration production --stats-json

监控与日志

1. 错误监控（推荐Sentry）

// app.config.ts
import * as Sentry from "@sentry/angular";

Sentry.init({
  dsn: "your-sentry-dsn",
  environment: environment.production ? 'production' : 'development',
});

2. 性能监控

// 使用Angular性能API
import { PerformanceObserver } from 'perf_hooks';

3. 日志服务

// src/app/services/logger.service.ts
export class LoggerService {
  log(message: string) {
    if (!environment.production) {
      console.log(message);
    }
  }
  
  error(error: any) {
    // 发送到错误监控服务
  }
}

安全配置

1. CSP配置

<!-- index.html -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' 'unsafe-inline'; 
               style-src 'self' 'unsafe-inline';">

2. HTTPS配置

生产环境必须使用HTTPS

3. API安全

使用JWT进行身份验证
实现CORS策略
API请求加密

持续集成/持续部署 (CI/CD)

GitHub Actions示例

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '18'
    
    - name: Install dependencies
      run: npm ci
    
    - name: Build
      run: npm run build -- --configuration production
    
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist/legal-assistant-app/browser

故障排查

常见问题

1. 路由404错误

问题：刷新页面出现404 解决：配置服务器支持HTML5 History模式

2. 样式不生效

问题：部署后样式丢失解决：检查base href配置

3. API跨域

问题：API请求被CORS阻止解决：配置后端CORS或使用代理

维护建议

定期任务

每月更新依赖包
每周检查错误日志
每月性能分析
每季度安全审计

备份策略

数据库每日备份
代码版本控制
配置文件备份

技术支持

文档资源

联系方式

开发团队邮箱：dev@example.com
技术支持热线：123-4567-8900

最后更新：2024年 版本：v1.0.0

DEPLOYMENT_GUIDE.md 8.0 KB Permalink History Raw