前端UI组件【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址https://gitcode.com/gh_mirrors/re/react-admin点击查看免费下载react-admin 是基于 REST/GraphQL API 构建单页应用SPA的 React 前端框架。本指南以create-react-admin初始化的 Vite 工程为例完整讲解 SPA 的生产构建流程、dist产物结构以及如何通过 GitHub Actions 将应用自动化部署到 GitHub Pages 与 Cloudflare Pages覆盖从命令行构建到云端发布的完整闭环。SPA 架构为什么 react-admin 可以部署在静态服务器上react-admin 天生采用单页应用SPA架构浏览器首次访问时一次性拉取渲染应用所需的 HTML、CSS 与 JavaScript此后所有数据均通过 AJAX 请求从 API 获取而不是像传统 Web 应用那样为每个页面刷新 HTML。这意味着 react-admin 应用可以被打包成少量静态文件交给任意静态 Web 服务器托管无需专用后端API 本身就是后端。SPA 架构带来的部署收益非常直接构建产物为纯静态文件任何支持静态文件托管的平台GitHub Pages、Cloudflare Pages、Nginx、对象存储等都能承载所有路由都由前端路由接管服务器只需把任意 URL 回落到index.html应用本身与后端 API 解耦只需保证 API 的 CORS 等跨域策略正确即可。create-react-admin是基于 Vite.js 的项目脚手架也是官方推荐的新项目初始化方式。它生成的项目在构建时会把应用编译为静态资源配合后续章节的 CI 配置即可实现一键发布。构建单页应用build命令与dist产物在create-react-admin初始化的项目中构建命令由项目的 package.json 的scripts定义。仓库中create-react-admin的模板脚本packages/create-react-admin/templates/common/package.json声明了scripts: { dev: vite, build: vite build, serve: vite preview, type-check: tsc --noEmit, lint: eslint --fix --ext .js,.jsx,.ts,.tsx ./src, format: prettier --write ./src }其中build实际执行的是vite build。在项目根目录运行构建npm run build # 或 yarn buildcreate-react-admin的源码在生成项目时也会按所选包管理器替换对应的构建命令见 packages/create-react-admin/src/generateProject.tsnpmnpm run buildyarnyarn buildbunbun run build构建完成后Vite 会在项目根目录生成dist目录典型产物结构如下dist/ ├ assets/ │ └ index-F74jyUxd.js ├ favicon.ico ├ index.html └ manifest.json各文件的作用index.html应用入口。它包含一个script标签从assets目录加载打包后的 JavaScript 与样式资源同时引用了manifest.json与favicon.ico对应模板 packages/create-react-admin/templates/common/index.html 中的声明assets/index-*.js打包合并后的应用代码文件名带内容哈希用于浏览器长期缓存与版本失效manifest.jsonWeb 应用清单PWA 元数据favicon.ico站点图标。提示产物中的哈希文件名如index-F74jyUxd.js每次构建都可能变化因此部署时请直接上传整个dist目录不要只传单个文件。部署的核心原则用index.html处理所有 URLreact-admin 是 SPA路由由前端react-router 或 TanStack Router接管因此部署时只需将整个dist目录托管到静态服务器并保证所有请求路径都回落到index.html。这样用户直接访问/posts/123、刷新页面或分享链接时服务器都会返回同一个index.html再由前端路由渲染对应页面。若服务器对未知路径返回 404深层链接就会失效。为兼容这类回退需求create-react-admin生成的 Vite 配置特意设置了相对路径基准// packages/create-react-admin/templates/common/vite.config.ts export default defineConfig(({ mode }) ({ plugins: [react()], server: { host: true }, build: { sourcemap: mode development, }, base: ./, }));base: ./使构建产物中的所有资源引用都使用相对路径而非绝对路径这正是产物可以部署在任意子路径如 GitHub Pages 的/repo-name/下而不需要额外配置的原因。仓库中的示例项目也采用了同样的做法例如 examples/demo/vite.config.ts、examples/crm/vite.config.ts。部署到 GitHub Pages用 GitHub Actions 自动化构建与发布GitHub Pages 可以从 GitHub 仓库直接提供静态文件服务。推荐做法是把 Pages 的发布源配置为 GitHub Actions然后在仓库中新建工作流文件.github/workflows/deploy.yml让 CI 在每次推送代码时自动构建并部署。准备工作在 GitHub 仓库的Settings Pages中将发布源Source从默认分支切换为GitHub Actions这样 Pages 部署将由 Actions 工作流接管确保仓库的 Actions 有写入 Pages 的权限工作流中通过permissions显式授予。工作流文件在.github/workflows/deploy.yml中写入以下内容name: Build and deploy on: push: branches: - main jobs: build: name: Build the single-page application runs-on: ubuntu-latest environment: github-pages steps: # Pull the latest version of the application. - uses: actions/checkoutv4 # Setup NodeJS tools. - uses: actions/setup-nodev4 with: node-version: lts/* - name: Enable corepack to use latest stable yarn run: corepack enable # Build the React-admin application. - name: Build run: yarn build # Upload the built application as a GitHub Pages artifact. - name: Upload static files as artifact uses: actions/upload-pages-artifactv3 with: path: dist/ deploy: name: Deploy to GitHub Pages runs-on: ubuntu-latest needs: build environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} # Grant GITHUB_TOKEN the permissions required to make a Pages deployment permissions: pages: write # to deploy to Pages id-token: write # to verify the deployment originates from an appropriate source steps: # Deploy the GitHub Pages artifact. - name: Deploy artifact to GitHub Pages uses: actions/deploy-pagesv4对该工作流的逐步解读触发条件on.push限定分支main因此每次向 main 分支推送或合并都会触发构建build job检出代码 → 用actions/setup-nodev4安装 Node.jslts/*表示最新 LTS 版本→ 启用 corepack保证 yarn 可用→ 执行yarn build→ 用官方actions/upload-pages-artifactv3把dist/上传为 Pages 专用 artifactdeploy jobneeds: build确保等待构建完成声明environment: github-pages并在permissions中授予pages: write与id-token: write最后用actions/deploy-pagesv4将 artifact 发布到 Pages。工作流运行完成后部署后的网站 URL 可以在 GitHub 仓库的Settings Pages页面找到。若使用base: ./构建且仓库路径包含子目录部署产物中的资源引用同样可以正确解析。部署到 Cloudflare Pages通过 API Token 与 Wrangler 发布Cloudflare Pages 是另一款静态托管平台同样可以通过 GitHub Actions 自动部署。由于 Cloudflare 不支持像 GitHub Pages 那样直接消费构建产物需要借助官方 wrangler 工具把dist目录推送到 Cloudflare。准备工作拥有一个 Cloudflare 账号并从 Cloudflare 文档获取你的Account ID在 Cloudflare 个人页面的 API Token 区域创建新 Token点击Create Token选择Edit Cloudflare Workers模板在Account Resources中选择你的组织Zone Resources选择All Zones点击Continue to Summary再点击Create Token在 Cloudflare 控制台创建 Pages 应用进入Compute (workers) Workers Pages Create Pages tab选择直接上传方式direct upload填写项目名并点击Create Project。下图展示了在 Cloudflare 控制台创建 Pages 应用的入口在 GitHub 仓库的Settings Secrets and variables Actions中配置以下三个 Secret# Your Cloudflare API token CLOUDFLARE_API_TOKEN # Your Cloudflare Account ID CLOUDFLARE_ACCOUNT_ID # The Cloudflare Pages project name CLOUDFLARE_PROJECT_NAME工作流文件配置好 Secret 后在.github/workflows/deploy.yml中写入name: Build and deploy on: push: branches: - main jobs: build: name: Build the single-page application runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - uses: actions/setup-nodev4 with: node-version: lts/* - name: Install dependencies run: npm install - name: Build run: npm run build - name: Upload dist folder as an artifact uses: actions/upload-artifactv4 with: name: dist path: dist deploy: name: Deploy to Cloudflare runs-on: ubuntu-latest needs: build permissions: contents: read deployments: write steps: - name: Download prebuilt admin uses: actions/download-artifactv4 with: name: dist path: dist - name: Display structure of downloaded files run: ls -R - name: Deploy artifact to Cloudflare uses: cloudflare/wrangler-actionv3 with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} command: pages deploy dist --project-name${{ secrets.CLOUDFLARE_PROJECT_NAME }} gitHubToken: ${{ secrets.GITHUB_TOKEN }}对该工作流的要点说明build job检出代码 → 安装 Node.js →npm install安装依赖 →npm run build构建 → 用通用actions/upload-artifactv4把dist目录上传为构建产物注意这里用的是通用 artifact而非 GitHub Pages 专用 artifactdeploy jobneeds: build串行等待下载构建产物后执行ls -R便于排查文件结构最后通过cloudflare/wrangler-actionv3调用wrangler pages deploy dist --project-name...完成发布gitHubToken: ${{ secrets.GITHUB_TOKEN }}用于 Wrangler Action 与 GitHub 交互权限说明此工作流需要contents: read与deployments: write权限无需 GitHub Pages 的pages: write权限。配置完成后每次向main分支推送代码GitHub Actions 都会自动构建并把应用发布到你的 Cloudflare Pages。两种部署方案的对比与选择对比维度GitHub PagesCloudflare Pages托管入口GitHub 仓库Settings Pages发布源选 GitHub ActionsCloudflare 控制台Workers Pages创建 Pages 项目需要的凭证无需额外 Token工作流内授予pages: write需要CLOUDFLARE_API_TOKEN、CLOUDFLARE_ACCOUNT_ID、CLOUDFLARE_PROJECT_NAME三个 Secret产物上传actions/upload-pages-artifactv3actions/deploy-pagesv4actions/upload-artifactv4cloudflare/wrangler-actionv3部署原理官方 Pages 动作直接消费 artifactwrangler 命令把dist推送到 Cloudflare适用场景代码与站点都在 GitHub、追求零额外配置需要 Cloudflare 的边缘网络、CDN 与更多域名/缓存控制能力两个工作流都遵循同一模式on.push监听 main 分支 → build job 构建出dist→ deploy job 负责上传与发布。两者的差异主要体现在产物中转方式与发布工具上。除了这两个平台Vite、Next.js、Remix 等平台官方也都提供了各自的部署指南其通用原则与本教程一致构建静态产物 → 上传产物 → 让所有 URL 回落到index.html。部署排障与注意事项深层链接 404若访问/posts/123返回 404检查服务器是否配置了 SPA 回退将所有路径重写到index.html。GitHub Pages 与 Cloudflare Pages 的上述工作流均已内置该行为。资源路径错误构建后页面空白且控制台出现资源 404通常是因为部署在子路径下却使用了绝对路径引用。确认 Vite 配置为base: ./见 packages/create-react-admin/templates/common/vite.config.ts。API 跨域SPA 的 API 请求来自浏览器务必确保后端 API 允许前端域名发起跨域请求CORS。Secret 泄漏Cloudflare 工作流中的 Token 与 Account ID 一律通过 GitHub 仓库 Secrets 注入切勿硬编码在工作流文件中。参考文档create-react-admin CLI 使用说明SPA 架构与核心概念create-react-admin 模板源码create-react-admin 构建命令生成逻辑赞分享前端UI组件【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址https://gitcode.com/gh_mirrors/re/react-admin点击查看免费下载相关推荐Zola 部署到 Codeberg Pages基于 Woodpecker CI 的自动化发布实战指南Zola 部署到 Codeberg Pages基于 Woodpecker CI 的自动化发布实战指南 导读 本篇指南以 Zola 官方文档的 Codeberg静态站点CLI开发工具Flue 部署指南基于 Vite 构建产物并发布到 Node.js 与 CloudflareFlue 部署指南基于 Vite 构建产物并发布到 Node.js 与 Cloudflare FlueThe sandbox agent framework人工智能大模型AI AgentAgent 框架工具调用Agent 沙箱MCP Clients使用JamesIves/github-pages-deploy-action自动部署到GitHub Pages指南使用JamesIves/github pages deploy action自动部署到GitHub Pages指南 1. 项目目录结构及介绍 在 JamesIvCI/CD创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考