Skip to content

Commit 309b115

Browse files
author
ruibin3
committed
finish build
1 parent a6f4521 commit 309b115

File tree

7 files changed

+265
-18
lines changed

7 files changed

+265
-18
lines changed

‎.env.example‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Google Gemini API Key (可选，用于 AI 洞察功能)
2+
# 获取地址: https://ai.google.dev/
3+
VITE_GEMINI_API_KEY=your_google_gemini_api_key_here
4+
5+
# Cloudflare Pages 部署时可用的环境变量
6+
# 这些由 Cloudflare 自动提供
7+
# CF_PAGES=1
8+
# CF_PAGES_BRANCH=main
9+
# CF_PAGES_COMMIT_SHA=xxx

‎.github/workflows/deploy.yml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
name: Build and Deploy to Cloudflare Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
pull_request:
8+
branches:
9+
- main
10+
11+
jobs:
12+
build-and-deploy:
13+
runs-on: ubuntu-latest
14+
15+
permissions:
16+
contents: read
17+
deployments: write
18+
19+
steps:
20+
- name: Checkout code
21+
uses: actions/checkout@v4
22+
23+
- name: Setup Node.js
24+
uses: actions/setup-node@v4
25+
with:
26+
node-version: '18'
27+
cache: 'npm'
28+
29+
- name: Install dependencies
30+
run: npm ci
31+
32+
- name: Run TypeScript check
33+
run: npx tsc --noEmit
34+
35+
- name: Build project
36+
run: npm run build
37+
38+
- name: Publish to Cloudflare Pages
39+
uses: cloudflare/pages-action@v1
40+
with:
41+
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
42+
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
43+
projectName: inbox-note-hub
44+
directory: dist
45+
productionBranch: main

‎DEPLOYMENT.md‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
# 🚀 Cloudflare Pages 部署指南
2+
3+
## 📋 部署前检查清单
4+
5+
- [ ] 代码已推送到 GitHub
6+
- [ ] 已安装 Node.js (v16+) 和 npm/pnpm
7+
- [ ] 拥有 Cloudflare 账户
8+
- [ ] 拥有阿里云域名 (可选，可后续添加)
9+
10+
## 🔧 第一步：连接 GitHub 仓库
11+
12+
1. **登录 Cloudflare Dashboard**
13+
- 访问 https://dash.cloudflare.com/
14+
- 使用你的账号登录
15+
16+
2. **进入 Pages 管理**
17+
- 左侧菜单：**Workers & Pages** → **Pages**
18+
- 点击 **Create application** → **Connect to Git**
19+
20+
3. **授权 GitHub**
21+
- 选择 **GitHub**
22+
- 授权 Cloudflare 访问你的 GitHub 账户
23+
- 选择 Fork 后的 **inBoxCard** 仓库
24+
25+
## ⚙️ 第二步：配置构建设置
26+
27+
在 **Create production branch** 页面填写：
28+
29+
| 配置项 | 值 |
30+
|------|-----|
31+
| **Framework preset** | `Vite` |
32+
| **Build command** | `npm run build` |
33+
| **Build output directory** | `dist` |
34+
| **Root directory** | `/` (或不填) |
35+
| **Node.js version** | `18.x` 或更高 |
36+
37+
## 🔐 第三步：配置环境变量（可选）
38+
39+
如果要使用 Gemini AI 功能：
40+
41+
1. 在部署前，点击 **Settings** → **Environment variables**
42+
2. 添加：
43+
- **Variable name**: `VITE_GEMINI_API_KEY`
44+
- **Value**: 你的 Google Gemini API Key
45+
- **Environments**: 选择 `Production`
46+
3. 点击 **Save**
47+
48+
> 获取 API Key: https://ai.google.dev/
49+
50+
## 🚀 第四步：部署
51+
52+
1. 点击 **Save and Deploy**
53+
2. Cloudflare 会自动：
54+
- 拉取最新代码
55+
- 执行构建命令
56+
- 部署到全球 CDN
57+
58+
部署通常需要 **2-5 分钟**，完成后你会看到一个 `.pages.dev` 域名。
59+
60+
## 🌐 第五步：绑定自定义域名（以 card.gudong.site 为例）
61+
62+
### 在 Cloudflare Pages 中：
63+
64+
1. 打开你的 Pages 项目
65+
2. 点击 **Custom domains**
66+
3. 点击 **Set up a custom domain**
67+
4. 输入 `card.gudong.site`，点击 **Continue**
68+
5. Cloudflare 会生成一个 CNAME 记录值（例如：`inbox-hub.pages.dev`）
69+
6. **复制这个值**，等一会儿再验证
70+
71+
### 在阿里云域名控制台中：
72+
73+
1. 登录阿里云：https://dc.console.aliyun.com
74+
2. 找到 `gudong.site` 域名，点击 **DNS 解析**
75+
3. 点击 **添加记录**，填写：
76+
- **记录类型**: `CNAME`
77+
- **主机记录**: `card` (不是 card.gudong.site)
78+
- **记录值**: 粘贴 Cloudflare 提供的值（如 `inbox-hub.pages.dev`）
79+
- **TTL**: 保持默认 `10分钟`
80+
4. 点击 **确认**
81+
82+
4. 回到 Cloudflare Pages，点击 **Verify domain** 或 **Activate domain**
83+
84+
> ⏱️ DNS 解析可能需要 5-30 分钟生效，请耐心等待
85+
86+
## ✅ 验证部署
87+
88+
部署完成后，你可以通过以下方式验证：
89+
90+
```bash
91+
# 测试 .pages.dev 域名
92+
curl https://inbox-hub.pages.dev
93+
94+
# 测试自定义域名
95+
curl https://card.gudong.site
96+
97+
# 或直接在浏览器打开
98+
# https://card.gudong.site
99+
```
100+
101+
## 🔄 自动部署
102+
103+
配置完成后，**每次你推送代码到 GitHub main 分支**，Cloudflare 会**自动构建并部署**。
104+
105+
## 📱 本地测试
106+
107+
部署前，建议先在本地测试：
108+
109+
```bash
110+
# 安装依赖
111+
npm install
112+
113+
# 开发模式
114+
npm run dev
115+
116+
# 生产构建测试
117+
npm run build
118+
npm run preview
119+
```
120+
121+
## 🆘 常见问题
122+
123+
### Q: 部署失败，显示 "Build failed"
124+
**A**: 检查构建日志，通常是：
125+
- 缺少依赖：运行 `npm install`
126+
- TypeScript 错误：运行 `npm run build` 本地检查
127+
- 环境变量问题：确保 `VITE_` 前缀
128+
129+
### Q: 域名解析超时
130+
**A**:
131+
- 检查 DNS 记录是否正确（CNAME，不是 A 记录）
132+
- 等待 DNS 生效（通常 5-30 分钟）
133+
- 使用 `nslookup card.gudong.site` 或 https://dnschecker.org 检查
134+
135+
### Q: 资源 404（如 `/cards/xxx.txt`）
136+
**A**:
137+
- 确认 `vite.config.ts` 中 `viteStaticCopy` 配置正确
138+
- 检查 `cards/` 文件夹是否已上传到 GitHub
139+
- 本地 `npm run build` 验证 `dist/cards/` 是否存在
140+
141+
### Q: 自定义域名不生效
142+
**A**:
143+
- Cloudflare Dashboard 检查 DNS 记录是否已激活
144+
- 清除浏览器缓存，或用隐私模式测试
145+
- 检查域名 DNS 托管是否在 Cloudflare（需要修改 NS 记录）
146+
147+
## 📚 更多资源
148+
149+
- [Cloudflare Pages 文档](https://developers.cloudflare.com/pages/)
150+
- [Vite 部署指南](https://vitejs.dev/guide/static-deploy.html#cloudflare-pages)
151+
- [Cloudflare DNS 管理](https://developers.cloudflare.com/dns/)
152+
153+
---
154+
155+
**一旦部署成功，你的 inBox Note Hub 就可以被全世界访问了！🎉**

‎components/Card.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import { Note } from '../types';
33
import { useApp } from '../context';
4-
import { ICONS } from '../constants';
54

65
interface CardProps {
76
note: Note;

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"react-router-dom": "^6.22.3"
1616
},
1717
"devDependencies": {
18+
"@types/node": "^24.10.1",
1819
"@types/react": "^18.2.66",
1920
"@types/react-dom": "^18.2.22",
2021
"@vitejs/plugin-react": "^4.2.1",
@@ -25,4 +26,4 @@
2526
"vite": "^5.2.0",
2627
"vite-plugin-static-copy": "^1.0.1"
2728
}
28-
}
29+
}

‎services/geminiService.ts‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,36 @@
1-
import { GoogleGenAI } from "@google/genai";
1+
// @google/genai 未安装，此功能暂时禁用
2+
// 如需启用，请先运行: npm install @google/genai
3+
4+
// import { GoogleGenAI } from "@google/genai";
25

36
// CAUTION: In a production app, never expose API keys in frontend code.
47
// For this specific "turn-key" demo request, we assume the environment variable or user input is handled.
58
// Since we cannot prompt for input in a static file generation without UI, we will check if env exists.
69

710
const getApiKey = (): string | undefined => {
811
// Try to get from env (if built with it) or localStorage (if user provided)
9-
return process.env.API_KEY || localStorage.getItem('GEMINI_API_KEY') || undefined;
12+
if (typeof process !== 'undefined' && process.env.API_KEY) {
13+
return process.env.API_KEY;
14+
}
15+
if (typeof localStorage !== 'undefined') {
16+
return localStorage.getItem('GEMINI_API_KEY') || undefined;
17+
}
18+
return undefined;
1019
};
1120

12-
export const generateInsight = async (noteContent: string): Promise<string> => {
21+
export const generateInsight = async (_noteContent: string): Promise<string> => {
1322
const apiKey = getApiKey();
1423
if (!apiKey) {
1524
throw new Error("Please set your Google Gemini API Key in the settings (or localStorage 'GEMINI_API_KEY').");
1625
}
1726

18-
const ai = new GoogleGenAI({ apiKey });
19-
20-
try {
21-
const response = await ai.models.generateContent({
22-
model: 'gemini-2.5-flash',
23-
contents: `Analyze the following quote/note briefly. Explain its core meaning and potential application in daily life. Keep it concise (under 100 words). \n\nQuote: "${noteContent}"`,
24-
});
25-
26-
return response.text || "No insight generated.";
27-
} catch (error) {
28-
console.error("Gemini API Error:", error);
29-
throw new Error("Failed to generate insight. Check API Key or quota.");
30-
}
27+
// TODO: 重新启用此功能需要安装 @google/genai
28+
// const ai = new GoogleGenAI({ apiKey });
29+
// const response = await ai.models.generateContent({
30+
// model: 'gemini-2.5-flash',
31+
// contents: `Analyze the following quote/note briefly...`,
32+
// });
33+
// return response.text || "No insight generated.";
34+
35+
throw new Error("AI insight feature is not available. Please install @google/genai package.");
3136
};

‎wrangler.toml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name = "inbox-note-hub"
2+
type = "javascript"
3+
account_id = ""
4+
workers_dev = true
5+
route = ""
6+
zone_id = ""
7+
compatibility_date = "2024-01-01"
8+
9+
# 配置 Pages 特定选项
10+
[env.production]
11+
name = "inbox-note-hub-prod"
12+
routes = [
13+
{ pattern = "card.gudong.site", zone_name = "gudong.site" }
14+
]
15+
16+
# 静态资源缓存策略
17+
[build]
18+
command = "npm run build"
19+
cwd = "./"
20+
watch_paths = ["src/**/*.ts", "src/**/*.tsx", "cards/**/*"]
21+
22+
[env.production.build]
23+
command = "npm run build"
24+
cwd = "./"
25+
26+
# 构建输出配置
27+
[build.upload]
28+
format = "service-worker"
29+
30+
[build.upload.rules]
31+
type = "CompiledContentType"
32+
globs = ["**/*.wasm"]
33+
fallthrough = true

0 commit comments

Comments
 (0)