开源自荐,用windsurf做了一个ai菜谱推荐网页/小程序,入坑域名+云服务器+部署,分享下小小心得

基本全都由windsurf生成,之前用过cursor,免费使用到期了,换windsurf试试
对比之下windsurf更省力,代码版本管理上更清晰一点,不过差别真的很小基本就是使用习惯的区别。比cursor便宜一半,准备冲了 :hugs:
第一次部署网站,每一步都问的claude,先试了几个ai推荐的快速部署网站(白嫖版),要不就是有冷启动太慢了(Render),要不就是不支持api调用超10S(Vercel),要不就是国内的要备案成本也高,最后还是在自己的云服务器上部署了,总共成本:境外云服务器(2C2G 99/年,双十一价格)+域名(15,黑五囤的)+cf免费。部署完后,又让windsurf根据项目重新生成了一套微信小程序的代码,也是飞速。
记录下过程,大佬们轻喷

开源地址 https://github.com/Evaoooos/what2eat

体验网站 https://www.eatwhat.food/

今天吃什么 (What to Eat Today)

一个基于 AI 的智能菜谱推荐系统,帮助你解决"今天吃什么"的困扰。

功能特点

  • :robot: AI 智能推荐菜谱
  • :shallow_pan_of_food: 支持中餐/西餐选择
  • :alarm_clock: 按烹饪时间筛选
  • :ramen: 个性化口味偏好
  • :bento: 特殊需求标签(适合带饭/一锅完成/简单厨具)
  • :iphone: 响应式设计,支持移动端

技术栈

  • Node.js
  • Express
  • OpenAI API(用的代理)
  • HTML/CSS/JavaScript

快速开始

  1. 克隆项目
git clone [项目地址]
cd server
  1. 安装依赖
npm install
  1. 配置环境变量
    创建 .env 文件并添加:
OPENAI_API_KEY=你的API密钥
//OPENAI_BASE_URL=你的代理网站  若有
PORT=3000
  1. 启动服务器
npm start
  1. 访问网站
    打开浏览器访问 http://localhost:3000

部署指南

1. 服务器环境准备

# 更新系统
sudo apt update && sudo apt upgrade -y

# 安装必要的软件
sudo apt install nginx nodejs npm -y

# 安装 PM2
sudo npm install -g pm2

2. 项目部署结构

/var/www/what2eat/
├── server/
│   ├── public/
│   ├── server.js
│   ├── package.json
│   └── .env
├── logs/
└── ecosystem.config.js

3. 环境变量配置

创建 .env 文件并配置:

OPENAI_API_KEY=你的OpenAI API密钥
OPENAI_BASE_URL=你的OpenAI Base URL

4. PM2 配置

创建 ecosystem.config.js

module.exports = {
  apps: [{
    name: "food-recommendation",
    script: "./server/server.js",
    instances: 2,
    exec_mode: "cluster",
    env_production: {
      NODE_ENV: "production",
      PORT: 3000
    }
  }]
}

5. Nginx 配置

server {
    listen 80;
    server_name your_domain.com;// 替换为域名
    
    root /var/www/foodapp/server/public;
    index index.html;

    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }
}     //根据需求配置,不知道怎么配问ai,我也不清楚配的都是什么

6. SSL 配置 (Cloudflare)(以我购买域名的Dynadot网址为例)

  1. 域名DNS设置
  • 登录Dynadot账户
  • 将域名的DNS服务器更改为Cloudflare的DNS服务器(具体地址将在添加网站到CF后提供)
    类似这样的地址:
  1. Cloudflare设置
  • 在Cloudflare注册并登录账户
  • 点击"Add Site"添加域名
  • 选free
  • 等待CF扫描DNS记录
  • 添加DNS记录:
    • 类型: A记录
    • 名称: @ 或 域名
    • 内容: 云服务器的IP地址
    • 代理状态: 开启(橙色云朵)
  • 这一步注意把默认有的其他地址删掉,只留自己云服务器的地址
  1. 启用 SSL/TLS 加密(Flexible 模式或FULL)

7. 日志管理

# 安装 PM2 日志轮转模块
pm2 install pm2-logrotate

# 配置日志轮转
pm2 set pm2-logrotate:max_size '10M'
pm2 set pm2-logrotate:retain 10
pm2 set pm2-logrotate:rotateInterval '0 0 * * *'
14 个赞

纯用ai开发花了多长时间呀

太强了!大佬!!

image
hhhhhhh

2 个赞

这种功简单的,如果熟悉api调用,半个小时就能搞定,毕竟都不需要你敲啥代码,比较耗时的是部署流程,虽然有ai教你,也要自己琢磨下

噢噢,我还以为是让ai写那种完善的菜谱库,然后再让他选呢 :joy:
这个界面非常漂亮

你找AI写网站的提示词是啥

image
yum

界面告诉windsurf”请给我可爱温馨的界面,可适当添加表情” 就欧克了

就写帮我开发一个网站,功能balablba,要求balbalab(比如易部署,轻量),风格balabala,帮我在当前目录下创建文件并完成代码(其实这句都可以不要,windsurf write模式下就是自动生成的文件及代码的)。生成整体框架了再慢慢改,怕自己表达不清楚的,先找个ai把内容发过去让ai给你生成一段prompt(但其实没必要,无论windsurf还是cursor都理解的很到位,说人话就行)

1 个赞

好的,学到了

厨具:保鲜膜
很可以 :laughing:

666 还没用过windsurf cursor,贫穷,只能在论坛找免费的4o网站用,我糊了个节点展示页面,估摸着消耗了五十多刀了

无语恶趣味、


界面太可爱惹 就按这个做了!

mark一下,thanks