makut/ht-frontend

Hobby-Time前端镜像

镜像概述

本镜像为Hobby-Time应用的前端部分，采用React框架、Redux状态管理、Material-UI组件库和模块化样式开发。支持本地开发调试、Docker容器部署及Vagrant虚拟机运行，帮助开发者快速搭建一致的开发环境。

核心功能

1. 本地开发模式：通过webpack watch自动监听代码变更，实时更新bundle文件
2. 容器化部署：提供Dockerfile用于构建前端服务器镜像，支持快速启动容器
3. 虚拟机环境：基于Vagrant配置一致的开发虚拟机，避免环境差异问题
4. API集成：通过api文件夹中的函数与后端服务交互
5. 状态与表单管理：使用Redux和redux-form处理应用状态和表单逻辑

使用场景

• 前端功能的本地开发与调试
• 测试环境中的前端部署验证
• 容器化环境下的前端服务发布

配置说明

本地开发环境准备

适用于Unix系统（Windows可参考bash安装文档）：

1. 安装nvm（Node版本管理工具）：

bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

2. 安装Node.js 10并设置默认版本：

bash
nvm install 10
nvm use default 10

3. 安装yarn包管理工具（参考https://classic.yarnpkg.com/en/docs/install#debian-stable%EF%BC%89
4. 配置git secret（用于加密存储敏感信息，需联系仓库所有者获取解密权限）

本地开发流程

1. 启动webpack watch模式（自动更新代码）：

bash
yarn build:watch

2. 启动前端服务器与nginx平衡器：

bash
yarn start:dev

3. 本地访问地址：http://localhost:8800（默认平衡器端口）

Docker容器部署

1. 构建镜像：

bash
docker build -t front-server -f ./frontServer/Dockerfile .

2. 运行容器：

bash
docker run -p 8080:8080 docker.xuanyuan.run/front-server

容器启动后，前端服务可通过http://localhost:8080访问。

Vagrant虚拟机运行

1. 安装VirtualBox和Vagrant（参考https://www.virtualbox.org/wiki/Downloads%EF%BC%89
2. 添加Ubuntu镜像：

bash
vagrant box add ubuntu/xenial64

3. 启动虚拟机：

bash
vagrant up

4. 重启服务（如需）：

bash
vagrant provision --provision-with run

5. 关闭虚拟机：

bash
vagrant halt

前端代码结构

核心代码位于static文件夹：

• index.js：应用入口文件，渲染主组件App.js
• api：后端API交互函数
• components：模块化组件（含样式文件）
• redux：状态管理相关文件（store、reducers）
• utils：工具函数（如表单验证） ===FULL_DESC===