一个现代化的React应用，用于学习HTTPS协议原理和提供相关技术资源导航。

• 📚 交互式HTTPS图解 - 深入了解HTTPS工作原理
• 🔗 资源导航 - 精选的SSL/TLS相关工具和文档
• 🌙 暗色模式 - 支持明暗主题切换
• 📱 响应式设计 - 完美适配移动端和桌面端
• ⚡ 快速加载 - 基于Vite构建，性能优异

• 前端框架: React 18
• 构建工具: Vite 5
• 样式方案: Tailwind CSS
• 图标库: Lucide React
• UI组件: Radix UI

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 应用将在 http://localhost:3000 启动

# 构建应用
npm run build

# 预览构建结果
npm run preview

# 构建镜像
docker build -t https-guide-app .

# 运行容器
docker run -p 3000:3000 https-guide-app

# 启动应用
docker compose up --build -d

# 查看状态
docker compose ps

# 查看日志
docker compose logs -f

# 停止应用
docker compose down

# 使用项目配置构建
pack build https-guide-app --builder heroku/buildpacks:20

# 或使用环境变量构建
pack build https-guide-app \
  --builder heroku/buildpacks:20 \
  --env-file buildpack.yml

# 运行构建的镜像
docker run -p 3000:3000 https-guide-app

# Paketo Builder（推荐）
pack build https-guide-app --builder paketobuildpacks/builder:base

# Google Builder
pack build https-guide-app --builder gcr.io/buildpacks/builder:v1

# Heroku Builder
pack build https-guide-app --builder heroku/buildpacks:20

├── public/              # 静态资源
├── src/
│   ├── components/      # React组件
│   │   ├── BackToTop.jsx
│   │   ├── HttpsSection.jsx
│   │   ├── ResourceSection.jsx
│   │   └── ThemeToggle.jsx
│   ├── lib/            # 工具函数
│   │   └── utils.ts
│   ├── data.js         # 数据源
│   ├── App.jsx         # 主应用组件
│   ├── index.jsx       # 入口文件
│   └── index.css       # 全局样式
├── Dockerfile          # Docker构建配置
├── Dockerfile.nodejs   # Node.js服务器版本
├── nginx.conf          # Nginx配置
├── docker-compose.yml  # Docker Compose配置
├── buildpack.yml       # CNB构建配置
├── project.toml        # CNB项目配置
└── package.json        # 项目依赖

变量名	默认值	说明
PORT	3000	应用端口
NODE_ENV	development	运行环境

• 开发构建: npm run dev
• 生产构建: npm run build
• Docker构建: docker build .
• CNB构建: pack build .

• 开发环境: http://localhost:3000
• 生产环境: http://localhost:3000
• 健康检查: http://localhost:3000/health

• ✅ CSP (Content Security Policy)
• ✅ XSS Protection
• ✅ Clickjacking Protection
• ✅ HTTPS Only (生产环境)

• ✅ 代码分割
• ✅ 资源压缩 (Gzip)
• ✅ 缓存策略
• ✅ 懒加载

1. Fork 项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

• React - 用户界面库
• Vite - 构建工具
• Tailwind CSS - CSS框架
• Lucide - 图标库
• Radix UI - 无头组件库

如有问题或建议，欢迎提交 Issue。