vibe coding一个云书房

Hello！最近我用Vibe Coding 创建了一个简历 Web 项目，并且部署到阿里云服务器上，过程中遇到了不少问题，也学到了很多。

Vibe Coding

🧱 第一步：设计文件架构（决定项目怎么长）

Cursor敲代码前，需要先明确架构设计，这步很重要，决定了后续开发是否顺畅。

project-demo/
├── public/
│   └── textures/          # 所有贴图素材放这里
│       ├── wood/          # 木纹类（地板、书桌）
│       ├── books/         # 书脊纹理
│       └── environment/   # 环境贴图
├── src/
│   ├── components/
│   │   ├── Scene.jsx      # 主场景
│   │   ├── Bookshelf.jsx  # 书架
│   │   ├── Desk.jsx       # 书桌
│   │   ├── Chair.jsx      # 椅子
│   │   └── Lighting.jsx   # 灯光系统
│   ├── hooks/
│   │   └── useModelLoader.js  # 3D模型加载逻辑
│   ├── utils/
│   │   └── textureHelper.js   # 贴图工具函数
│   └── App.jsx
├── package.json
└── vite.config.js

💡 设计思路：

• components/：按3D场景中的物体拆分，每个物体一个文件，方便后期调整
• hooks/：把3D加载逻辑抽离出来，保持组件干净
• public/textures/：贴图和模型放在public下，构建时直接复制，路径清晰

🎨 第二步：准备贴图素材（场景质感的灵魂）

3D场景的真实感全靠贴图。我花了不少时间找素材，整理了这几个宝藏网站：

用途	推荐网站	说明
木纹贴图	Poly Haven	免费高质量PBR贴图，种类齐全
书脊纹理	自己拍 + Photoshop处理	去书店拍了几张书脊，调色后裁切
环境贴图	HDRI Haven	室内环境光，提升场景氛围
纸张质感	Texture Haven	免费且有多种分辨率

贴图处理的几个要点：

• 统一用 2K分辨率（平衡清晰度和加载速度）
• 格式选 .jpg（不透明贴图）或 .png（带透明度）
• 命名规范：材质名_类型.jpg，比如 oak_floor_diffuse.jpg、oak_floor_roughness.jpg

🤖 第三步：用Cursor实现3D场景（人机协同）

打开Cursor后，我主要做了这几件事：

1. 写需求描述（Prompt） 跟Cursor对话要具体，比如：

"在Scene.jsx里创建一个3D书房场景，包含以下元素：一张靠窗的书桌、一个到顶的书架、一把椅子。使用@react-three/fiber和@react-three/drei，灯光用环境光+方向光模拟自然光。"

2. 搭组件骨架 我先创建好组件文件，在文件里写好组件名称、Props接口、基本的return结构，然后把具体实现交给Cursor完成。比如我写：

// Bookshelf.jsx
const Bookshelf = ({ position, books }) => {
  // TODO: 生成书架主体和隔板
  // TODO: 根据books数据渲染书脊
  return (/* 交给Cursor补充 */);
};

3. 贴图应用 我提前准备好贴图路径，告诉Cursor哪个物体用哪张贴图：

"书桌桌面用 /textures/wood/oak_desk_diffuse.jpg，粗糙度贴图用 oak_desk_roughness.jpg"

4. 迭代调整 场景跑起来后，反复微调位置、大小、颜色，让画面更自然。

📁 第四步：贴图在代码中怎么引用

在React Three Fiber项目中，贴图通过 useLoader 或 useTexture 加载：

import { useTexture } from '@react-three/drei';

function Desk() {
  const [diffuse, roughness] = useTexture([
    '/textures/wood/oak_desk_diffuse.jpg',
    '/textures/wood/oak_desk_roughness.jpg'
  ]);

  return (
    <mesh>
      <boxGeometry args={[2, 0.1, 1]} />
      <meshStandardMaterial map={diffuse} roughnessMap={roughness} />
    </mesh>
  );
}

💡 小建议 ：贴图路径用绝对路径 （以/开头），因为构建后资源会被复制到根目录，路径不容易出错。

⚠️ 遇到的几个坑

坑1：贴图太大导致加载慢

• 一开始用了4K贴图，加载明显卡顿
• 解决：统一压缩到2K，用 imagemin 或在线工具压缩，体积减少70%

坑2：贴图路径在本地ok，部署后404

• 开发时用相对路径，构建后资源路径变了
• 解决：统一改成绝对路径 /textures/xxx

坑3：Cursor生成的代码结构混乱

• 让Cursor连续生成好几个功能，代码全堆在一起
• 解决：拆分成小任务，每次只生成一个组件或一个功能

💡 开发流程总结

1. 先设计架构：想清楚目录结构和组件拆分
2. 收集素材：贴图、模型提前准备好，统一命名
3. 搭建组件骨架：手动写组件框架，确定接口
4. Cursor逐个实现：每个组件单独对话，描述清楚需求和贴图
5. 本地预览调整：跑起来看效果，反复微调
6. 代码review：Cursor生成的代码自己也要看一遍，理解每一行

这种开发方式的感受是：我负责"设计"（架构+素材），Cursor负责"施工"（写代码），效率确实高，但前提是自己要懂原理，否则出了问题都不知道怎么修。

部署云服务器

📦 第一步：买服务器（别选错地域！）

• 登录阿里云官网，找到「轻量应用服务器」
• 关键点 ：地域选 香港 （免备案，即买即用），镜像选 Ubuntu 22.04
• 配置：2核2G就够个人项目展示了，几十块钱一个月，学生优惠更便宜

💡 为什么选香港？ 国内服务器要备案，时间长且麻烦，香港节点访问速度也不错。

🔌 第二步：连接服务器（远程登录）

• 在控制台找到你的服务器实例，复制 公网IP （比如 47.94.148.101）
• 本地打开终端，执行：

ssh root@你的IP

• 输入密码（购买时设置的root密码）

❌ 我遇到的坑 ：一开始输错密码，提示 Permission denied。

✅ 解决 ：去控制台重置root密码，或者尝试用户名 admin / ubuntu。

如果还不行，直接用阿里云自带的「远程连接」功能，在网页上操作，简单无脑。

🖥️ 第三步：更新系统 + 安装Nginx和Node.js

成功连上服务器后，依次执行：

# 更新软件包
sudo apt update && sudo apt upgrade -y

# 安装 Nginx（Web服务器）
sudo apt install nginx -y

# 安装 Node.js 20.x（推荐LTS版本）
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install nodejs -y

# 验证是否安装成功
node -v   # 看到 v20.x.x 即可
npm -v    # 看到版本号即可

此时在浏览器输入你的公网IP，应该能看到Nginx欢迎页，说明服务器跑起来了。

📂 第四步：上传前端项目代码（两种方式）

方式一：用 scp 从本地上传（推荐）

在本地终端执行：

scp -r /本地项目路径 root@你的IP:/var/www/

然后输入密码，整个文件夹就传到服务器了。

方式二：用 git clone 从GitHub拉取（更省事）

如果代码已经推送到GitHub，直接在服务器上拉取：

cd /var/www
sudo git clone https://github.com/你的用户名/仓库名.git

❌ 坑来了 ：Git clone时提示 Password authentication is not supported

✅ 原因 ：GitHub已禁用密码登录，必须用个人访问令牌（Token）

✅ 解决：

• 去GitHub设置 -> Developer settings -> Personal access tokens -> 生成新令牌
• 必须勾选 repo 权限
• 克隆时，用户名填GitHub用户名，密码粘贴令牌即可

🔧 第五步：安装项目依赖 & 构建（权限是关键）

进入项目目录：

cd /var/www/你的项目名

安装依赖：

npm install --registry=https://registry.npmmirror.com

❌ 典型报错 ：EACCES: permission denied

✅ 原因 ：git clone 或 scp 上传的文件属于root用户，当前操作者（比如admin）没有写入权限

✅ 解决：更改文件夹所有者

cd /var/www
sudo chown -R 你的用户名:你的用户名 项目文件夹名

之后再 npm install 就顺利了。

构建项目：

npm run build

构建后生成 dist 或 build 文件夹，记住路径（例如 /var/www/项目名/dist）

🌍 第六步：配置Nginx，让网站跑起来

1. 创建Nginx配置文件：

sudo nano /etc/nginx/sites-available/myproject.conf

2. 写入以下内容（记得替换IP和路径）：

server {
    listen 80;
    server_name 你的公网IP;   # 或者你的域名

    root /var/www/项目名/dist;  # 如果是build就改成build
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

3. 启用配置并重启：

sudo ln -s /etc/nginx/sites-available/myproject.conf /etc/nginx/sites-enabled/
sudo nginx -t   # 检查语法
sudo systemctl restart nginx

4. 打开浏览器访问你的公网IP，项目就呈现在眼前啦！

🧩 额外补充：React Router 刷新404解决

如果用了 BrowserRouter，刷新子路径会404，上面的配置里已经加了 try_files 那一行，完美解决。

🚀 最后的小建议

• 如果之后想绑定域名，去域名服务商添加 A记录 指向你的服务器IP，然后在Nginx配置里把 server_name 改成域名即可。
• 建议给服务器配置SSH密钥登录，更安全（不过个人项目也可先不管）。

💬 总结

整个过程最大的感触是：细节决定成败，尤其是权限、版本、认证方式这些容易被忽略的地方。记录下这些踩坑经历，以后再部署就轻车熟路啦！

如果你也在部署中遇到问题，欢迎评论区交流～

觉得有用的话，点个❤️收藏，下次需要就能找到啦！