# base64-to-blob

**Repository Path**: brose/base64-to-blob

## Basic Information

- **Project Name**: base64-to-blob
- **Description**: 前端使用 React + Vite，后端使用 Node.js + Express 提供简单的 API（例如 `/api/download` 用于接收 base64 并返回附件下载
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-09
- **Last Updated**: 2026-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + Node.js (前后端一体)

这是一个演示用的前后端工程：前端使用 React + Vite，后端使用 Node.js + Express 提供简单的 API（例如 `/api/download` 用于接收 base64 并返回附件下载），并在生产环境中把前端构建产物 `dist/` 作为静态资源提供。

主要用途：
- 本地开发与调试前端（Vite dev）并通过代理访问后端接口。
- 将前端在镜像内构建并与后端一起打包进小体积的生产镜像（multi-stage Dockerfile）。

快速目录说明：
- `src/`：前端源码（React + Vite）。
- `server/`：后端代码（Express），包含 `server/index.js`（启动 HTTP 服务并提供 API）。
- `dist/`：前端构建产物（生产环境静态资源）。
- `Dockerfile` / `Dockerfile.prod`：多阶段构建，镜像内构建前端并且只把最终 `dist/` 与后端运行时依赖拷贝到最终镜像。

本地开发
1. 安装依赖（你可以选择 pnpm 或 npm）：

```powershell
pnpm install --force
# 或者
npm install
```

2. 启动后端（在 `server/` 目录）：

```powershell
cd server
npm install
npm start
```

3. 启动前端开发服务器（项目根）

```powershell
pnpm run dev
# 或者
npm run dev
```

在开发模式下，Vite 已配置把 `/api` 代理到后端（默认端口 `5174`），你可以在浏览器访问 `http://localhost:5173`（Vite 默认端口）查看页面并调试前端。

构建与运行（生产）
1. 在本地构建前端产物（如果你不使用 Docker）：

```powershell
npm run build
# 这会在项目根生成 `dist/` 目录
```

2. 运行后端并提供静态文件：

```powershell
cd server
NODE_ENV=production node index.js
```

Docker：在镜像内构建前端并打包后端（推荐）
1. 使用 `Dockerfile.prod` 构建一个生产镜像：

```bash
docker build -f Dockerfile.prod -t react-app:prod .
```

2. 运行镜像：

```bash
docker run -p 5174:5174 react-app:prod
```

说明：`Dockerfile`/`Dockerfile.prod` 都是多阶段构建：第一阶段在镜像内安装前端依赖并运行构建，第二阶段单独安装后端生产依赖，最终镜像只包含后端运行时以及前端 `dist/`，这样确保最终镜像最小且不包含前端的 `node_modules`。

常见操作
- 访问健康检查：`GET http://localhost:5174/api/health`
- 调试 `/api/download`：向 `POST /api/download` 发送 JSON：`{ "filename":"hello.txt", "data":"SGVsbG8sIFdvcmxkIQ==" }` 将返回附件下载。

我清理掉了一些仓库内的冗余/可选文件以让仓库更清爽（仍保留 `Dockerfile`、`Dockerfile.prod`、`server/` 和 `dist/`）：
- 已删除（可选/文档/脚本）：`DOCKER-*.md` 文档集合、`docker-helper.sh`、`docker-helper.ps1`、`PROJECT-STRUCTURE.md`、`README-ARCHITECTURE.md`、`QUICK-START.md`、`COMPLETION-SUMMARY.md`。

如需恢复任一被删除文件或保留特定文档，请告诉我，我可以把那些文件还原或把重要内容合并到本 README 中。

下一步建议
- 若要我在当前环境运行一次 `docker build` 来验证镜像，我可以帮你运行并报告构建日志（需要一些时间）。
- 或者我可以把 `docker-compose.yml` 更新为直接使用 `Dockerfile.prod` 的构建配置。

---
开发者提示：当你修改 `package.json`（前端或后端）时，Docker 缓存策略会基于我们在 Dockerfile 中先复制 `package*.json` 再执行 `npm install` 的方式发挥作用，从而避免每次修改代码都重新下载依赖。



Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.