# react-router-app

**Repository Path**: alibi-jia/react-router-app

## Basic Information

- **Project Name**: react-router-app
- **Description**: react router 7 测试项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-13
- **Last Updated**: 2025-09-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


---

# 🚀 React Router App with pnpm + Vite + Podman

这是一个使用 [React Router](https://reactrouter.com/) 构建的现代前端项目，采用 `pnpm` 作为包管理器，使用 `Vite` 进行构建，并通过 `Podman` 进行容器化部署。

---

## 📦 技术栈

- **React 19**
- **React Router v7**
- **pnpm**（高效包管理器）
- **Vite**（极速构建工具）
- **Podman**（无守护进程的容器引擎）

---

## 🧰 项目结构

```bash
.
├── app/                  # 页面与组件
├── public/               # 静态资源
├── build/                # 构建产物（由 Vite 生成）
├── pnpm-lock.yaml        # 锁定依赖版本
├── vite.config.ts        # Vite 配置
├── Dockerfile            # 多阶段构建配置
└── .dockerignore         # 构建上下文优化
```

---

## 🏗️ 构建镜像（使用 Podman）

```bash
podman build -t react-router-app .
```

推荐使用 Podman 的多阶段构建，Dockerfile 示例已内置：

```Dockerfile
FROM node:20-slim AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

FROM base AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

FROM base AS build
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules /app/node_modules
RUN pnpm run build

FROM base AS final
WORKDIR /app
COPY --from=build /app/build /app/build
COPY --from=deps /app/node_modules /app/node_modules
EXPOSE 3000
CMD ["pnpm", "start"]
```

---

## 🧠 常见问题与解决方案

| 问题                                               | 原因                          | 解决方案                                            |
| -------------------------------------------------- | ----------------------------- | --------------------------------------------------- |
| Rollup 无法解析依赖                                | `pnpm` 的 symlink 结构        | 在 `vite.config.ts` 中设置 `preserveSymlinks: true` |
| 某些依赖（如 `@tanstack/query-core`, `destr`）报错 | 未显式安装或未标记为 external | 手动安装或在 `rollupOptions.external` 中声明        |
| 构建失败 `ECONNREFUSED 127.0.0.1:7897`             | 代理环境变量干扰              | 清除 `HTTP_PROXY`, `HTTPS_PROXY`                    |
| 构建慢                                             | 缓存未启用                    | 使用 `--mount=type=cache` 或 `pnpm store` 持久化    |

---

## 🧪 本地调试

```bash
pnpm install
pnpm run dev
```

---

## 📤 部署建议

你可以将构建好的镜像部署到任意支持容器的平台，例如：

- AWS ECS
- Google Cloud Run
- Azure Container Apps
- Digital Ocean App Platform
- Fly.io
- Railway

官方推荐模板参考：[React Router Docker部署模板](https://reactrouter.com/start/framework/deploying#templates)

---

## ❤️ 致开发者

如果你也在用 `pnpm` + `Vite` + `Podman`，欢迎参考本项目结构。遇到构建问题别急，很多坑我们已经踩过了。一起打造丝滑的前端容器体验！

---