佛系程序员_ 3D 交互式圣诞树记忆展示项目线上部署流程

学习笔记

发布日期: 2025-12-14 19:43:46

喜欢量: 10 个

阅读次数: 52

一个基于 React Three Fiber 的 3D 交互式圣诞树记忆展示项目，通过 AI 手势识别技术，让您的珍贵回忆在魔法般的 3D 空间中呈现。部署到vercel托管平台。

# 下载代码：
https://github.com/yftan/christmas-tree

# 添加照片

1. 将照片放入 `public/photos/` 目录
2. 照片命名格式：`YYYY_MM_序号.jpg`（例如：`2024_12_1.jpg`）
文件名按照：\src\components\TreeSystem.tsx 中，// 实际存在的照片文件列表
    const photoFiles = [] 格式来命名。
		注意，不一样的话，就同步修改代码。
3. 照片会自动按时间排序并在树上显示

# 本地部署
查看代码中的：README.md文档。

# 线上部署
先看效果：https://christmas-tree-yyii.vercel.app/
再学习部署方法.

对于这个项目，有几种免费的方式可以部署到线上。让我为您介绍几种主要的选择：

## 免费部署平台选项

### 1. Vercel (推荐)  
Vercel 是专门为前端项目设计的托管平台，特别适合 React 应用：
- 完全免费（个人项目）
- 自动部署 GitHub 仓库
- 全球 CDN
- 自动 HTTPS
- 非常快的部署速度

### 2. Netlify
另一个优秀的前端托管服务：
- 免费层足够个人项目使用
- 拖放部署或 Git 集成
- 自动构建和部署
- 自定义域名支持

### 3. GitHub Pages
GitHub 提供的免费静态网站托管服务：
- 完全免费
- 需要一些手动配置
- 通过 GitHub Actions 可以自动化部署

## 部署步骤

首先让我们检查项目结构和构建配置：

## 部署 Christmas Memory Tree 项目到免费平台

### 项目分析

从您的项目结构看，这是一个基于 Vite 构建的 React + TypeScript 项目，使用了现代前端技术栈：
- React 18
- TypeScript
- Vite 构建工具
- Three.js 3D 图形
- TailwindCSS 样式框架

### 推荐的免费部署平台

#### 1. Vercel (强烈推荐)

**优点：**
- 专为现代前端框架设计
- 一键部署 GitHub 仓库
- 免费 SSL 证书
- 全球 CDN
- 自动构建和部署

**部署步骤：**
1. 将项目推送到 GitHub 仓库
2. 访问 [vercel.com](https://vercel.com)
3. 使用 GitHub 账户登录
4. 点击 "New Project"
5. 选择您的项目仓库 (如果你的是public仓库，则直接贴网址，无须授权)
6. 保持默认设置，点击 "Deploy"  （这里有一个授权提示，当你输入仓库名称，没有自动搜索到时，会弹出窗口跳转到github去授权。）
7. 等待部署完成，获得 URL

最后，需替换为自己的在国内能打开的域名。用vercel.app的域名在国内会打不开。

请看视频教程。

#### 2. Netlify * 
（本文中未亲测）
**优点：**
- 简单易用
- 免费 SSL
- 拖放部署支持
- 自定义域名

**部署步骤：**
1. 将项目推送到 GitHub 仓库
2. 访问 [netlify.com](https://netlify.com)
3. 使用 GitHub 账户登录
4. 点击 "New site from Git"
5. 选择 GitHub 并授权
6. 选择您的仓库
7. 设置构建命令为 `npm run build`
8. 设置发布目录为 `dist`
9. 点击 "Deploy site"

#### 3. GitHub Pages

**优点：**
- 完全免费
- 与 GitHub 深度集成
- 自定义域名支持

**部署步骤：**
1. 在项目根目录创建 `.github/workflows/deploy.yml` 文件
2. 添加以下内容：

对于vercel,自动部署的，什么也不用做。代码更新后，也是自动更新的。

```yaml
name: Deploy to GitHub Pages

on:
  push:
    branches: [ main, master ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

- name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

- name: Install dependencies
        run: npm ci

- name: Build project
        run: npm run build

- name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
```

3. 推送更改到 GitHub
4. 在仓库设置中启用 GitHub Pages，选择 `gh-pages` 分支

### 构建注意事项

您的项目使用了 WebAssembly 文件（`/wasm` 目录）和模型文件（`/models` 目录），需要确保这些资源正确打包：

1. 确保 `public` 目录中的文件会被复制到构建输出中
2. 检查路径引用是否正确

### 特殊配置要求

由于您的项目使用了 MediaPipe 和 WebAssembly，需要注意：

1. 确保 WASM 文件正确加载
2. 检查 Content-Type 头部设置（WASM 文件需要 `application/wasm` MIME 类型）

对于 Vercel，可以在项目根目录创建 `vercel.json`：

```json
{
  "headers": [
    {
      "source": "/wasm/(.*)",
      "headers": [
        {
          "key": "Content-Type",
          "value": "application/wasm"
        }
      ]
    }
  ]
}
```

### 总结

我推荐使用 Vercel 部署您的项目，因为它：
1. 专为现代前端项目优化
2. 部署过程简单快捷
3. 提供优秀的性能和全球访问速度
4. 完全免费用于个人项目

只需将代码推送到 GitHub，然后连接到 Vercel 即可完成部署。整个过程通常在几分钟内完成，而且不需要特殊配置。

yyii

https://amtb.info/show/MjY5

本博客所有文章除特別声明外,转载请注明来源佛系程序员 !