Ver Fonte

新增部署相关说明

liuziting há 6 meses atrás
pai
commit
26d8b1cefb
5 ficheiros alterados com 231 adições e 2 exclusões
  1. 37 0
      .github/workflows/deploy.yml
  2. 129 0
      DEPLOYMENT.md
  3. 18 1
      README.md
  4. 18 1
      README_EN.md
  5. 29 0
      vercel.json

+ 37 - 0
.github/workflows/deploy.yml

@@ -0,0 +1,37 @@
+name: Deploy to Vercel and Netlify
+
+on:
+    push:
+        branches: [main, master]
+    pull_request:
+        branches: [main, master]
+
+jobs:
+    build-and-test:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: '18'
+                  cache: 'npm'
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Type check
+              run: npm run type-check
+
+            - name: Build project
+              run: npm run build
+              env:
+                  VITE_TEXT_GENERATION_BASE_URL: ${{ secrets.VITE_TEXT_GENERATION_BASE_URL }}
+                  VITE_TEXT_GENERATION_API_KEY: ${{ secrets.VITE_TEXT_GENERATION_API_KEY }}
+                  VITE_TEXT_GENERATION_MODEL: ${{ secrets.VITE_TEXT_GENERATION_MODEL }}
+                  VITE_IMAGE_GENERATION_BASE_URL: ${{ secrets.VITE_IMAGE_GENERATION_BASE_URL }}
+                  VITE_IMAGE_GENERATION_API_KEY: ${{ secrets.VITE_IMAGE_GENERATION_API_KEY }}
+                  VITE_IMAGE_GENERATION_MODEL: ${{ secrets.VITE_IMAGE_GENERATION_MODEL }}

+ 129 - 0
DEPLOYMENT.md

@@ -0,0 +1,129 @@
+# 部署指南 / Deployment Guide
+
+## 🚀 支持的部署平台
+
+### Vercel 部署
+
+-   **地址**: https://yffs.vercel.app/
+-   **特点**: 自动部署、边缘网络、无服务器函数支持
+-   **配置文件**: `vercel.json`
+
+### Netlify 部署
+
+-   **地址**: https://whattoeatai.netlify.app/
+-   **特点**: 持续部署、表单处理、重定向规则
+-   **配置文件**: `netlify.toml`
+
+## 🔧 环境变量配置
+
+部署前需要配置以下环境变量:
+
+```env
+# 文本生成 API(零一万物)
+VITE_TEXT_GENERATION_BASE_URL=https://api.lingyiwanwu.com/v1/
+VITE_TEXT_GENERATION_API_KEY=your_text_api_key_here
+VITE_TEXT_GENERATION_MODEL=yi-lightning
+
+# 图片生成 API(智谱 AI)
+VITE_IMAGE_GENERATION_BASE_URL=https://open.bigmodel.cn/api/paas/v4/
+VITE_IMAGE_GENERATION_API_KEY=your_image_api_key_here
+VITE_IMAGE_GENERATION_MODEL=cogview-3-flash
+```
+
+## 📋 部署步骤
+
+### Vercel 部署步骤
+
+1. **Fork 项目**到你的 GitHub 账户
+2. **登录 Vercel**并连接 GitHub
+3. **导入项目**:选择 fork 的仓库
+4. **配置环境变量**:在 Vercel 项目设置中添加上述环境变量
+5. **部署**:Vercel 会自动构建和部署
+
+或者使用一键部署:
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/liu-ziting/what-to-eat&env=VITE_TEXT_GENERATION_BASE_URL,VITE_TEXT_GENERATION_API_KEY,VITE_TEXT_GENERATION_MODEL,VITE_IMAGE_GENERATION_BASE_URL,VITE_IMAGE_GENERATION_API_KEY,VITE_IMAGE_GENERATION_MODEL&envDescription=AI%20API%20配置)
+
+### Netlify 部署步骤
+
+1. **Fork 项目**到你的 GitHub 账户
+2. **登录 Netlify**并连接 GitHub
+3. **新建站点**:选择 fork 的仓库
+4. **构建设置**:
+    - Build command: `npm run build:netlify`
+    - Publish directory: `dist`
+    - Node version: `18`
+5. **环境变量**:在 Netlify 站点设置中添加环境变量
+6. **部署**:Netlify 会自动构建和部署
+
+或者使用一键部署:
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/liu-ziting/what-to-eat)
+
+## 🔍 获取 Netlify Site ID
+
+要获取 Netlify 部署状态徽章,需要找到你的 Site ID:
+
+1. 登录 Netlify 控制台
+2. 选择你的站点
+3. 进入 **Site settings** > **General**
+4. 在 **Site information** 中找到 **Site ID**
+5. 将 README 中的 `your-site-id` 替换为实际的 Site ID
+
+## 🛠️ 自定义域名
+
+### Vercel 自定义域名
+
+1. 在 Vercel 项目设置中选择 **Domains**
+2. 添加你的域名
+3. 按照提示配置 DNS 记录
+
+### Netlify 自定义域名
+
+1. 在 Netlify 站点设置中选择 **Domain management**
+2. 添加自定义域名
+3. 配置 DNS 记录或使用 Netlify DNS
+
+## 🔄 自动部署
+
+两个平台都支持 Git 集成的自动部署:
+
+-   **推送到主分支**:自动触发生产环境部署
+-   **推送到其他分支**:创建预览部署(Vercel)或分支部署(Netlify)
+-   **Pull Request**:自动创建预览部署
+
+## 📊 监控和分析
+
+### Vercel Analytics
+
+-   在项目设置中启用 Vercel Analytics
+-   查看页面性能和用户访问数据
+
+### Netlify Analytics
+
+-   升级到付费计划以使用 Netlify Analytics
+-   查看流量统计和性能指标
+
+## 🚨 故障排除
+
+### 常见问题
+
+1. **构建失败**:检查环境变量是否正确配置
+2. **页面 404**:确保 SPA 重定向规则已配置
+3. **API 调用失败**:检查 API 密钥和端点配置
+4. **静态资源加载失败**:检查构建输出目录配置
+
+### 调试步骤
+
+1. 查看构建日志
+2. 检查环境变量配置
+3. 本地测试构建命令
+4. 检查网络和 API 连接
+
+## 📞 支持
+
+如果遇到部署问题,可以:
+
+1. 查看项目 Issues
+2. 参考官方文档:
+    - [Vercel 文档](https://vercel.com/docs)
+    - [Netlify 文档](https://docs.netlify.com/)
+3. 提交新的 Issue 描述问题

+ 18 - 1
README.md

@@ -5,8 +5,13 @@
 基于 AI 的智能菜谱生成平台,支持中华八大菜系 + 国际料理,提供营养分析、酒水推荐、菜谱效果图生成等功能。
 
 [![Live Demo](https://img.shields.io/badge/🌐_Live_Demo-一饭封神-yellow?style=for-the-badge)](https://eat.lz-t.top/)
+[![Vercel](https://img.shields.io/badge/🚀_Vercel-yffs.vercel.app-black?style=for-the-badge&logo=vercel)](https://yffs.vercel.app/)
+[![Netlify](https://img.shields.io/badge/🌐_Netlify-whattoeatai.netlify.app-00C7B7?style=for-the-badge&logo=netlify)](https://whattoeatai.netlify.app/)
 [![GitHub](https://img.shields.io/badge/GitHub-liu--ziting/what--to--eat-black?style=for-the-badge&logo=github)](https://github.com/liu-ziting/what-to-eat)
 
+[![Vercel Deploy Status](https://img.shields.io/github/deployments/liu-ziting/what-to-eat/production?label=Vercel&logo=vercel&style=flat-square)](https://vercel.com/liu-ziting/what-to-eat)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/your-site-id/deploy-status)](https://app.netlify.com/sites/whattoeatai/deploys)
+
 ## 🚀 核心功能
 
 -   **智能菜谱生成** - 基于食材和菜系偏好生成专业菜谱
@@ -23,7 +28,7 @@
 -   **样式方案:** Tailwind CSS 3.4+
 -   **构建工具:** Vite 5.0+
 -   **AI 服务:** 零一万物 Yi-Lightning + 智谱 AI CogView-3-Flash
--   **部署平台:** Netlify
+-   **部署平台:** Vercel + Netlify
 
 ## 🚀 快速开始
 
@@ -62,6 +67,18 @@ npm run build:netlify
 npm run preview
 ```
 
+## 🚀 一键部署
+
+### Vercel 部署
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/liu-ziting/what-to-eat&env=VITE_TEXT_GENERATION_BASE_URL,VITE_TEXT_GENERATION_API_KEY,VITE_TEXT_GENERATION_MODEL,VITE_IMAGE_GENERATION_BASE_URL,VITE_IMAGE_GENERATION_API_KEY,VITE_IMAGE_GENERATION_MODEL&envDescription=AI%20API%20配置&envLink=https://github.com/liu-ziting/what-to-eat%23环境变量配置)
+
+### Netlify 部署
+
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/liu-ziting/what-to-eat)
+
+> 📖 详细部署指南请参考:[DEPLOYMENT.md](./DEPLOYMENT.md)
+
 ### 环境变量配置
 
 ```env

+ 18 - 1
README_EN.md

@@ -5,8 +5,13 @@
 An AI-powered intelligent recipe generation platform supporting Chinese Eight Great Cuisines + International Cuisine, providing nutritional analysis, wine pairing, recipe image generation, and comprehensive cooking guidance.
 
 [![Live Demo](https://img.shields.io/badge/🌐_Live_Demo-YiFan_FengShen-yellow?style=for-the-badge)](https://eat.lz-t.top/)
+[![Vercel](https://img.shields.io/badge/🚀_Vercel-yffs.vercel.app-black?style=for-the-badge&logo=vercel)](https://yffs.vercel.app/)
+[![Netlify](https://img.shields.io/badge/🌐_Netlify-whattoeatai.netlify.app-00C7B7?style=for-the-badge&logo=netlify)](https://whattoeatai.netlify.app/)
 [![GitHub](https://img.shields.io/badge/GitHub-liu--ziting/what--to--eat-black?style=for-the-badge&logo=github)](https://github.com/liu-ziting/what-to-eat)
 
+[![Vercel Deploy Status](https://img.shields.io/github/deployments/liu-ziting/what-to-eat/production?label=Vercel&logo=vercel&style=flat-square)](https://vercel.com/liu-ziting/what-to-eat)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/your-site-id/deploy-status)](https://app.netlify.com/sites/whattoeatai/deploys)
+
 ## 🚀 Core Features
 
 -   **Smart Recipe Generation** - Generate professional recipes based on ingredients and cuisine preferences
@@ -23,7 +28,7 @@ An AI-powered intelligent recipe generation platform supporting Chinese Eight Gr
 -   **Styling:** Tailwind CSS 3.4+
 -   **Build Tool:** Vite 5.0+
 -   **AI Services:** Yi-Lightning (01.AI) + CogView-3-Flash (Zhipu AI)
--   **Deployment:** Netlify
+-   **Deployment:** Vercel + Netlify
 
 ## 🚀 Quick Start
 
@@ -62,6 +67,18 @@ npm run build:netlify
 npm run preview
 ```
 
+## 🚀 One-Click Deploy
+
+### Deploy to Vercel
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/liu-ziting/what-to-eat&env=VITE_TEXT_GENERATION_BASE_URL,VITE_TEXT_GENERATION_API_KEY,VITE_TEXT_GENERATION_MODEL,VITE_IMAGE_GENERATION_BASE_URL,VITE_IMAGE_GENERATION_API_KEY,VITE_IMAGE_GENERATION_MODEL&envDescription=AI%20API%20Configuration&envLink=https://github.com/liu-ziting/what-to-eat%23environment-variables)
+
+### Deploy to Netlify
+
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/liu-ziting/what-to-eat)
+
+> 📖 For detailed deployment guide, see: [DEPLOYMENT.md](./DEPLOYMENT.md)
+
 ### Environment Variables
 
 ```env

+ 29 - 0
vercel.json

@@ -0,0 +1,29 @@
+{
+    "buildCommand": "npm run build",
+    "outputDirectory": "dist",
+    "framework": "vite",
+    "installCommand": "npm install",
+    "devCommand": "npm run dev",
+    "rewrites": [
+        {
+            "source": "/(.*)",
+            "destination": "/index.html"
+        }
+    ],
+    "headers": [
+        {
+            "source": "/assets/(.*)",
+            "headers": [
+                {
+                    "key": "Cache-Control",
+                    "value": "public, max-age=31536000, immutable"
+                }
+            ]
+        }
+    ],
+    "functions": {
+        "app/api/**/*.js": {
+            "runtime": "nodejs18.x"
+        }
+    }
+}